摘要：引言半月刊第四期來(lái)啦，這段時(shí)間新增了道高頻面試題，今天就把最近半月匯總的面試題和部分答案發(fā)給大家，幫助大家查漏補(bǔ)缺，歡迎加群互相學(xué)習(xí)。更多更全的面試題和答案匯總在下面的項(xiàng)目中，點(diǎn)擊查看。

半月刊第四期來(lái)啦，這段時(shí)間 Daily-Interview-Question 新增了 14 道高頻面試題，今天就把最近半月匯總的面試題和部分答案發(fā)給大家，幫助大家查漏補(bǔ)缺，歡迎 加群 互相學(xué)習(xí)。

更多更全的面試題和答案匯總在下面的項(xiàng)目中，點(diǎn)擊查看。

項(xiàng)目地址：Daily-Interview-Question

如果修改了，Vue 是如何監(jiān)控到屬性的修改并給出警告的。

解析：

子組件為何不可以修改父組件傳遞的 Prop 單向數(shù)據(jù)流，易于監(jiān)測(cè)數(shù)據(jù)的流動(dòng)，出現(xiàn)了錯(cuò)誤可以更加迅速的定位到錯(cuò)誤發(fā)生的位置。

如果修改了，Vue 是如何監(jiān)控到屬性的修改并給出警告的。

if (process.env.NODE_ENV !== "production") {
      var hyphenatedKey = hyphenate(key);
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(
          (""" + hyphenatedKey + "" is a reserved attribute and cannot be used as component prop."),
          vm
        );
      }
      defineReactive$$1(props, key, value, function () {
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            "Avoid mutating a prop directly since the value will be " +
            "overwritten whenever the parent component re-renders. " +
            "Instead, use a data or computed property based on the prop"s " +
            "value. Prop being mutated: "" + key + """,
            vm
          );
        }
      });
    }

在initProps的時(shí)候，在defineReactive時(shí)通過(guò)判斷是否在開(kāi)發(fā)環(huán)境，如果是開(kāi)發(fā)環(huán)境，會(huì)在觸發(fā)set的時(shí)候判斷是否此key是否處于updatingChildren中被修改，如果不是，說(shuō)明此修改來(lái)自子組件，觸發(fā)warning提示。

需要特別注意的是，當(dāng)你從子組件修改的prop屬于基礎(chǔ)類型時(shí)會(huì)觸發(fā)提示。 這種情況下，你是無(wú)法修改父組件的數(shù)據(jù)源的， 因?yàn)榛A(chǔ)類型賦值時(shí)是值拷貝。你直接將另一個(gè)非基礎(chǔ)類型（Object, array）賦值到此key時(shí)也會(huì)觸發(fā)提示(但實(shí)際上不會(huì)影響父組件的數(shù)據(jù)源)， 當(dāng)你修改object的屬性時(shí)不會(huì)觸發(fā)提示，并且會(huì)修改父組件數(shù)據(jù)源的數(shù)據(jù)。

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 40 題

var a = 10;
(function () {
    console.log(a)
    a = 5
    console.log(window.a)
    var a = 20;
    console.log(a)
})()

解析：

依次輸出：undefined -> 10 -> 20

在立即執(zhí)行函數(shù)中，var a = 20; 語(yǔ)句定義了一個(gè)局部變量 a，由于js的變量聲明提升機(jī)制，局部變量a的聲明會(huì)被提升至立即執(zhí)行函數(shù)的函數(shù)體最上方，且由于這樣的提升并不包括賦值，因此第一條打印語(yǔ)句會(huì)打印undefined，最后一條語(yǔ)句會(huì)打印20。

由于變量聲明提升，a = 5; 這條語(yǔ)句執(zhí)行時(shí)，局部的變量a已經(jīng)聲明，因此它產(chǎn)生的效果是對(duì)局部的變量a賦值，此時(shí)window.a 依舊是最開(kāi)始賦值的10。

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 41題

比如 sleep(1000) 意味著等待1000毫秒，可從 Promise、Generator、Async/Await 等角度實(shí)現(xiàn)。

解析：4 種方式

//Promise
const sleep = time => {
  return new Promise(resolve => setTimeout(resolve,time))
}
sleep(1000).then(()=>{
  console.log(1)
})

//Generator
function* sleepGenerator(time) {
  yield new Promise(function(resolve,reject){
    setTimeout(resolve,time);
  })
}
sleepGenerator(1000).next().value.then(()=>{console.log(1)})

