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

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

• 跨域問題是這是瀏覽器爲了安全實施的同源策略致使的，同源策略限制了來自不一樣源的document、腳本，同源的意思就是兩個URL的域名、協議、端口要徹底相同。
• script標籤jsonp跨域、nginx反向代理、node.js中間件代理跨域、後端在頭部信息設置安全域名、後端在服務器上設置cors。

---

Q：如何判斷一個變量是對象仍是數組？

判斷數組和對象分別都有好幾種方法，其中用prototype.toString.call()兼容性最好。

function isObjArr(variable){
     if (Object.prototype.toString.call(value) === "[object Array]") {
            console.log('value是數組');
       }else if(Object.prototype.toString.call(value)==='[object Object]'){//這個方法兼容性好一點
            console.log('value是對象');
      }else{
          console.log('value不是數組也不是對象')
      }
}

ps：千萬不能使用typeof來判斷對象和數組，由於這兩種類型都會返回"object"。

---

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

這個問題仍是挺常常被問到的，有一些會直接問定時器的機制，有一些是經過筆試題的方式問執行順序而後問我爲何是這樣。

長話短說，咱們須要記住的是：由於js是單線程的，瀏覽器遇到setTimeout或者setInterval會先執行完當前的代碼塊，在此以前會把定時器推入瀏覽器的待執行事件隊列裏面，等到瀏覽器執行完當前代碼以後會看一下事件隊列裏面有沒有任務，有的話才執行定時器的代碼。 因此即便把定時器的時間設置爲0仍是會先執行當前的一些代碼。

 

 

 

上面是我寫的一個栗子，若是還不清楚的話，你們能夠找一篇關於定時器機制的詳解文章來看看。

---

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

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

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

1.<img src="#" alt="alt信息" />
//1.當圖片不輸出信息的時候，會顯示alt信息 鼠標放上去沒有信息，當圖片正常讀取，不會出現alt信息
2.<img src="#" alt="alt信息" title="title信息" />
// 2.當圖片不輸出信息的時候，會顯示alt信息 鼠標放上去會出現title信息
//當圖片正常輸出的時候，不會出現alt信息，鼠標放上去會出現title信息

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

title屬性能夠用在除了base，basefont，head，html，meta，param，script和title以外的全部標籤
title屬性的功能是提示。額外的說明信息和非本質的信息請使用title屬性。title屬性值能夠比alt屬性值設置的更長
title屬性有一個很好的用途，即爲連接添加描述性文字，特別是當鏈接自己並非十分清楚的表達了連接的目的。

---

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

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

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

這個盒子在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的總寬度撐開

---

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有哪些新增的屬性？

這裏能夠分爲邊框、背景，漸變，陰影、2D轉換 3D轉換等之類的來講。
好比：邊框(border-radius、border-shadow、border-image)之類的 。

具體的能夠參見菜鳥教程：連接。相似的鏡像問題還有HTML5的新增屬性，能夠本身谷歌一下。

---

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

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

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

---

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

這個問題出現了好幾回，並且不少面試官不知足你只給出一兩種方法。

一、Set結構去重。

這是ES6 提供了新的數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。

let unique= [...new Set(array)];
//es6 Set數據結構相似於數組，成員值是惟一的，有重複的值會自動去重。
//Set內部使用===來判斷是否相等，相似'1'和1會兩個都保存，NaN和NaN只會保存一個

二、遍歷，將值添加到新數組，用indexOf()判斷值是否存在，已存在就不添加，達到去重效果。

let a = ['1','2','3',1,NaN,NaN,undefined,undefined,null,null, 'a','b','b'];
    let unique= arr =>{
         let newA=[];
        arr.forEach(key => {
           if( newA.indexOf(key)<0 ){ //遍歷newA是否存在key，若是存在key會大於0就跳過push的那一步
             newA.push(key);
           }
        });
        return newA;
    }
    console.log(unique(a)) ;//["1", "2", "3", 1, NaN, NaN, undefined, null, "a", "b"]
//ps:這個方法不能分辨NaN,會出現兩個NaN。是有問題的，下面那個方法好一點。

三、遍歷，將數組的值添加到一個對象的屬性名裏，並給屬性賦值，對象不能添加相同屬性名，以這個爲依據能夠實現數組去重，而後用Object.keys(對象)返回這個對象可枚舉屬性組成的數組，這個數組就是去重後的數組。

let a = ['1', '2', '3', 1,NaN,NaN,undefined,undefined,null,null, 'a', 'b', 'b'];
    const unique = arr => {
        var obj = {}
        arr.forEach(value => {
            obj[value] = 0;//這步新添加一個屬性，並賦值，若是不賦值的話，屬性會添加不上去
        })
        return Object.keys(obj);//`Object.keys(對象)`返回這個對象可枚舉屬性組成的數組，這個數組就是去重後的數組
    }
    console.log(unique(a));//["1", "2", "3", "NaN", "undefined", "null", "a", "b"]

注意：

這個方法會將 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()方法。

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

---

小結

我想說的是：在找工做期間，確定有本身發揮很差，或者不會的問題，必定要在晚上的時候本身再學習總結一下，在一個問題上面儘可能不要栽倒兩次，學到了的纔是本身的。

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