導(dǎo)讀

這兩天的GitHub Trending repositories被一個(gè)名叫 javascript-questions的項(xiàng)目霸榜了，項(xiàng)目中記錄了一些JavaScript題目。

我大概從頭到尾看了一遍，都是一些基礎(chǔ)的題目，我大概花了半個(gè)小時(shí)（有些題很簡(jiǎn)單，可以一掃而過(guò)）把這些題做完了，雖然題目很簡(jiǎn)單，但是每道題都對(duì)應(yīng)一個(gè)知識(shí)點(diǎn)，如果這個(gè)知識(shí)點(diǎn)你沒(méi)有接觸過(guò)，那肯定會(huì)做錯(cuò)，如果你接觸過(guò)這些知識(shí)點(diǎn)，那么這些題對(duì)你來(lái)說(shuō)就很容易。

建議大家也花半個(gè)小時(shí)來(lái)做一做，以便查漏補(bǔ)缺。

為方便大家能夠更快的做題，而不把時(shí)間浪費(fèi)在翻譯上，我又花了幾個(gè)小時(shí)把它們翻譯成了中文，當(dāng)然已經(jīng)獲得了作者授權(quán)。

文中有些點(diǎn)作者解釋的不太完整，為了更好的理解，我在文中添加了一些個(gè)人解釋。

倉(cāng)庫(kù)地址：https://github.com/lydiahallie/javascript-questions

JavaScript 進(jìn)階問(wèn)題列表

我在我的Instagram上發(fā)布了每日J(rèn)avaScript選擇題，我也會(huì)在這里發(fā)布！

從基礎(chǔ)到高級(jí)：測(cè)試您對(duì)JavaScript的了解程度，刷新您的知識(shí)，或?yàn)槟木幋a面試做好準(zhǔn)備！💪 🚀我每周用新問(wèn)題更新這個(gè)項(xiàng)目。

答案位于問(wèn)題下方的折疊部分，只需單擊它們即可展開(kāi)。 祝你好運(yùn)❤️

1. 下面代碼的輸出是什么？

function sayHi() {
 console.log(name);
 console.log(age);
 var name = "Lydia";
 let age = 21;
}

sayHi();

A: Lydia 和 undefined

B: Lydia 和 ReferenceError

C: ReferenceError 和 21

D: undefined 和 ReferenceError

答案: D

在函數(shù)中，我們首先使用var關(guān)鍵字聲明了name變量。 這意味著變量在創(chuàng)建階段會(huì)被提升（JavaScript會(huì)在創(chuàng)建變量創(chuàng)建階段為其分配內(nèi)存空間），默認(rèn)值為undefined，直到我們實(shí)際執(zhí)行到使用該變量的行。 我們還沒(méi)有為name變量賦值，所以它仍然保持undefined的值。

使用let關(guān)鍵字（和const）聲明的變量也會(huì)存在變量提升，但與var不同，初始化沒(méi)有被提升。 在我們聲明（初始化）它們之前，它們是不可訪問(wèn)的。 這被稱為“暫時(shí)死區(qū)”。 當(dāng)我們?cè)诼暶髯兞恐皣L試訪問(wèn)變量時(shí)，JavaScript會(huì)拋出一個(gè)ReferenceError。

譯者注：

關(guān)于let的是否存在變量提升，我們何以用下面的例子來(lái)驗(yàn)證：

let name = 'ConardLi'
{
 console.log(name) // Uncaught ReferenceError: name is not defined
 let name = 'code秘密花園'
}

let變量如果不存在變量提升，console.log(name)就會(huì)輸出ConardLi，結(jié)果卻拋出了ReferenceError，那么這很好的說(shuō)明了，let也存在變量提升，但是它存在一個(gè)“暫時(shí)死區(qū)”，在變量未初始化或賦值前不允許訪問(wèn)。

變量的賦值可以分為三個(gè)階段：

• 創(chuàng)建變量，在內(nèi)存中開(kāi)辟空間
• 初始化變量，將變量初始化為undefined
• 真正賦值