//async
function sleep(time) {
  return new Promise(resolve => setTimeout(resolve,time))
}
async function output() {
  let out = await sleep(1000);
  console.log(1);
  return out;
}
output();

//ES5
function sleep(callback,time) {
  if(typeof callback === "function")
    setTimeout(callback,time)
}

function output(){
  console.log(1);
}
sleep(output,1000);

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 42 題

解析：

sort 函數(shù)，可以接收一個(gè)函數(shù)，返回值是比較兩個(gè)數(shù)的相對(duì)順序的值

默認(rèn)沒(méi)有函數(shù) 是按照 UTF-16 排序的，對(duì)于字母數(shù)字 你可以利用 ASCII 進(jìn)行記憶

 [3, 15, 8, 29, 102, 22].sort();

// [102, 15, 22, 29, 3, 8]

帶函數(shù)的比較

 [3, 15, 8, 29, 102, 22].sort((a,b) => {return a - b});

返回值大于0 即a-b > 0 ， a 和 b 交換位置

返回值小于0 即a-b < 0 ， a 和 b 位置不變

返回值等于0 即a-b = 0 ， a 和 b 位置不變

對(duì)于函數(shù)體返回 b-a 可以類比上面的返回值進(jìn)行交換位置

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 43 題

解析：

開(kāi)始加密通信之前，客戶端和服務(wù)器首先必須建立連接和交換參數(shù)，這個(gè)過(guò)程叫做握手（handshake）。

假定客戶端叫做愛(ài)麗絲，服務(wù)器叫做鮑勃，整個(gè)握手過(guò)程可以用下圖說(shuō)明。

握手階段分成五步。

第一步，愛(ài)麗絲給出協(xié)議版本號(hào)、一個(gè)客戶端生成的隨機(jī)數(shù)（Client random），以及客戶端支持的加密方法。
第二步，鮑勃確認(rèn)雙方使用的加密方法，并給出數(shù)字證書(shū)、以及一個(gè)服務(wù)器生成的隨機(jī)數(shù)（Server random）。
第三步，愛(ài)麗絲確認(rèn)數(shù)字證書(shū)有效，然后生成一個(gè)新的隨機(jī)數(shù)（Premaster secret），并使用數(shù)字證書(shū)中的公鑰，加密這個(gè)隨機(jī)數(shù)，發(fā)給鮑勃。
第四步，鮑勃使用自己的私鑰，獲取愛(ài)麗絲發(fā)來(lái)的隨機(jī)數(shù)（即Premaster secret）。
第五步，愛(ài)麗絲和鮑勃根據(jù)約定的加密方法，使用前面的三個(gè)隨機(jī)數(shù)，生成"對(duì)話密鑰"（session key），用來(lái)加密接下來(lái)的整個(gè)對(duì)話過(guò)程。

參考：

圖解SSL/TLS協(xié)議
SSL/TLS協(xié)議運(yùn)行機(jī)制的概述

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 44 題

解析：

1、首先什么是HTTP協(xié)議");

2、加密通信： 為了安全性，雙方可以使用對(duì)稱加密的方式key進(jìn)行信息交流，但是這種方式對(duì)稱加密秘鑰也會(huì)被攔截，也不夠安全，進(jìn)而還是存在被中間人攻擊風(fēng)險(xiǎn)； 于是人們又想出來(lái)另外一種方式，使用非對(duì)稱加密的方式；使用公鑰/私鑰加解密；通信方A發(fā)起通信并攜帶自己的公鑰，接收方B通過(guò)公鑰來(lái)加密對(duì)稱秘鑰；然后發(fā)送給發(fā)起方A；A通過(guò)私鑰解密；雙發(fā)接下來(lái)通過(guò)對(duì)稱秘鑰來(lái)進(jìn)行加密通信；但是這種方式還是會(huì)存在一種安全性；中間人雖然不知道發(fā)起方A的私鑰，但是可以做到偷天換日，將攔截發(fā)起方的公鑰key;并將自己生成的一對(duì)公/私鑰的公鑰發(fā)送給B；接收方B并不知道公鑰已經(jīng)被偷偷換過(guò)；按照之前的流程，B通過(guò)公鑰加密自己生成的對(duì)稱加密秘鑰key2;發(fā)送給A； 這次通信再次被中間人攔截，盡管后面的通信，兩者還是用key2通信，但是中間人已經(jīng)掌握了Key2;可以進(jìn)行輕松的加解密；還是存在被中間人攻擊風(fēng)險(xiǎn)；

3、解決困境：權(quán)威的證書(shū)頒發(fā)機(jī)構(gòu)CA來(lái)解決；

