摘要：后續(xù)前端筆試題面試題記錄下小結(jié)我想說的是在找工作期間，肯定有自己發(fā)揮不好，或者不會(huì)的問題，一定要在晚上的時(shí)候自己再學(xué)習(xí)總結(jié)一下，在一個(gè)問題上面盡量不要栽倒兩次，學(xué)到了的才是自己的。

過完元宵，就到上海找了波工作，現(xiàn)在已經(jīng)入職好了，蹭波熱點(diǎn)，寫一波面試記錄，內(nèi)容包含筆試題和面試題，還有一些沒有寫進(jìn)來，準(zhǔn)備再開一篇，許久沒寫了，寫的確實(shí)有些慢。如果喜歡的話可以點(diǎn)波贊，或者關(guān)注一下，希望大家看完本文可以有所收獲。

個(gè)人博客了解一下：obkoro1.com

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

跨域問題是這是瀏覽器為了安全實(shí)施的同源策略導(dǎo)致的，同源策略限制了來自不同源的document、腳本，同源的意思就是兩個(gè)URL的域名、協(xié)議、端口要完全相同。

script標(biāo)簽jsonp跨域、nginx反向代理、node.js中間件代理跨域、后端在頭部信息設(shè)置安全域名、后端在服務(wù)器上設(shè)置cors。

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

function isObjArr(value){
     if (Object.prototype.toString.call(value) === "[object Array]") {
            console.log("value是數(shù)組");
       }else if(Object.prototype.toString.call(value)==="[object Object]"){//這個(gè)方法兼容性好一點(diǎn)
            console.log("value是對(duì)象");
      }else{
          console.log("value不是數(shù)組也不是對(duì)象")
      }
}

ps：千萬不能使用typeof來判斷對(duì)象和數(shù)組，因?yàn)檫@兩種類型都會(huì)返回"object"。

這個(gè)問題還是挺經(jīng)常被問到的，有一些會(huì)直接問定時(shí)器的機(jī)制，有一些是通過筆試題的方式問執(zhí)行順序然后問我為什么是這樣。

長(zhǎng)話短說，我們需要記住的是：因?yàn)閖s是單線程的，瀏覽器遇到setTimeout或者setInterval會(huì)先執(zhí)行完當(dāng)前的代碼塊，在此之前會(huì)把定時(shí)器推入瀏覽器的待執(zhí)行事件隊(duì)列里面，等到瀏覽器執(zhí)行完當(dāng)前代碼之后會(huì)看一下事件隊(duì)列里面有沒有任務(wù)，有的話才執(zhí)行定時(shí)器的代碼。 所以即使把定時(shí)器的時(shí)間設(shè)置為0還是會(huì)先執(zhí)行當(dāng)前的一些代碼。

上面是我寫的一個(gè)栗子，如果還不清楚的話，大家可以找一篇關(guān)于定時(shí)器機(jī)制的詳解文章來看看。

這個(gè)問題被問了一次，當(dāng)時(shí)我只記得，alt屬性是用于img標(biāo)簽的，當(dāng)圖片失效的時(shí)候會(huì)出現(xiàn)alt屬性里面的內(nèi)容，title用來標(biāo)記頁面的title，當(dāng)時(shí)面試官問我還有沒有其他的區(qū)別。我。。。

然后我就找了一篇文章來看，漲了點(diǎn)姿勢(shì)：

1.
//1.當(dāng)圖片不輸出信息的時(shí)候，會(huì)顯示alt信息 鼠標(biāo)放上去沒有信息，當(dāng)圖片正常讀取，不會(huì)出現(xiàn)alt信息
2.
// 2.當(dāng)圖片不輸出信息的時(shí)候，會(huì)顯示alt信息 鼠標(biāo)放上去會(huì)出現(xiàn)title信息
//當(dāng)圖片正常輸出的時(shí)候，不會(huì)出現(xiàn)alt信息，鼠標(biāo)放上去會(huì)出現(xiàn)title信息

另外還有一些關(guān)于title屬性的知識(shí)：

title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標(biāo)簽
title屬性的功能是提示。額外的說明信息和非本質(zhì)的信息請(qǐng)使用title屬性。title屬性值可以比alt屬性值設(shè)置的更長(zhǎng)
title屬性有一個(gè)很好的用途，即為鏈接添加描述性文字，特別是當(dāng)連接本身并不是十分清楚的表達(dá)了鏈接的目的。

這個(gè)問題主要會(huì)出現(xiàn)在筆試題上面，比如：

這個(gè)盒子在w3c標(biāo)準(zhǔn)盒子模型和IE的怪異盒子模型下面它的寬度分別是多少？

標(biāo)準(zhǔn)盒子模型：總寬度=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設(shè)置為border-box將使用怪異盒子模型
當(dāng)怪異盒子的寬度小于border+padding的寬度的時(shí)候，content width將變?yōu)?，盒子的寬度會(huì)被border和padding的總寬度撐開

ES5的繼承時(shí)通過prototype或構(gòu)造函數(shù)機(jī)制來實(shí)現(xiàn)。ES5的繼承實(shí)質(zhì)上是先創(chuàng)建子類的實(shí)例對(duì)象，然后再將父類的方法添加到this上（Parent.apply(this)）。