關(guān)于let、var和function：

• let 的「創(chuàng)建」過(guò)程被提升了，但是初始化沒(méi)有提升。
• var 的「創(chuàng)建」和「初始化」都被提升了。
• function 的「創(chuàng)建」「初始化」和「賦值」都被提升了。

2. 下面代碼的輸出是什么?

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 and 0 1 2

B: 0 1 2 and 3 3 3

C: 3 3 3 and 0 1 2

答案: C

由于JavaScript中的事件執(zhí)行機(jī)制，setTimeout函數(shù)真正被執(zhí)行時(shí)，循環(huán)已經(jīng)走完。 由于第一個(gè)循環(huán)中的變量i是使用var關(guān)鍵字聲明的，因此該值是全局的。 在循環(huán)期間，我們每次使用一元運(yùn)算符++都會(huì)將i的值增加1。 因此在第一個(gè)例子中，當(dāng)調(diào)用setTimeout函數(shù)時(shí)，i已經(jīng)被賦值為3。

在第二個(gè)循環(huán)中，使用let關(guān)鍵字聲明變量i：使用let（和const）關(guān)鍵字聲明的變量是具有塊作用域的（塊是{}之間的任何東西）。 在每次迭代期間，i將被創(chuàng)建為一個(gè)新值，并且每個(gè)值都會(huì)存在于循環(huán)內(nèi)的塊級(jí)作用域。

3. 下面代碼的輸出是什么?

const shape = {
 radius: 10,
 diameter() {
 return this.radius * 2;
 },
 perimeter: () => 2 * Math.PI * this.radius
};

shape.diameter();
shape.perimeter();

A: 20 and 62.83185307179586

B: 20 and NaN

C: 20 and 63

D: NaN and 63

答案: B

請(qǐng)注意，diameter是普通函數(shù)，而perimeter是箭頭函數(shù)。

對(duì)于箭頭函數(shù)，this關(guān)鍵字指向是它所在上下文（定義時(shí)的位置）的環(huán)境，與普通函數(shù)不同！ 這意味著當(dāng)我們調(diào)用perimeter時(shí)，它不是指向shape對(duì)象，而是指其定義時(shí)的環(huán)境（window）。沒(méi)有值radius屬性，返回undefined。

4. 下面代碼的輸出是什么?

+true;
!"Lydia";

A: 1 and false

B: false and NaN

C: false and false

答案: A

一元加號(hào)會(huì)嘗試將boolean類型轉(zhuǎn)換為數(shù)字類型。 true被轉(zhuǎn)換為1，false被轉(zhuǎn)換為0。

字符串'Lydia'是一個(gè)真值。 我們實(shí)際上要問(wèn)的是“這個(gè)真值是假的嗎？”。 這會(huì)返回false。

5. 哪個(gè)選項(xiàng)是不正確的?

const bird = {
 size: "small"
};

const mouse = {
 name: "Mickey",
 small: true
};

A: mouse.bird.size

B: mouse[bird.size]

C: mouse[bird["size"]]

D: All of them are valid

答案: A

在JavaScript中，所有對(duì)象鍵都是字符串（除了Symbol）。盡管有時(shí)我們可能不會(huì)給定字符串類型，但它們總是被轉(zhuǎn)換為字符串。

JavaScript解釋語(yǔ)句。當(dāng)我們使用方括號(hào)表示法時(shí)，它會(huì)看到第一個(gè)左括號(hào)[，然后繼續(xù)，直到找到右括號(hào)]。只有在那個(gè)時(shí)候，它才會(huì)對(duì)這個(gè)語(yǔ)句求值。

mouse [bird.size]：首先它會(huì)對(duì)bird.size求值，得到small。 mouse [“small”]返回true。

但是，使用點(diǎn)表示法，這不會(huì)發(fā)生。 mouse沒(méi)有名為bird的鍵，這意味著mouse.bird是undefined。 然后，我們使用點(diǎn)符號(hào)來(lái)詢問(wèn)size：mouse.bird.size。 由于mouse.bird是undefined，我們實(shí)際上是在詢問(wèn)undefined.size。 這是無(wú)效的，并將拋出Cannot read property "size" of undefined。

