摘要：在第四次調(diào)用時(shí)，回調(diào)函數(shù)依然沒(méi)有返回值。累加器再次為，當(dāng)前值為。

經(jīng)常寫(xiě)業(yè)務(wù)就容易忽視對(duì)基礎(chǔ)知識(shí)的補(bǔ)充和加強(qiáng)，但在面試中，基礎(chǔ)知識(shí)點(diǎn)是非常重要的考核部分。本文要分享的是，一位開(kāi)發(fā)者每天都會(huì)發(fā)布的 JavaScript 問(wèn)題。有的容易，有的會(huì)有難度，對(duì)基礎(chǔ)知識(shí)的查缺補(bǔ)漏非常有幫助，也是你進(jìn)階路上必然要掌握的知識(shí)。

以下挑選了10個(gè)問(wèn)題，緊跟其后的就是對(duì)這道題的詳細(xì)解答。如果你想看所有的題目，最后有鏈接直達(dá)。

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
}

A: 0 1 2 和 0 1 2

B: 0 1 2 和 3 3 3

C: 3 3 3 和 0 1 2

答案: C

由于 JavaScript 的事件循環(huán)，setTimeout 回調(diào)會(huì)在遍歷結(jié)束后才執(zhí)行。因?yàn)樵诘谝粋€(gè)遍歷中遍歷 i 是通過(guò) var 關(guān)鍵字聲明的，所以這個(gè)值是全局作用域下的。在遍歷過(guò)程中，我們通過(guò)一元操作符 ++ 來(lái)每次遞增 i 的值。當(dāng) setTimeout 回調(diào)執(zhí)行的時(shí)候，i 的值等于 3。

在第二個(gè)遍歷中，遍歷 i 是通過(guò) let 關(guān)鍵字聲明的：通過(guò) let 和 const 關(guān)鍵字聲明的變量是擁有塊級(jí)作用域（指的是任何在 {} 中的內(nèi)容）。在每次的遍歷過(guò)程中，i 都有一個(gè)新值，并且每個(gè)值都在循環(huán)內(nèi)的作用域中。

function getPersonInfo(one, two, three) {
  console.log(one)
  console.log(two)
  console.log(three)
}

const person = "Lydia"
const age = 21

getPersonInfo`${person} is ${age} years old`

A: "Lydia" 21 ["", " is ", " years old"]

B: ["", " is ", " years old"] "Lydia" 21

C: "Lydia" ["", " is ", " years old"] 21

答案: B

如果使用標(biāo)記模板字面量，第一個(gè)參數(shù)的值總是包含字符串的數(shù)組。其余的參數(shù)獲取的是傳遞的表達(dá)式的值！

function sayHi() {
  return (() => 0)()
}

typeof sayHi()

A: "object"

B: "number"

C: "function"

D: "undefined"

答案: B

sayHi 方法返回的是立即執(zhí)行函數(shù)(IIFE)的返回值.此立即執(zhí)行函數(shù)的返回值是 0， 類(lèi)型是 number

參考：只有7種內(nèi)置類(lèi)型：null，undefined，boolean，number，string，object 和 symbol。 function 不是一種類(lèi)型，函數(shù)是對(duì)象，它的類(lèi)型是object。

const a = {}
const b = { key: "b" }
const c = { key: "c" }

a[b] = 123
a[c] = 456

console.log(a[b])

A: 123

B: 456

C: undefined

D: ReferenceError

答案: B

對(duì)象的鍵被自動(dòng)轉(zhuǎn)換為字符串。我們?cè)噲D將一個(gè)對(duì)象 b 設(shè)置為對(duì)象 a 的鍵，且相應(yīng)的值為 123。

然而，當(dāng)字符串化一個(gè)對(duì)象時(shí)，它會(huì)變成 "[object Object]"。因此這里說(shuō)的是，a["[object Object]"] = 123。然后，我們?cè)僖淮巫隽送瑯拥氖虑椋?b>c 是另外一個(gè)對(duì)象，這里也有隱式字符串化，于是，a["[object Object]"] = 456。

然后，我們打印 a[b]，也就是 a["[object Object]"]。之前剛設(shè)置為 456，因此返回的是 456。

const person = { name: "Lydia" }

function sayHi(age) {
  console.log(`${this.name} is ${age}`)
}

sayHi.call(person, 21)
sayHi.bind(person, 21)

A: undefined is 21 Lydia is 21

B: function function

C: Lydia is 21 Lydia is 21

D: Lydia is 21 function

答案: D

使用這兩種方法，我們都可以傳遞我們希望 this 關(guān)鍵字引用的對(duì)象。但是，.call 是立即執(zhí)行的。

.bind 返回函數(shù)的副本，但帶有綁定上下文！它不是立即執(zhí)行的。

[1, 2, 3, 4].reduce((x, y) => console.log(x, y));

A: 1 2 and 3 3 and 6 4

B: 1 2 and 2 3 and 3 4

C: 1 undefined and 2 undefined and 3 undefined and 4 undefined

D: 1 2 and undefined 3 and undefined 4

答案: D

reducer 函數(shù)接收4個(gè)參數(shù):

Accumulator (acc) (累計(jì)器)

Current Value (cur) (當(dāng)前值)

Current Index (idx) (當(dāng)前索引)

Source Array (src) (源數(shù)組)

reducer 函數(shù)的返回值將會(huì)分配給累計(jì)器，該返回值在數(shù)組的每個(gè)迭代中被記住，并最后成為最終的單個(gè)結(jié)果值。