ES6的繼承機(jī)制完全不同，實(shí)質(zhì)上是先創(chuàng)建父類的實(shí)例對(duì)象this（所以必須先調(diào)用父類的super()方法），然后再用子類的構(gòu)造函數(shù)修改this。

具體的：ES6通過class關(guān)鍵字定義類，里面有構(gòu)造方法，類之間通過extends關(guān)鍵字實(shí)現(xiàn)繼承。子類必須在constructor方法中調(diào)用super方法，否則新建實(shí)例報(bào)錯(cuò)。因?yàn)樽宇悰]有自己的this對(duì)象，而是繼承了父類的this對(duì)象，然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法，子類得不到this對(duì)象。

ps：super關(guān)鍵字指代父類的實(shí)例，即父類的this對(duì)象。在子類構(gòu)造函數(shù)中，調(diào)用super后，才可使用this關(guān)鍵字，否則報(bào)錯(cuò)。

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

具體的可以參見菜鳥教程：鏈接。類似的鏡像問題還有HTML5的新增屬性，可以自己谷歌一下。

1xx：1開頭的是信息狀態(tài)碼
2xx：2開頭的是請(qǐng)求成功
3xx：3開頭的是重定向
4xx：4開頭的是客戶端錯(cuò)誤
5xx：5開頭的是服務(wù)器錯(cuò)誤

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

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

1、Set結(jié)構(gòu)去重。

這是ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。

let unique= [...new Set(array)];
//es6 Set數(shù)據(jù)結(jié)構(gòu)類似于數(shù)組，成員值是唯一的，有重復(fù)的值會(huì)自動(dòng)去重。
//Set內(nèi)部使用===來判斷是否相等，類似"1"和1會(huì)兩個(gè)都保存，NaN和NaN只會(huì)保存一個(gè)

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

    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會(huì)大于0就跳過push的那一步
             newA.push(key);
           }
        });
        return newA;
    }
    console.log(unique(a)) ;//["1", "2", "3", 1, NaN, NaN, undefined, null, "a", "b"]
//ps:這個(gè)方法不能分辨NaN,會(huì)出現(xiàn)兩個(gè)NaN。是有問題的，下面那個(gè)方法好一點(diǎn)。

3、遍歷，將數(shù)組的值添加到一個(gè)對(duì)象的屬性名里，并給屬性賦值，對(duì)象不能添加相同屬性名，以這個(gè)為依據(jù)可以實(shí)現(xiàn)數(shù)組去重，然后用Object.keys(對(duì)象)返回這個(gè)對(duì)象可枚舉屬性組成的數(shù)組，這個(gè)數(shù)組就是去重后的數(shù)組。

    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;//這步新添加一個(gè)屬性，并賦值，如果不賦值的話，屬性會(huì)添加不上去
        })
        return Object.keys(obj);//`Object.keys(對(duì)象)`返回這個(gè)對(duì)象可枚舉屬性組成的數(shù)組，這個(gè)數(shù)組就是去重后的數(shù)組
    }
    console.log(unique(a));//["1", "2", "3", "NaN", "undefined", "null", "a", "b"]

這個(gè)方法會(huì)將 number,NaN,undefined,null，變?yōu)樽址问剑驗(yàn)閷?duì)象的屬性名就是一個(gè)字符串，根據(jù)需求來吧，想想還是Set去重最簡(jiǎn)單也最有效。

單行文本的話可以使用height和line-height設(shè)置同一高度。

position+margin：設(shè)置父元素:position: relative;，子元素height: 100px; position:absolute;top: 50%; margin: -50px 0 0 0;（定高）

position+transform：設(shè)置父元素position:relative,子元素：position: absolute;top: 50%;transform: translate(0, -50%);（不定高）

百搭flex布局(ie10+)，設(shè)置父元素display:flex;align-items: center;（不定高）

類似的還有很多，實(shí)際應(yīng)用中，可能就會(huì)使用一兩種方法，有興趣的可以看下這篇文章

這個(gè)問題主要在筆試題碰到的多，思路就是先將字符串轉(zhuǎn)成一個(gè)數(shù)組，然后用數(shù)組的reverse()+join()方法。

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

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

我想說的是：在找工作期間，肯定有自己發(fā)揮不好，或者不會(huì)的問題，一定要在晚上的時(shí)候自己再學(xué)習(xí)總結(jié)一下，在一個(gè)問題上面盡量不要栽倒兩次，學(xué)到了的才是自己的。

以上就是近期面試遇到的一些問題記錄總結(jié)，實(shí)際上還是有一些問題沒有寫出來，許久沒有寫文章了，寫的很慢，有點(diǎn)累。先給自己立一個(gè)flag，下周再寫一篇出來。希望各位大佬看了本文，能有所收獲，感謝閱讀。

最后：如需轉(zhuǎn)載，請(qǐng)放上原文鏈接并署名。碼字不易，感謝支持！本人寫文章本著交流記錄的心態(tài)，寫的不好之處，不撕逼，但是歡迎指點(diǎn)。然后就是希望看完的朋友點(diǎn)個(gè)喜歡，也可以關(guān)注一下我。
個(gè)人blog and 掘金個(gè)人主頁

以上2018.3.18

title與alt的區(qū)別

CSS-標(biāo)準(zhǔn)盒模型 & 怪異盒模型

常見的js算法面試題收集，es6實(shí)現(xiàn)

CSS垂直居中的11種實(shí)現(xiàn)方式