6. 下面代碼的輸出是什么?

let c = { greeting: "Hey!" };
let d;

d = c;
c.greeting = "Hello";
console.log(d.greeting);

A: Hello

B: undefined

C: ReferenceError

D: TypeError

答案: A

在JavaScript中，當(dāng)設(shè)置它們彼此相等時(shí)，所有對(duì)象都通過(guò)引用進(jìn)行交互。

首先，變量c為對(duì)象保存一個(gè)值。 之后，我們將d指定為c與對(duì)象相同的引用。

更改一個(gè)對(duì)象時(shí)，可以更改所有對(duì)象。

7. 下面代碼的輸出是什么?

let a = 3;
let b = new Number(3);
let c = 3;

console.log(a == b);
console.log(a === b);
console.log(b === c);

A: true false true

B: false false true

C: true false false

D: false true true

答案: C

new Number（）是一個(gè)內(nèi)置的函數(shù)構(gòu)造函數(shù)。 雖然它看起來(lái)像一個(gè)數(shù)字，但它并不是一個(gè)真正的數(shù)字：它有一堆額外的功能，是一個(gè)對(duì)象。

當(dāng)我們使用==運(yùn)算符時(shí)，它只檢查它是否具有相同的值。 他們都有3的值，所以它返回true。

譯者注：==會(huì)引發(fā)隱式類型轉(zhuǎn)換，右側(cè)的對(duì)象類型會(huì)自動(dòng)拆箱為Number類型。

然而，當(dāng)我們使用===操作符時(shí)，類型和值都需要相等，new Number()不是一個(gè)數(shù)字，是一個(gè)對(duì)象類型。兩者都返回 false。

8. 下面代碼的輸出是什么?

class Chameleon {
 static colorChange(newColor) {
 this.newColor = newColor;
 }

 constructor({ newColor = "green" } = {}) {
 this.newColor = newColor;
 }
}

const freddie = new Chameleon({ newColor: "purple" });
freddie.colorChange("orange");

A: orange

B: purple

C: green

D: TypeError

答案: D

colorChange方法是靜態(tài)的。 靜態(tài)方法僅在創(chuàng)建它們的構(gòu)造函數(shù)中存在，并且不能傳遞給任何子級(jí)。 由于freddie是一個(gè)子級(jí)對(duì)象，函數(shù)不會(huì)傳遞，所以在freddie實(shí)例上不存在freddie方法：拋出TypeError。

9. 下面代碼的輸出是什么?

let greeting;
greetign = {}; // Typo!
console.log(greetign);

A: {}

B: ReferenceError: greetign is not defined

C: undefined

答案: A

控制臺(tái)會(huì)輸出空對(duì)象，因?yàn)槲覀儎倓傇谌謱?duì)象上創(chuàng)建了一個(gè)空對(duì)象！ 當(dāng)我們錯(cuò)誤地將greeting輸入為greetign時(shí)，JS解釋器實(shí)際上在瀏覽器中將其視為global.greetign = {}（或window.greetign = {}）。

為了避免這種情況，我們可以使用“use strict”。 這可以確保在將變量賦值之前必須聲明變量。

10. 當(dāng)我們這樣做時(shí)會(huì)發(fā)生什么?

function bark() {
 console.log("Woof!");
}

bark.animal = "dog";

A: Nothing, this is totally fine!

B: SyntaxError. You cannot add properties to a function this way.

C: undefined

D: ReferenceError

答案: A

這在JavaScript中是可能的，因?yàn)楹瘮?shù)也是對(duì)象！（原始類型之外的所有東西都是對(duì)象）

函數(shù)是一種特殊類型的對(duì)象。您自己編寫(xiě)的代碼并不是實(shí)際的函數(shù)。 該函數(shù)是具有屬性的對(duì)象，此屬性是可調(diào)用的。

11. 下面代碼的輸出是什么?

