前端筆試題面試題記錄（上）

個人部落格了解一下：

obkoro1.com

前端筆試題面試題記錄（下）

判斷陣列和物件分別都有好幾種方法，其中用prototype.tostring.call()相容性最好。

function isobjarr(value)else if(object.prototype.tostring.call(value)==='[object object]')else
}

ps：千萬不能使用typeof來判斷物件和陣列，因為這兩種型別都會返回"object"。

這個問題還是挺經常被問到的，有一些會直接問定時器的機制，有一些是通過筆試題的方式問執行順序然後問我為什麼是這樣。

長話短說，我們需要記住的是：因為js是單執行緒的，瀏覽器遇到settimeout或者setinterval會先執行完當前的**塊，在此之前會把定時器推入瀏覽器的待執行事件佇列裡面，等到瀏覽器執行完當前**之後會看一下事件佇列裡面有沒有任務，有的話才執行定時器的**。所以即使把定時器的時間設定為0還是會先執行當前的一些**。

這個問題被問了一次，當時我只記得，alt屬性是用於img標籤的，當失效的時候會出現alt屬性裡面的內容，title用來標記頁面的title，當時面試官問我還有沒有其他的區別。我。。。

1.2. //當正常輸出的時候，不會出現alt資訊，滑鼠放上去會出現title資訊

另外還有一些關於title屬性的知識：

title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標籤 title屬性的功能是提示。額外的說明資訊和非本質的資訊請使用title屬性。title屬性值可以比alt屬性值設定的更長 title屬性有乙個很好的用途，即為鏈結新增描述性文字，特別是當連線本身並不是十分清楚的表達了鏈結的目的。

這個問題主要會出現在筆試題上面，比如：

這個盒子在w3c標準盒子模型和ie的怪異盒子模型下面它的寬度分別是多少？

標準盒子模型：總寬度=content100px+border 10px*2+padding 10px*2 //140px 怪異盒子模型: 總寬度=content60px+ border 10px*2+padding 10px*2 //100px

ps：

box-sizing： content-box || border-box；//css3 box-sizing設定為border-box將使用怪異盒子模型當怪異盒子的寬度小於border+padding的寬度的時候，content width將變為0，盒子的寬度會被border和padding的總寬度撐開

es6的繼承機制完全不同，實質上是先建立父類的例項物件this（所以必須先呼叫父類的super()方法），然後再用子類的建構函式修改this。

具體的：es6通過class關鍵字定義類，裡面有構造方法，類之間通過extends關鍵字實現繼承。子類必須在constructor方法中呼叫super方法，否則新建例項報錯。因為子類沒有自己的this物件，而是繼承了父類的this物件，然後對其進行加工。如果不呼叫super方法，子類得不到this物件。

ps：super關鍵字指代父類的例項，即父類的this物件。在子類建構函式中，呼叫super後，才可使用this關鍵字，否則報錯。

這裡可以分為邊框、背景，漸變，陰影、2d轉換 3d轉換等之類的來說。比如：邊框(border-radius、border-shadow、border-image)之類的。

具體的可以參見菜鳥教程：鏈結。類似的映象問題還有html5的新增屬性，可以自己谷歌一下。

1xx：1開頭的是資訊狀態碼 2xx：2開頭的是請求成功 3xx：3開頭的是重定向 4xx：4開頭的是客戶端錯誤 5xx：5開頭的是伺服器錯誤

這個問題並不難，在筆試面試都有碰到過，巧的是之前我就總結過一篇類似的文章。

這個問題出現了好幾次，而且很多面試官不滿足你只給出一兩種方法。

1、set結構去重。

這是es6 提供了新的資料結構 set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。

let unique= [...new set(array)];
//es6 set資料結構類似於陣列，成員值是唯一的，有重複的值會自動去重。
//set內部使用===來判斷是否相等，類似'1'和1會兩個都儲存，nan和nan只會儲存乙個

2、遍歷，將值新增到新陣列，用indexof()判斷值是否存在，已存在就不新增，達到去重效果。

let a = ['1','2','3',1,nan,nan,undefined,undefined,null,null, 'a','b','b'];
let unique= arr =>
});return newa;
}console.log(unique(a)) ;//["1", "2", "3", 1, nan, nan, undefined, null, "a", "b"]
//ps:這個方法不能分辨nan,會出現兩個nan。是有問題的，下面那個方法好一點。

3、遍歷，將陣列的值新增到乙個物件的屬性名裡，並給屬性賦值，物件不能新增相同屬性名，以這個為依據可以實現陣列去重，然後用object.keys(物件)返回這個物件可列舉屬性組成的陣列，這個陣列就是去重後的陣列。

let a = ['1', '2', '3', 1,nan,nan,undefined,undefined,null,null, 'a', 'b', 'b'];
const unique = arr => 
arr.foreach(value => )
return object.keys(obj);//`object.keys(物件)`返回這個物件可列舉屬性組成的陣列，這個陣列就是去重後的陣列
}console.log(unique(a));//["1", "2", "3", "nan", "undefined", "null", "a", "b"]

這個方法會將 number,nan,undefined,null，變為字串形式，因為物件的屬性名就是乙個字串，根據需求來吧，想想還是set去重最簡單也最有效。

類似的還有很多，實際應用中，可能就會使用一兩種方法，有興趣的可以看下這篇文章

這個問題主要在筆試題碰到的多，思路就是先將字串轉成乙個陣列，然後用陣列的reverse()+join()方法。

let str="hello word";
let b=[...str].reverse().join("");//drow olleh

前端筆試題面試題記錄（下）

我想說的是：在找工作期間，肯定有自己發揮不好，或者不會的問題，一定要在晚上的時候自己再學習總結一下，在乙個問題上面盡量不要栽倒兩次，學到了的才是自己的。

以上就是近期面試遇到的一些問題記錄總結，實際上還是有一些問題沒有寫出來，許久沒有寫文章了，寫的很慢，有點累。先給自己立乙個flag，下週再寫一篇出來。希望各位大佬看了本文，能有所收穫，感謝閱讀。

and掘金個人主頁

以上2018.3.18

title與alt的區別

css-標準盒模型 & 怪異盒模型

常見的js演算法面試題收集，es6實現

css垂直居中的11種實現方式

前端筆試題面試題記錄（上）

筆試面試題記錄

筆試面試題記錄

面試題記錄

前端筆試題面試題記錄（上）

筆試面試題記錄

筆試面試題記錄

面試題記錄

相關推薦