3.1制作證書(shū)：作為服務(wù)端的A，首先把自己的公鑰key1發(fā)給證書(shū)頒發(fā)機(jī)構(gòu)，向證書(shū)頒發(fā)機(jī)構(gòu)進(jìn)行申請(qǐng)證書(shū)；證書(shū)頒發(fā)機(jī)構(gòu)有一套自己的公私鑰，CA通過(guò)自己的私鑰來(lái)加密key1,并且通過(guò)服務(wù)端網(wǎng)址等信息生成一個(gè)證書(shū)簽名，證書(shū)簽名同樣使用機(jī)構(gòu)的私鑰進(jìn)行加密；制作完成后，機(jī)構(gòu)將證書(shū)發(fā)給A；

3.2校驗(yàn)證書(shū)真?zhèn)危寒?dāng)B向服務(wù)端A發(fā)起請(qǐng)求通信的時(shí)候，A不再直接返回自己的公鑰，而是返回一個(gè)證書(shū)； 說(shuō)明：各大瀏覽器和操作系統(tǒng)已經(jīng)維護(hù)了所有的權(quán)威證書(shū)機(jī)構(gòu)的名稱和公鑰。B只需要知道是哪個(gè)權(quán)威機(jī)構(gòu)發(fā)的證書(shū)，使用對(duì)應(yīng)的機(jī)構(gòu)公鑰，就可以解密出證書(shū)簽名；接下來(lái)，B使用同樣的規(guī)則，生成自己的證書(shū)簽名，如果兩個(gè)簽名是一致的，說(shuō)明證書(shū)是有效的； 簽名驗(yàn)證成功后，B就可以再次利用機(jī)構(gòu)的公鑰，解密出A的公鑰key1;接下來(lái)的操作，就是和之前一樣的流程了；

3.3：中間人是否會(huì)攔截發(fā)送假證書(shū)到B呢？ 因?yàn)樽C書(shū)的簽名是由服務(wù)器端網(wǎng)址等信息生成的，并且通過(guò)第三方機(jī)構(gòu)的私鑰加密中間人無(wú)法篡改； 所以最關(guān)鍵的問(wèn)題是證書(shū)簽名的真?zhèn)危?/p>

4、https主要的思想是在http基礎(chǔ)上增加了ssl安全層，即以上認(rèn)證過(guò)程。

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 45 題

var obj = {
    "2": 3,
    "3": 4,
    "length": 2,
    "splice": Array.prototype.splice,
    "push": Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)

解析：

涉及知識(shí)點(diǎn)：

類數(shù)組（ArrayLike）：

一組數(shù)據(jù)，由數(shù)組來(lái)存，但是如果要對(duì)這組數(shù)據(jù)進(jìn)行擴(kuò)展，會(huì)影響到數(shù)組原型，ArrayLike的出現(xiàn)則提供了一個(gè)中間數(shù)據(jù)橋梁，ArrayLike有數(shù)組的特性， 但是對(duì)ArrayLike的擴(kuò)展并不會(huì)影響到原生的數(shù)組。

push方法：

push 方法有意具有通用性。該方法和 call() 或 apply() 一起使用時(shí)，可應(yīng)用在類似數(shù)組的對(duì)象上。push 方法根據(jù) length 屬性來(lái)決定從哪里開(kāi)始插入給定的值。如果 length 不能被轉(zhuǎn)成一個(gè)數(shù)值，則插入的元素索引為 0，包括 length 不存在時(shí)。當(dāng) length 不存在時(shí)，將會(huì)創(chuàng)建它。 唯一的原生類數(shù)組（array-like）對(duì)象是 Strings，盡管如此，它們并不適用該方法，因?yàn)樽址遣豢筛淖兊摹?/p>

對(duì)象轉(zhuǎn)數(shù)組的方式：

Array.from()、splice()、concat()等。

題分析： 這個(gè)obj中定義了兩個(gè)key值，分別為splice和push分別對(duì)應(yīng)數(shù)組原型中的splice和push方法，因此這個(gè)obj可以調(diào)用數(shù)組中的push和splice方法，調(diào)用對(duì)象的push方法：push(1)，因?yàn)榇藭r(shí)obj中定義length為2，所以從數(shù)組中的第二項(xiàng)開(kāi)始插入，也就是數(shù)組的第三項(xiàng)（下表為2的那一項(xiàng)），因?yàn)閿?shù)組是從第0項(xiàng)開(kāi)始的，這時(shí)已經(jīng)定義了下標(biāo)為2和3這兩項(xiàng)，所以它會(huì)替換第三項(xiàng)也就是下標(biāo)為2的值，第一次執(zhí)行push完，此時(shí)key為2的屬性值為1，同理：第二次執(zhí)行push方法，key為3的屬性值為2。此時(shí)的輸出結(jié)果就是：