function Person(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;
}

const member = new Person("Lydia", "Hallie");
Person.getFullName = () => this.firstName + this.lastName;

console.log(member.getFullName());

A: TypeError

B: SyntaxError

C: Lydia Hallie

D: undefined undefined

答案: A

您不能像使用常規(guī)對(duì)象那樣向構(gòu)造函數(shù)添加屬性。 如果要一次向所有對(duì)象添加功能，則必須使用原型。 所以在這種情況下應(yīng)該這樣寫(xiě)：

Person.prototype.getFullName = function () {
 return `${this.firstName} ${this.lastName}`;
}

這樣會(huì)使member.getFullName()是可用的，為什么樣做是對(duì)的？ 假設(shè)我們將此方法添加到構(gòu)造函數(shù)本身。 也許不是每個(gè)Person實(shí)例都需要這種方法。這會(huì)浪費(fèi)大量?jī)?nèi)存空間，因?yàn)樗鼈內(nèi)匀痪哂性搶傩?，這占用了每個(gè)實(shí)例的內(nèi)存空間。 相反，如果我們只將它添加到原型中，我們只需將它放在內(nèi)存中的一個(gè)位置，但它們都可以訪問(wèn)它！

12. 下面代碼的輸出是什么?

function Person(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;
}

const lydia = new Person("Lydia", "Hallie");
const sarah = Person("Sarah", "Smith");

console.log(lydia);
console.log(sarah);

A: Person {firstName: "Lydia", lastName: "Hallie"} and undefined

B: Person {firstName: "Lydia", lastName: "Hallie"} and Person {firstName: "Sarah", lastName: "Smith"}

C: Person {firstName: "Lydia", lastName: "Hallie"} and {}

D:Person {firstName: "Lydia", lastName: "Hallie"} and ReferenceError

答案: A

對(duì)于sarah，我們沒(méi)有使用new關(guān)鍵字。 使用new時(shí)，它指的是我們創(chuàng)建的新空對(duì)象。 但是，如果你不添加new它指的是全局對(duì)象！

我們指定了this.firstName等于'Sarah和this.lastName等于Smith。 我們實(shí)際做的是定義global.firstName ='Sarah'和global.lastName ='Smith。 sarah本身的返回值是undefined。

12. 事件傳播的三個(gè)階段是什么？?

A: 目標(biāo) > 捕獲 > 冒泡

B: 冒泡 > 目標(biāo) > 捕獲

C: 目標(biāo) > 冒泡 > 捕獲

D: 捕獲 > 目標(biāo) > 冒泡

答案: D

在捕獲階段，事件通過(guò)父元素向下傳遞到目標(biāo)元素。 然后它到達(dá)目標(biāo)元素，冒泡開(kāi)始。 

13. 所有對(duì)象都有原型.

A: 對(duì)

B: 錯(cuò)誤

答案: B

除基礎(chǔ)對(duì)象外，所有對(duì)象都有原型。 基礎(chǔ)對(duì)象可以訪問(wèn)某些方法和屬性，例如.toString。 這就是您可以使用內(nèi)置JavaScript方法的原因！ 所有這些方法都可以在原型上找到。 雖然JavaScript無(wú)法直接在您的對(duì)象上找到它，但它會(huì)沿著原型鏈向下尋找并在那里找到它，這使您可以訪問(wèn)它。

譯者注：基礎(chǔ)對(duì)象指原型鏈終點(diǎn)的對(duì)象。基礎(chǔ)對(duì)象的原型是null。

14. 下面代碼的輸出是什么?

function sum(a, b) {
 return a + b;
}

sum(1, "2");

A: NaN

B: TypeError

C: "12"

D: 3

答案: C

JavaScript是一種動(dòng)態(tài)類型語(yǔ)言：我們沒(méi)有指定某些變量的類型。 在您不知情的情況下，值可以自動(dòng)轉(zhuǎn)換為另一種類型，稱為隱式類型轉(zhuǎn)換。 強(qiáng)制從一種類型轉(zhuǎn)換為另一種類型。