reducer 函數(shù)還有一個(gè)可選參數(shù)initialValue, 該參數(shù)將作為第一次調(diào)用回調(diào)函數(shù)時(shí)的第一個(gè)參數(shù)的值。如果沒(méi)有提供initialValue，則將使用數(shù)組中的第一個(gè)元素。

在上述例子，reduce方法接收的第一個(gè)參數(shù)(Accumulator)是x, 第二個(gè)參數(shù)(Current Value)是y。

在第一次調(diào)用時(shí)，累加器x為1，當(dāng)前值“y”為2，打印出累加器和當(dāng)前值：1和2。

例子中我們的回調(diào)函數(shù)沒(méi)有返回任何值，只是打印累加器的值和當(dāng)前值。如果函數(shù)沒(méi)有返回值，則默認(rèn)返回undefined。 在下一次調(diào)用時(shí)，累加器為undefined，當(dāng)前值為“3”, 因此undefined和3被打印出。

在第四次調(diào)用時(shí)，回調(diào)函數(shù)依然沒(méi)有返回值。 累加器再次為 undefined ，當(dāng)前值為“4”。 undefined和4被打印出。

const firstPromise = new Promise((res, rej) => {
  setTimeout(res, 500, "one");
});

const secondPromise = new Promise((res, rej) => {
  setTimeout(res, 100, "two");
});

Promise.race([firstPromise, secondPromise]).then(res => console.log(res));

A: "one"

B: "two"

C: "two" "one"

D: "one" "two"

答案: B

當(dāng)我們向Promise.race方法中傳入多個(gè)Promise時(shí)，會(huì)進(jìn)行 優(yōu)先 解析（注：只要有一個(gè)成功或失敗，就立馬結(jié)束）。在這個(gè)例子中，我們用setTimeout給firstPromise和secondPromise分別設(shè)定了500ms和100ms的定時(shí)器。這意味著secondPromise會(huì)首先解析出字符串two。那么此時(shí)res參數(shù)即為two，是為輸出結(jié)果。

function greeting() {
  throw "Hello world!";
}

function sayHi() {
  try {
    const data = greeting();
    console.log("It worked!", data);
  } catch (e) {
    console.log("Oh no an error!", e);
  }
}

sayHi();

A: "It worked! Hello world!"

B: "Oh no an error: undefined

C: SyntaxError: can only throw Error objects

D: "Oh no an error: Hello world!

答案: D

通過(guò)throw語(yǔ)句，我么可以創(chuàng)建自定義錯(cuò)誤。 而通過(guò)它，我們可以拋出異常。異常可以是一個(gè)字符串, 一個(gè) 數(shù)字, 一個(gè) 布爾類(lèi)型 或者是一個(gè) 對(duì)象。在本例中，我們的異常是字符串"Hello world".

通過(guò) catch語(yǔ)句，我們可以設(shè)定當(dāng)try語(yǔ)句塊中拋出異常后應(yīng)該做什么處理。在本例中拋出的異常是字符串"Hello world". e就是這個(gè)字符串，因此被輸出。最終結(jié)果就是"Oh an error: Hello world".

// index.js
console.log("running index.js");
import { sum } from "./sum.js";
console.log(sum(1, 2));

// sum.js
console.log("running sum.js");
export const sum = (a, b) => a + b;

A: running index.js, running sum.js, 3

B: running sum.js, running index.js, 3

C: running sum.js, 3, running index.js

D: running index.js, undefined, running sum.js

答案: B

import命令是編譯階段執(zhí)行的，在代碼運(yùn)行之前。因此這意味著被導(dǎo)入的模塊會(huì)先運(yùn)行，而導(dǎo)入模塊的文件會(huì)后執(zhí)行。

這是CommonJS中require（）和import之間的區(qū)別。使用require()，您可以在運(yùn)行代碼時(shí)根據(jù)需要加載依賴項(xiàng)。 如果我們使用require而不是import，running index.js，running sum.js，3會(huì)被依次打印。

const settings = {
  username: "lydiahallie",
  level: 19,
  health: 90
};

const data = JSON.stringify(settings, ["level", "health"]);
console.log(data);

A: "{"level":19, "health":90}"

B: "{"username": "lydiahallie"}"

C: "["level", "health"]"

D: "{"username": "lydiahallie", "level":19, "health":90}"

答案: A

JSON.stringify的第二個(gè)參數(shù)是 _替代者(replacer)_. 替代者(replacer)可以是個(gè)函數(shù)或數(shù)組，用以控制哪些值如何被轉(zhuǎn)換為字符串。

如果替代者(replacer)是個(gè) 數(shù)組 ，那么就只有包含在數(shù)組中的屬性將會(huì)被轉(zhuǎn)化為字符串。在本例中，只有名為"level" 和 "health" 的屬性被包括進(jìn)來(lái)， "username"則被排除在外。 data 就等于 "{"level":19, "health":90}".

而如果替代者(replacer)是個(gè) _函數(shù)_，這個(gè)函數(shù)將被對(duì)象的每個(gè)屬性都調(diào)用一遍。
函數(shù)返回的值會(huì)成為這個(gè)屬性的值，最終體現(xiàn)在轉(zhuǎn)化后的JSON字符串中（譯者注：Chrome下，經(jīng)過(guò)實(shí)驗(yàn)，如果所有屬性均返回同一個(gè)值的時(shí)候有異常，會(huì)直接將返回值作為結(jié)果輸出而不會(huì)輸出JSON字符串），而如果返回值為undefined，則該屬性會(huì)被排除在外。

題目來(lái)源：https://github.com/lydiahallie/javascript-questions/blob/master/README-zh_CN.md

如果對(duì)你有幫助，請(qǐng)關(guān)注【前端技能解鎖】：