Object(4) [empty × 2, 1, 2, splice: ?, push: ?]---->
[
  2: 1,
  3: 2,
  length: 4,
  push: ? push(),
  splice: ? splice()
]

因?yàn)橹皇嵌x了2和3兩項(xiàng)，沒(méi)有定義0和1這兩項(xiàng)，所以前面會(huì)是empty。 如果講這道題改為：

var obj = {
    "2": 3,
    "3": 4,
    "length": 0,
    "splice": Array.prototype.splice,
    "push": Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)

此時(shí)的打印結(jié)果就是：

Object(2) [1, 2, 2: 3, 3: 4, splice: ?, push: ?]---->
[
  0: 1,
  1: 2,
  2: 3,
  3: 4,
  length: 2,
  push: ? push(),
  splice: ? splice()
]

原理：此時(shí)length長(zhǎng)度設(shè)置為0，push方法從第0項(xiàng)開(kāi)始插入，所以填充了第0項(xiàng)的empty 至于為什么對(duì)象添加了splice屬性后并沒(méi)有調(diào)用就會(huì)變成類數(shù)組對(duì)象這個(gè)問(wèn)題，這是控制臺(tái)中 DevTools 猜測(cè)類數(shù)組的一個(gè)方式： github.com/ChromeDevTo…

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 46 題

解析：

當(dāng)在嚴(yán)格模式中使用 Vuex 時(shí)，在屬于 Vuex 的 state 上使用 v-model 會(huì)比較棘手：

<input v-model="obj.message">

假設(shè)這里的 obj 是在計(jì)算屬性中返回的一個(gè)屬于 Vuex store 的對(duì)象，在用戶輸入時(shí)，v-model 會(huì)試圖直接修改 obj.message。在嚴(yán)格模式中，由于這個(gè)修改不是在 mutation 函數(shù)中執(zhí)行的, 這里會(huì)拋出一個(gè)錯(cuò)誤。

用“Vuex 的思維”去解決這個(gè)問(wèn)題的方法是：給 中綁定 value，然后偵聽(tīng) input 或者 change 事件，在事件回調(diào)中調(diào)用 action:

<input :value="message" @input="updateMessage">

// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit("updateMessage", e.target.value)
  }
}

下面是 mutation 函數(shù)：

// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

雙向綁定的計(jì)算屬性

必須承認(rèn)，這樣做比簡(jiǎn)單地使用“v-model + 局部狀態(tài)”要啰嗦得多，并且也損失了一些 v-model 中很有用的特性。另一個(gè)方法是使用帶有 setter 的雙向綁定計(jì)算屬性：

<input v-model="message">

// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit("updateMessage", value)
    }
  }
}

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 47 題

解析：

Function.prototype.apply和Function.prototype.call 的作用是一樣的，區(qū)別在于傳入?yún)?shù)的不同；

第一個(gè)參數(shù)都是，指定函數(shù)體內(nèi)this的指向；

第二個(gè)參數(shù)開(kāi)始不同，apply是傳入帶下標(biāo)的集合，數(shù)組或者類數(shù)組，apply把它傳給函數(shù)作為參數(shù)，call從第二個(gè)開(kāi)始傳入的參數(shù)是不固定的，都會(huì)傳給函數(shù)作為參數(shù)。

call比apply的性能要好，平?？梢远嘤胏all, call傳入?yún)?shù)的格式正是內(nèi)部所需要的格式，參考 call和apply的性能對(duì)比

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 48 題

解析：

能夠完成整個(gè) HTTP 請(qǐng)求+響應(yīng)（盡管不需要響應(yīng)內(nèi)容）

觸發(fā) GET 請(qǐng)求之后不需要獲取和處理數(shù)據(jù)、服務(wù)器也不需要發(fā)送數(shù)據(jù)

跨域友好

執(zhí)行過(guò)程無(wú)阻塞

相比 XMLHttpRequest 對(duì)象發(fā)送 GET 請(qǐng)求，性能上更好

GIF的最低合法體積最?。ㄗ钚〉腂MP文件需要74個(gè)字節(jié)，PNG需要67個(gè)字節(jié)，而合法的GIF，只需要43個(gè)字節(jié)）