在此示例中，JavaScript將數(shù)字1轉(zhuǎn)換為字符串，以使函數(shù)有意義并返回值。 在讓數(shù)字類型（1）和字符串類型（'2'）相加時(shí)，該數(shù)字被視為字符串。 我們可以連接像“Hello”+“World”這樣的字符串，所以這里發(fā)生的是“1”+“2”返回“12”。

15. 下面代碼的輸出是什么?

let number = 0;
console.log(number++);
console.log(++number);
console.log(number);

A: 1 1 2

B: 1 2 2

C: 0 2 2

D: 0 1 2

答案: C

后綴一元運(yùn)算符++：

1. 返回值（返回0）
2. 增加值（數(shù)字現(xiàn)在是1）

前綴一元運(yùn)算符++：

1. 增加值（數(shù)字現(xiàn)在是2）
2. 返回值（返回2）

所以返回0 2 2。

16. 下面代碼的輸出是什么?

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á)式的值！

17. 下面代碼的輸出是什么?

function checkAge(data) {
 if (data === { age: 18 }) {
 console.log("You are an adult!");
 } else if (data == { age: 18 }) {
 console.log("You are still an adult.");
 } else {
 console.log(`Hmm.. You don't have an age I guess`);
 }
}

checkAge({ age: 18 });

A: You are an adult!

B: You are still an adult.

C: Hmm.. You don't have an age I guess

答案: C

在比較相等性，原始類型通過(guò)它們的值進(jìn)行比較，而對(duì)象通過(guò)它們的引用進(jìn)行比較。JavaScript檢查對(duì)象是否具有對(duì)內(nèi)存中相同位置的引用。

我們作為參數(shù)傳遞的對(duì)象和我們用于檢查相等性的對(duì)象在內(nèi)存中位于不同位置，所以它們的引用是不同的。

這就是為什么{ age: 18 } === { age: 18 }和 { age: 18 } == { age: 18 } 返回 false的原因。

18. 下面代碼的輸出是什么?

function getAge(...args) {
 console.log(typeof args);
}

getAge(21);

A: "number"

B: "array"

C: "object"

D: "NaN"

答案: C

擴(kuò)展運(yùn)算符（... args）返回一個(gè)帶參數(shù)的數(shù)組。 數(shù)組是一個(gè)對(duì)象，因此typeof args返回object。

20. 下面代碼的輸出是什么?

function getAge() {
 "use strict";
 age = 21;
 console.log(age);
}

getAge();

A: 21

B: undefined

C: ReferenceError

D: TypeError

答案: C

使用“use strict”，可以確保不會(huì)意外地聲明全局變量。 我們從未聲明變量age，因?yàn)槲覀兪褂胉use strict'，它會(huì)引發(fā)一個(gè)ReferenceError。 如果我們不使用“use strict”，它就會(huì)起作用，因?yàn)閷傩詀ge會(huì)被添加到全局對(duì)象中。

21. 下面代碼的輸出是什么?

const sum = eval("10*10+5");

A: 105

B: "105"

C: TypeError

D: "10*10+5"

答案: A

eval會(huì)為字符串傳遞的代碼求值。 如果它是一個(gè)表達(dá)式，就像在這種情況下一樣，它會(huì)計(jì)算表達(dá)式。 表達(dá)式為10 * 10 + 5計(jì)算得到105。

22. cool_secret可以訪問(wèn)多長(zhǎng)時(shí)間?

sessionStorage.setItem("cool_secret", 123);

A：永遠(yuǎn)，數(shù)據(jù)不會(huì)丟失。

B：用戶關(guān)閉選項(xiàng)卡時(shí)。

C：當(dāng)用戶關(guān)閉整個(gè)瀏覽器時(shí)，不僅是選項(xiàng)卡。

D：用戶關(guān)閉計(jì)算機(jī)時(shí)。

答案: B

關(guān)閉選項(xiàng)卡后，將刪除存儲(chǔ)在sessionStorage中的數(shù)據(jù)。

