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

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

以下挑選了10個問題，緊跟其后的就是對這道題的詳細(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)會在遍歷結(jié)束后才執(zhí)行。因為在第一個遍歷中遍歷 i 是通過 var 關(guān)鍵字聲明的，所以這個值是全局作用域下的。在遍歷過程中，我們通過一元操作符 ++ 來每次遞增 i 的值。當(dāng) setTimeout 回調(diào)執(zhí)行的時候，i 的值等于 3。

在第二個遍歷中，遍歷 i 是通過 let 關(guān)鍵字聲明的：通過 let 和 const 關(guān)鍵字聲明的變量是擁有塊級作用域（指的是任何在 {} 中的內(nèi)容）。在每次的遍歷過程中，i 都有一個新值，并且每個值都在循環(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)記模板字面量，第一個參數(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， 類型是 number

參考：只有7種內(nèi)置類型：null，undefined，boolean，number，string，object 和 symbol。 function 不是一種類型，函數(shù)是對象，它的類型是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

對象的鍵被自動轉(zhuǎn)換為字符串。我們試圖將一個對象 b 設(shè)置為對象 a 的鍵，且相應(yīng)的值為 123。

然而，當(dāng)字符串化一個對象時，它會變成 "[object Object]"。因此這里說的是，a["[object Object]"] = 123。然后，我們再一次做了同樣的事情，c 是另外一個對象，這里也有隱式字符串化，于是，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)鍵字引用的對象。但是，.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個參數(shù):

Accumulator (acc) (累計器)

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

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

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

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

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

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

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

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

在第四次調(diào)用時，回調(diào)函數(shù)依然沒有返回值。 累加器再次為 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方法中傳入多個Promise時，會進(jìn)行 優(yōu)先 解析（注：只要有一個成功或失敗，就立馬結(jié)束）。在這個例子中，我們用setTimeout給firstPromise和secondPromise分別設(shè)定了500ms和100ms的定時器。這意味著secondPromise會首先解析出字符串two。那么此時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

通過throw語句，我么可以創(chuàng)建自定義錯誤。 而通過它，我們可以拋出異常。異?？梢允且粋€字符串, 一個 數(shù)字, 一個 布爾類型 或者是一個 對象。在本例中，我們的異常是字符串"Hello world".

通過 catch語句，我們可以設(shè)定當(dāng)try語句塊中拋出異常后應(yīng)該做什么處理。在本例中拋出的異常是字符串"Hello world". e就是這個字符串，因此被輸出。最終結(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í)行的，在代碼運行之前。因此這意味著被導(dǎo)入的模塊會先運行，而導(dǎo)入模塊的文件會后執(zhí)行。

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

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的第二個參數(shù)是 _替代者(replacer)_. 替代者(replacer)可以是個函數(shù)或數(shù)組，用以控制哪些值如何被轉(zhuǎn)換為字符串。

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

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

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

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