Q：什麼情況下會碰到跨域問題？有哪些解決方法？

• 跨域問題是這是瀏覽器為了安全實施的同源策略導致的，同源策略限制了來自不同源的document、指令碼，同源的意思就是兩個URL的域名、協議、埠要完全相同。
• script標籤jsonp跨域、nginx反向代理、node.js中介軟體代理跨域、後端在頭部資訊設定安全域名、後端在伺服器上設定cors。

.fn是什麼意思？</span></strong></div><spanstyle="color:rgb(34,34,34);font−size:14px;background−color:rgb(255,255,255);">.fn是什麼意思？</span></strong></div><spanstyle="color:rgb(34,34,34);font−size:14px;background−color:rgb(255,255,255);">.fn是指jquery的名稱空間，加上fn上的方法及屬性，會對jquery例項每一個有效。

 Jquery中與與.fn的區別是什麼？

         答：在回答這個問題以前，需要明白一個事實：Jquery的方法是可以拓展的，上面這4個例子都是對Jquery方法的拓展，從呼叫宣告建立方法的方式來看，可以歸結為兩類：一類直接由符呼叫；另一類由符呼叫；另一類由(“”)來呼叫，說到這裡你是不是想到了Java語言中的靜態方法和例項方法，是的，如果從java類的角度認識呼叫建立的Jquery方法可能更好理解些，儘管Javascript沒有明確的類的概念。好了現在可以回答問題了：拓展的方法是靜態方法，可以使用拓展的方法是靜態方法，可以使用直接呼叫，其拓展的方式有兩種，一般使用.extend();；而.extend();；而.fn拓展的方法是例項方法，必須由“物件”("")來呼叫，其拓展的方式同樣有兩種，一般使用("")來呼叫，其拓展的方式同樣有兩種，一般使用.fn.extend({ })。

   知識延展，究竟什麼是fn?

    答：同樣在回答這樣一個問題以前請開啟一個Jquery檔案 搜尋這樣一個字元“jQuery.prototype”，告訴我你看到了什麼：jQuery.fn = jQuery.prototype = {……}

Q：如何判斷一個變數是物件還是陣列？

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

1. function isObjArr(variable){

2. if (Object.prototype.toString.call(value) === "[object Array]") {

3. console.log('value是陣列');

4. }else if(Object.prototype.toString.call(value)==='[object Object]'){//這個方法相容性好一點

5. console.log('value是物件');

6. }else{

7. console.log('value不是陣列也不是物件')

8. }

9. }

• 1

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

Q：定時器的執行順序或機制。

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

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

上面是我寫的一個栗子，如果還不清楚的話，大家可以找一篇關於定時器機制的詳解文章來看看。

Q：html中title屬性和alt屬性的區別？

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

然後我就找了一篇文章來看，漲了點姿勢：

1. 1.<img src="#" alt="alt資訊" />

2. //1.當圖片不輸出資訊的時候，會顯示alt資訊 滑鼠放上去沒有資訊，當圖片正常讀取，不會出現alt資訊

3. 2.<img src="#" alt="alt資訊" title="title資訊" />

4. // 2.當圖片不輸出資訊的時候，會顯示alt資訊 滑鼠放上去會出現title資訊

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

• 1

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

1. title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標籤

2. title屬性的功能是提示。額外的說明資訊和非本質的資訊請使用title屬性。title屬性值可以比alt屬性值設定的更長

3. title屬性有一個很好的用途，即為連結新增描述性文字，特別是當連線本身並不是十分清楚的表達了連結的目的。

• 1

Q：標準盒子模型與IE怪異盒子模型

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

<div style="width:100px;height="100px;border:10px;padding:10px;"></div> 

• 1
• 2

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

1. 標準盒子模型：總寬度=content100px+border 10px*2+padding 10px*2 //140px

2. 怪異盒子模型: 總寬度=content60px+ border 10px*2+padding 10px*2 //100px

• 1

ps：

1. box-sizing： content-box || border-box；//css3 box-sizing設定為border-box將使用怪異盒子模型

2. 當怪異盒子的寬度小於border+padding的寬度的時候，content width將變為0，盒子的寬度會被border和padding的總寬度撐開

• 1

ES5的繼承和ES6的繼承有什麼區別？

ES5的繼承時通過prototype或建構函式機制來實現。ES5的繼承實質上是先建立子類的例項物件，然後再將父類的方法新增到this上（Parent.apply(this)）。

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

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

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

Q：CSS3有哪些新增的屬性？

1. 這裡可以分為邊框、背景，漸變，陰影、2D轉換 3D轉換等之類的來說。

2. 比如：邊框(border-radius、border-shadow、border-image)之類的 。

• 1

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

Q：你知道哪些http狀態碼？

1. 1xx：1開頭的是資訊狀態碼

2. 2xx：2開頭的是請求成功

3. 3xx：3開頭的是重定向

4. 4xx：4開頭的是客戶端錯誤

5. 5xx：5開頭的是伺服器錯誤

• 1

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

Q:如何對一個數組去重？

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

1、Set結構去重。

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

1. let unique= [...new Set(array)];

2. //es6 Set資料結構類似於陣列，成員值是唯一的，有重複的值會自動去重。

3. //Set內部使用===來判斷是否相等，類似'1'和1會兩個都儲存，NaN和NaN只會儲存一個

• 1

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

1. let a = ['1','2','3',1,NaN,NaN,undefined,undefined,null,null, 'a','b','b'];

2. let unique= arr =>{

3. let newA=[];

4. arr.forEach(key => {

5. if( newA.indexOf(key)<0 ){ //遍歷newA是否存在key，如果存在key會大於0就跳過push的那一步

6. newA.push(key);

7. }

8. });

9. return newA;

10. }

11. console.log(unique(a)) ;//["1", "2", "3", 1, NaN, NaN, undefined, null, "a", "b"]

12. //ps:這個方法不能分辨NaN,會出現兩個NaN。是有問題的，下面那個方法好一點。

• 1

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

1. let a = ['1', '2', '3', 1,NaN,NaN,undefined,undefined,null,null, 'a', 'b', 'b'];

2. const unique = arr => {

3. var obj = {}

4. arr.forEach(value => {

5. obj[value] = 0;//這步新新增一個屬性，並賦值，如果不賦值的話，屬性會新增不上去

6. })

7. return Object.keys(obj);//Object.keys(物件)返回這個物件可列舉屬性組成的陣列，這個陣列就是去重後的陣列

8. }

9. console.log(unique(a));//["1", "2", "3", "NaN", "undefined", "null", "a", "b"]

• 1

注意：

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

Q：垂直居中有哪些方法？

• 單行文字的話可以使用height和line-height設定同一高度。
• position+margin：設定父元素:position: relative;，子元素height: 100px; position:absolute;top: 50%; margin: -50px 0 0 0;（定高）
• position+transform：設定父元素position:relative,子元素：position: absolute;top: 50%;transform: translate(0, -50%);（不定高）
• 百搭flex佈局(ie10+)，設定父元素display:flex;align-items: center;（不定高）

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

Q：翻轉一個字串

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

1. let a="hello word";

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

• 1

localStorage和sessionStorage作用域

不同瀏覽器無法共享localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁面間可以共享相同的 localStorage（頁面屬於相同域名和埠），但是不同頁面或標籤頁間無法共享sessionStorage的資訊。這裡需要注意的是，頁面及標 籤頁僅指頂級視窗，如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是可以共享sessionStorage的。