如果使用localStorage，數(shù)據(jù)將永遠(yuǎn)存在，除非例如調(diào)用localStorage.clear()。

23. 下面代碼的輸出是什么?

var num = 8;
var num = 10;

console.log(num);

A: 8

B: 10

C: SyntaxError

D: ReferenceError

答案: B

使用var關(guān)鍵字，您可以用相同的名稱聲明多個(gè)變量。然后變量將保存最新的值。

您不能使用let或const來(lái)實(shí)現(xiàn)這一點(diǎn)，因?yàn)樗鼈兪菈K作用域的。

24. 下面代碼的輸出是什么?

const obj = { 1: "a", 2: "b", 3: "c" };
const set = new Set([1, 2, 3, 4, 5]);

obj.hasOwnProperty("1");
obj.hasOwnProperty(1);
set.has("1");
set.has(1);

A: false true false true

B: false true true true

C: true true false true

D: true true true true

答案: C

所有對(duì)象鍵（不包括Symbols）都會(huì)被存儲(chǔ)為字符串，即使你沒(méi)有給定字符串類型的鍵。 這就是為什么obj.hasOwnProperty（'1'）也返回true。

上面的說(shuō)法不適用于Set。 在我們的Set中沒(méi)有“1”：set.has（'1'）返回false。 它有數(shù)字類型1，set.has（1）返回true。

25. 下面代碼的輸出是什么?

const obj = { a: "one", b: "two", a: "three" };
console.log(obj);

A: { a: "one", b: "two" }

B: { b: "two", a: "three" }

C: { a: "three", b: "two" }

D: SyntaxError

答案: C

如果對(duì)象有兩個(gè)具有相同名稱的鍵，則將替前面的鍵。它仍將處于第一個(gè)位置，但具有最后指定的值。

26. JavaScript全局執(zhí)行上下文為你創(chuàng)建了兩個(gè)東西:全局對(duì)象和this關(guān)鍵字.

A: 對(duì)

B: 錯(cuò)誤

C: 視情況而定

答案: A

基本執(zhí)行上下文是全局執(zhí)行上下文:它是代碼中隨處可訪問(wèn)的內(nèi)容。

27. 下面代碼的輸出是什么?

for (let i = 1; i < 5; i++) {
 if (i === 3) continue;
 console.log(i);
}

A: 1 2

B: 1 2 3

C: 1 2 4

D: 1 3 4

答案: C

如果某個(gè)條件返回true，則continue語(yǔ)句跳過(guò)迭代。

28. 下面代碼的輸出是什么?

String.prototype.giveLydiaPizza = () => {
 return "Just give Lydia pizza already!";
};

const name = "Lydia";

name.giveLydiaPizza();

A: "Just give Lydia pizza already!"

B: TypeError: not a function

C: SyntaxError

D: undefined

答案: A

String是一個(gè)內(nèi)置的構(gòu)造函數(shù)，我們可以為它添加屬性。 我剛給它的原型添加了一個(gè)方法。 原始類型的字符串自動(dòng)轉(zhuǎn)換為字符串對(duì)象，由字符串原型函數(shù)生成。 因此，所有字符串（字符串對(duì)象）都可以訪問(wèn)該方法！

譯者注：

當(dāng)使用基本類型的字符串調(diào)用giveLydiaPizza時(shí)，實(shí)際上發(fā)生了下面的過(guò)程：

創(chuàng)建一個(gè)String的包裝類型實(shí)例

在實(shí)例上調(diào)用substring方法

銷毀實(shí)例

29. 下面代碼的輸出是什么?

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ì)象設(shè)置為對(duì)象a的鍵，其值為123。

但是，當(dāng)對(duì)象自動(dòng)轉(zhuǎn)換為字符串化時(shí)，它變成了[Object object]。 所以我們?cè)谶@里說(shuō)的是a["Object object"] = 123。 然后，我們可以嘗試再次做同樣的事情。 c對(duì)象同樣會(huì)發(fā)生隱式類型轉(zhuǎn)換。那么，a["Object object"] = 456。