不會(huì)阻塞頁(yè)面加載，影響用戶的體驗(yàn)，只要new Image對(duì)象就好了；（排除JS/CSS文件資源方式上報(bào)）

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 49 題

例： 5 + 3 - 2，結(jié)果為 6

解析：

Number.prototype.add = function(n) {
  return this.valueOf() + n;
};
Number.prototype.minus = function(n) {
  return this.valueOf() - n;
};

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 50 題

為什么在 Vue3.0 采用了 Proxy，拋棄了 Object.defineProperty？

解析：

Object.defineProperty本身有一定的監(jiān)控到數(shù)組下標(biāo)變化的能力： Object.defineProperty本身是可以監(jiān)控到數(shù)組下標(biāo)的變化的，但是在 Vue 中，從性能/體驗(yàn)的性價(jià)比考慮，尤大大就棄用了這個(gè)特性。具體我們可以參考 《記一次思否問(wèn)答的問(wèn)題思考：Vue為什么不能檢測(cè)數(shù)組變動(dòng)》這篇文章，文章底部配圖中有尤大大的嚴(yán)肅回復(fù)截圖； 下方的討論區(qū)也很值得大家下去看一看，有對(duì)于 for / forEach / for .. in .. 幾個(gè)循環(huán)方式的討論。

關(guān)于 Vue 3.0 的其他信息我們可以參考 尤大大發(fā)布的 Vue 3.0 新特性預(yù)覽PPT

直接通過(guò)數(shù)組的下標(biāo)給數(shù)組設(shè)置值，不能實(shí)時(shí)響應(yīng)。 為了解決這個(gè)問(wèn)題，經(jīng)過(guò)vue內(nèi)部處理后可以使用以下幾種方法來(lái)監(jiān)聽(tīng)數(shù)組

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

由于只針對(duì)了以上幾種方法進(jìn)行了hack處理,所以其他數(shù)組的屬性也是檢測(cè)不到的，還是具有一定的局限性。

Object.defineProperty只能劫持對(duì)象的屬性,因此我們需要對(duì)每個(gè)對(duì)象的每個(gè)屬性進(jìn)行遍歷。Vue 2.x里，是通過(guò) 遞歸 + 遍歷 data 對(duì)象來(lái)實(shí)現(xiàn)對(duì)數(shù)據(jù)的監(jiān)控的，如果屬性值也是對(duì)象那么需要深度遍歷,顯然如果能劫持一個(gè)完整的對(duì)象是才是更好的選擇。

而要取代它的Proxy有以下兩個(gè)優(yōu)點(diǎn);

可以劫持整個(gè)對(duì)象，并返回一個(gè)新對(duì)象
有13種劫持操作

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 51 題

解析：

div.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}
/* 或者 */
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}
/* 或 */
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

div.parent {
    display: grid;
}
div.child {
    justify-self: center;
    align-self: center;
}

div.parent {
    font-size: 0;
    text-align: center;
    &::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}
div.parent{
  display: inline-block;
  vertical-align: middle;
}

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 52 題

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

console.log(a.x) 	
console.log(b.x)

解析：

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

a.x 	// --> undefined
b.x 	// --> {n: 2}

答案已經(jīng)寫(xiě)上面了，這道題的關(guān)鍵在于

1、優(yōu)先級(jí)。.的優(yōu)先級(jí)高于=，所以先執(zhí)行a.x，堆內(nèi)存中的{n: 1}就會(huì)變成{n: 1, x: undefined}，改變之后相應(yīng)的b.x也變化了，因?yàn)橹赶虻氖峭粋€(gè)對(duì)象。

2、賦值操作是從右到左，所以先執(zhí)行a = {n: 2}，a的引用就被改變了，然后這個(gè)返回值又賦值給了a.x，需要注意的是這時(shí)候a.x是第一步中的{n: 1, x: undefined}那個(gè)對(duì)象，其實(shí)就是b.x，相當(dāng)于b.x = {n: 2}

未完待續(xù)，點(diǎn)擊查看更多細(xì)節(jié)：第 53 題

進(jìn)階系列文章匯總?cè)缦?，覺(jué)得不錯(cuò)點(diǎn)個(gè) Star，歡迎 加群 互相學(xué)習(xí)。

github.com/yygmind/blo…

我是木易楊，公眾號(hào)「高級(jí)前端進(jìn)階」作者，跟著我每周重點(diǎn)攻克一個(gè)前端面試重難點(diǎn)。接下來(lái)讓我?guī)阕哌M(jìn)高級(jí)前端的世界，在進(jìn)階的路上，共勉！