然后，我們打印a[b]，它實(shí)際上是a["Object object"]。 我們將其設(shè)置為456，因此返回456。

30. 下面代碼的輸出是什么?

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"));
const baz = () => console.log("Third");

bar();
foo();
baz();

A: First Second Third

B: First Third Second

C: Second First Third

D: Second Third First

答案: B

我們有一個(gè)setTimeout函數(shù)并首先調(diào)用它。 然而卻最后打印了它。

這是因?yàn)樵跒g覽器中，我們不只有運(yùn)行時(shí)引擎，我們還有一個(gè)叫做WebAPI的東西。WebAPI為我們提供了setTimeout函數(shù)，例如DOM。

將callback推送到WebAPI后，setTimeout函數(shù)本身（但不是回調(diào)！）從堆棧中彈出。

現(xiàn)在，調(diào)用foo，并打印First。

foo從堆棧彈出，baz被調(diào)用，并打印Third。

WebAPI不能只是在準(zhǔn)備就緒時(shí)將內(nèi)容添加到堆棧中。 相反，它將回調(diào)函數(shù)推送到一個(gè)稱為任務(wù)隊(duì)列的東西。

這是事件循環(huán)開(kāi)始工作的地方。 事件循環(huán)查看堆棧和任務(wù)隊(duì)列。 如果堆棧為空，則會(huì)占用隊(duì)列中的第一個(gè)內(nèi)容并將其推送到堆棧中。

bar被調(diào)用，Second被打印，它從棧中彈出。

31. 單擊按鈕時(shí)event.target是什么?

<div onclick="console.log('first div')">
 <div onclick="console.log('second div')">
 <button onclick="console.log('button')">
  Click!
 </button>
 </div>
</div>

A: div外部

B: div內(nèi)部

C: button

D: 所有嵌套元素的數(shù)組.

答案: C

導(dǎo)致事件的最深嵌套元素是事件的目標(biāo)。 你可以通過(guò)event.stopPropagation停止冒泡

32. 單擊下面的html片段打印的內(nèi)容是什么?

<div onclick="console.log('div')">
 <p onclick="console.log('p')">
 Click here!

</div>

A: p div

B: div p

C: p

D: div

答案: A

如果我們單擊p，我們會(huì)看到兩個(gè)日志：p和div。在事件傳播期間，有三個(gè)階段：捕獲，目標(biāo)和冒泡。 默認(rèn)情況下，事件處理程序在冒泡階段執(zhí)行（除非您將useCapture設(shè)置為true）。 它從最深的嵌套元素向外延伸。

33. 下面代碼的輸出是什么?

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方法會(huì)立即執(zhí)行！

.bind方法會(huì)返回函數(shù)的拷貝值，但帶有綁定的上下文！ 它不會(huì)立即執(zhí)行。

34. 下面代碼的輸出是什么?

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

typeof sayHi();

A: "object"

B: "number"

C: "function"

D: "undefined"

答案: B

sayHi函數(shù)返回立即調(diào)用的函數(shù)（IIFE）的返回值。 該函數(shù)返回0，類型為數(shù)字。

僅供參考：只有7種內(nèi)置類型：null，undefined，boolean，number，string，object和symbol。 function不是一個(gè)類型，因?yàn)楹瘮?shù)是對(duì)象，它的類型是object。

35. 下面這些值哪些是假值?

0;
new Number(0);
("");
(" ");
new Boolean(false);
undefined;

A: 0, '', undefined

B: 0, new Number(0), '', new Boolean(false), undefined

C: 0, '', new Boolean(false), undefined

D: 所有都是假值

答案: A

• JavaScript中只有6個(gè)假值：
• undefined
• null
• NaN
• 0
• '' (empty string)
• false

函數(shù)構(gòu)造函數(shù)，如new Number和new Boolean都是真值。

36. 下面代碼的輸出是什么?

console.log(typeof typeof 1);

A: "number"

B: "string"

C: "object"

D: "undefined"

答案: B

• typeof 1 返回 "number".
• typeof "number" 返回 "string"

37. 下面代碼的輸出是什么?

const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);

A: [1, 2, 3, 7 x null, 11]

B: [1, 2, 3, 11]

C: [1, 2, 3, 7 x empty, 11]

D: SyntaxError

答案: C

When you set a value to an element in an array that exceeds the length of the array, JavaScript creates something called "empty slots". These actually have the value of undefined, but you will see something like:

當(dāng)你為數(shù)組中的元素設(shè)置一個(gè)超過(guò)數(shù)組長(zhǎng)度的值時(shí)，JavaScript會(huì)創(chuàng)建一個(gè)名為“空插槽”的東西。 這些位置的值實(shí)際上是undefined，但你會(huì)看到類似的東西：

[1, 2, 3, 7 x empty, 11]

這取決于你運(yùn)行它的位置（每個(gè)瀏覽器有可能不同）。

38. 下面代碼的輸出是什么?

(() => {
 let x, y;
 try {
  throw new Error();
 } catch (x) {
  (x = 1), (y = 2);
  console.log(x);
 }
 console.log(x);
 console.log(y);
})();

A: 1 undefined 2

B: undefined undefined undefined

C: 1 1 2

D: 1 undefined undefined

答案: A

catch塊接收參數(shù)x。當(dāng)我們傳遞參數(shù)時(shí)，這與變量的x不同。這個(gè)變量x是屬于catch作用域的。

之后，我們將這個(gè)塊級(jí)作用域的變量設(shè)置為1，并設(shè)置變量y的值。 現(xiàn)在，我們打印塊級(jí)作用域的變量x，它等于1。

在catch塊之外，x仍然是undefined，而y是2。 當(dāng)我們想在catch塊之外的console.log(x)時(shí)，它返回undefined，而y返回2。

39. JavaScript中的所有內(nèi)容都是…

A：原始或?qū)ο?/p>

B：函數(shù)或?qū)ο?/p>

C：技巧問(wèn)題！只有對(duì)象

D：數(shù)字或?qū)ο?/p>

答案: A

JavaScript只有原始類型和對(duì)象。

原始類型是boolean，null，undefined，bigint，number，string和symbol。

40. 下面代碼的輸出是什么?

[[0, 1], [2, 3]].reduce(
 (acc, cur) => {
  return acc.concat(cur);
 },
 [1, 2]
);

A: [0, 1, 2, 3, 1, 2]

B: [6, 1, 2]

C: [1, 2, 0, 1, 2, 3]

D: [1, 2, 6]

答案: C

[1,2]是我們的初始值。 這是我們開(kāi)始執(zhí)行reduce函數(shù)的初始值，以及第一個(gè)acc的值。 在第一輪中，acc是[1,2]，cur是[0,1]。 我們將它們連接起來(lái)，結(jié)果是[1,2,0,1]。

然后，acc的值為[1,2,0,1]，cur的值為[2,3]。 我們將它們連接起來(lái)，得到[1,2,0,1,2,3]。

41. 下面代碼的輸出是什么?

!!null;
!!"";
!!1;

A: false true false

B: false false true

C: false true true

D: true true false

答案: B

null是假值。 !null返回true。 !true返回false。

""是假值。 !""返回true。 !true返回false。

1是真值。 !1返回false。 !false返回true。

42. `setInterval`方法的返回值什么?

setInterval(() => console.log("Hi"), 1000);

A：一個(gè)唯一的id

B：指定的毫秒數(shù)

C：傳遞的函數(shù)

D：undefined

答案: A

它返回一個(gè)唯一的id。 此id可用于使用clearInterval()函數(shù)清除該定時(shí)器。

43. What does this return?

[..."Lydia"];

A: ["L", "y", "d", "i", "a"]

B: ["Lydia"]

C: [[], "Lydia"]

D: [["L", "y", "d", "i", "a"]]

答案: A

字符串是可迭代的。 擴(kuò)展運(yùn)算符將迭代的每個(gè)字符映射到一個(gè)元素。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論