摘要：答案在問題的下方。這個行為被稱之為暫時性死區。這個行為是無效的，并且會拋出一個錯誤類似。為什么這么做有益的假設我們將這個方法添加到構造函數本身里。而數組是對象，因此返回。輸出是什么答案是內置的構造函數，我們可以向它添加屬性。

作者：Lydia Hallie
翻譯：瘋狂的技術宅
原文：https://github.com/lydiahalli...

我在我的 Instagram 上每天都會發布 JavaScript 的選擇題，并且同時也會在這個倉庫中發布。

從基礎到進階，測試你有多了解 JavaScript，刷新你的知識，或者幫助你的 coding 面試！
我每周都會在這個倉庫下更新新的問題。

答案在問題的下方。祝你好運

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

在函數內部，我們首先通過 var 關鍵字聲明了 name 變量。這意味著變量被提升了（內存空間在創建階段就被設置好了），直到程序運行到定義變量位置之前默認值都是 undefined。因為當我們打印 name 變量時還沒有執行到定義變量的位置，因此變量的值保持為 undefined。

通過 let 和 const 關鍵字聲明的變量也會提升，但是和 var 不同，它們不會被初始化。在我們聲明（初始化）之前是不能訪問它們的。這個行為被稱之為暫時性死區。當我們試圖在聲明之前訪問它們時，JavaScript 將會拋出一個 ReferenceError 錯誤。

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

B: 0 1 2 和 3 3 3

C: 3 3 3 和 0 1 2

答案: C

由于 JavaScript 的事件循環，setTimeout 回調會在遍歷結束后才執行。因為在第一個遍歷中遍歷 i 是通過 var 關鍵字聲明的，所以這個值是全局作用域下的。在遍歷過程中，我們通過一元操作符 ++ 來每次遞增 i 的值。當 setTimeout 回調執行的時候，i 的值等于 3。

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

3. 輸出是什么？

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

shape.diameter()
shape.perimeter()

A: 20 和 62.83185307179586

B: 20 和 NaN

C: 20 和 63

D: NaN 和 63

答案: B

注意 diameter 的值是一個常規函數，但是 perimeter 的值是一個箭頭函數。

對于箭頭函數，this 關鍵字指向的是它當前周圍作用域（簡單來說是包含箭頭函數的常規函數，如果沒有常規函數的話就是全局對象），這個行為和常規函數不同。這意味著當我們調用 perimeter 時，this 不是指向 shape 對象，而是它的周圍作用域（在例子中是 window）。

在 window 中沒有 radius 這個屬性，因此返回 undefined。

4. 輸出是什么？

+true;
!"Lydia";

A: 1 和 false

B: false 和 NaN

C: false 和 false

答案: A

一元操作符加號嘗試將 bool 轉為 number。true 轉換為 number 的話為 1，false 為 0。

字符串 "Lydia" 是一個真值，真值取反那么就返回 false。

5. 哪一個是無效的？

const bird = {
  size: "small"
}

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

A: mouse.bird.size

B: mouse[bird.size]

C: mouse[bird["size"]]

D: 全部有效

答案: A

在 JavaScript 中，所有對象的 keys 都是字符串（除非對象是 Symbol）。盡管我們可能不會定義它們為字符串，但它們在底層總會被轉換為字符串。

當我們使用括號語法時（[]），JavaScript 會解釋（或者 unboxes）語句。它首先看到第一個開始括號 [ 并繼續前進直到找到結束括號 ]。只有這樣，它才會計算語句的值。

mouse[bird.size]：首先計算 bird.size，這會得到 small。mouse["small"] 返回 true。

然后使用點語法的話，上面這一切都不會發生。mouse 沒有 bird 這個 key，這也就意味著 mouse.bird 是 undefined。然后當我們使用點語法 mouse.bird.size 時，因為 mouse.bird 是 undefined，這也就變成了 undefined.size。這個行為是無效的，并且會拋出一個錯誤類似 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 中，當設置兩個對象彼此相等時，它們會通過引用進行交互。

首先，變量 c 的值是一個對象。接下來，我們給 d 分配了一個和 c 對象相同的引用。

因此當我們改變其中一個對象時，其實是改變了所有的對象。

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() 是一個內建的函數構造器。雖然它看著像是一個 number，但它實際上并不是一個真實的 number：它有一堆額外的功能并且它是一個對象。

當我們使用 == 操作符時，它只會檢查兩者是否擁有相同的值。因為它們的值都是 3，因此返回 true。

然后，當我們使用 === 操作符時，兩者的值以及類型都應該是相同的。new Number() 是一個對象而不是 number，因此返回 false。

8. 輸出是什么？

class Chameleon {
  static colorChange(newColor) {
    this.newColor = newColor
    return this.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 是一個靜態方法。靜態方法被設計為只能被創建它們的構造器使用（也就是 Chameleon），并且不能傳遞給實例。因為 freddie 是一個實例，靜態方法不能被實例使用，因此拋出了 TypeError 錯誤。

9. 輸出是什么？

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

A: {}

B: ReferenceError: greetign is not defined

C: undefined

答案: A

代碼打印出了一個對象，這是因為我們在全局對象上創建了一個空對象！當我們將 greeting 寫錯成 greetign 時，JS 解釋器實際在上瀏覽器中將它視為 global.greetign = {} （或者 window.greetign = {}）。

為了避免這個為題，我們可以使用 "use strict"。這能確保當你聲明變量時必須賦值。

10. 當我們這么做時，會發生什么？

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

bark.animal = "dog"

A: 正常運行!

B: SyntaxError. 你不能通過這種方式給函數增加屬性。

C: undefined

D: ReferenceError

答案: A

這在 JavaScript 中是可以的，因為函數是對象！（除了基本類型之外其他都是對象）

函數是一個特殊的對象。你寫的這個代碼其實不是一個實際的函數。函數是一個擁有屬性的對象，并且屬性也可被調用。

11. 輸出是什么？

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

const member = new Person("Lydia", "Hallie");
Person.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
}

console.log(member.getFullName());

A: TypeError

B: SyntaxError

C: Lydia Hallie

D: undefined undefined

答案: A

你不能像常規對象那樣，給構造函數添加屬性。如果你想一次性給所有實例添加特性，你應該使用原型。因此本例中，使用如下方式：

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

這才會使 member.getFullName() 起作用。為什么這么做有益的？假設我們將這個方法添加到構造函數本身里。也許不是每個 Person 實例都需要這個方法。這將浪費大量內存空間，因為它們仍然具有該屬性，這將占用每個實例的內存空間。相反，如果我們只將它添加到原型中，那么它只存在于內存中的一個位置，但是所有實例都可以訪問它！

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"} 和 undefined

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

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

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

答案: A

對于 sarah，我們沒有使用 new 關鍵字。當使用 new 時，this 引用我們創建的空對象。當未使用 new 時，this 引用的是全局對象（global object）。

我們說 this.firstName 等于 "Sarah"，并且 this.lastName 等于 "Smith"。實際上我們做的是，定義了 global.firstName = "Sarah" 和 global.lastName = "Smith"。而 sarah 本身是 undefined。

13. 事件傳播的三個階段是什么？

A: Target > Capturing > Bubbling

B: Bubbling > Target > Capturing

C: Target > Bubbling > Capturing

D: Capturing > Target > Bubbling

答案: D

在捕獲（capturing）階段中，事件從祖先元素向下傳播到目標元素。當事件達到目標（target）元素后，冒泡（bubbling）才開始。

14. 所有對象都有原型。

A: true

B: false

答案: B

除了基本對象（base object），所有對象都有原型?；緦ο罂梢栽L問一些方法和屬性，比如 .toString。這就是為什么你可以使用內置的 JavaScript 方法！所有這些方法在原型上都是可用的。雖然 JavaScript 不能直接在對象上找到這些方法，但 JavaScript 會沿著原型鏈找到它們，以便于你使用。

15. 輸出是什么？

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

sum(1, "2")

A: NaN

B: TypeError

C: "12"

D: 3

答案: C

JavaScript 是一種動態類型語言：我們不指定某些變量的類型。值可以在你不知道的情況下自動轉換成另一種類型，這種類型稱為隱式類型轉換（implicit type coercion）。Coercion 是指將一種類型轉換為另一種類型。

在本例中，JavaScript 將數字 1 轉換為字符串，以便函數有意義并返回一個值。在數字類型（1）和字符串類型（"2"）相加時，該數字被視為字符串。我們可以連接字符串，比如 "Hello" + "World"，這里發生的是 "1" + "2"，它返回 "12"。

16. 輸出是什么？

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

一元后自增運算符 ++：

返回值（返回 0）

值自增（number 現在是 1）

一元前自增運算符 ++：

值自增（number 現在是 2）

返回值（返回 2）

結果是 0 2 2.

17. 輸出是什么？

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

如果使用標記模板字面量，第一個參數的值總是包含字符串的數組。其余的參數獲取的是傳遞的表達式的值！

18. 輸出是什么？

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

在測試相等性時，基本類型通過它們的值（value）進行比較，而對象通過它們的引用（reference）進行比較。JavaScript 檢查對象是否具有對內存中相同位置的引用。

題目中我們正在比較的兩個對象不是同一個引用：作為參數傳遞的對象引用的內存位置，與用于判斷相等的對象所引用的內存位置并不同。

這也是 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 都返回 false 的原因。

19. 輸出是什么？

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

getAge(21)

A: "number"

B: "array"

C: "object"

D: "NaN"

答案: C

擴展運算符（...args）會返回實參組成的數組。而數組是對象，因此 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"，你可以確保不會意外地聲明全局變量。我們從來沒有聲明變量 age，因為我們使用 "use strict"，它將拋出一個引用錯誤。如果我們不使用 "use strict"，它就會工作，因為屬性 age 會被添加到全局對象中了。

21. 輸出是什么？

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

A: 105

B: "105"

C: TypeError

D: "10*10+5"

答案: A

代碼以字符串形式傳遞進來，eval 對其求值。如果它是一個表達式，就像本例中那樣，它對表達式求值。表達式是 10 * 10 + 5。這將返回數字 105。

22. cool_secret 可訪問多長時間？

sessionStorage.setItem("cool_secret", 123)

A: 永遠，數據不會丟失。

B: 當用戶關掉標簽頁時。

C: 當用戶關掉整個瀏覽器，而不只是關掉標簽頁。

D: 當用戶關閉電腦時。

答案: B

關閉 tab 標簽頁 后，sessionStorage 存儲的數據才會刪除。

如果使用 localStorage，那么數據將永遠在那里，除非調用了 localStorage.clear()。

23. 輸出是什么？

var num = 8
var num = 10

console.log(num)

A: 8

B: 10

C: SyntaxError

D: ReferenceError

答案: B

使用 var 關鍵字，你可以用相同的名稱聲明多個變量。然后變量將保存最新的值。

你不能使用 let 或 const 來實現這一點，因為它們是塊作用域的。

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

所有對象的鍵（不包括 Symbol）在底層都是字符串，即使你自己沒有將其作為字符串輸入。這就是為什么 obj.hasOwnProperty("1") 也返回 true。

對于集合，它不是這樣工作的。在我們的集合中沒有 "1"：set.has("1") 返回 false。它有數字類型為 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

如果你有兩個名稱相同的鍵，則鍵會被替換掉。它仍然位于第一個鍵出現的位置，但是值是最后出現那個鍵的值。

26. JavaScript 全局執行上下文為你做了兩件事：全局對象和 this 關鍵字。

A: true

B: false

C: it depends

答案: A

基本執行上下文是全局執行上下文：它是代碼中隨處可訪問的內容。

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

如果某個條件返回 true，則 continue 語句跳過本次迭代。

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 是內置的構造函數，我們可以向它添加屬性。我只是在它的原型中添加了一個方法。基本類型字符串被自動轉換為字符串對象，由字符串原型函數生成。因此，所有 string(string 對象)都可以訪問該方法！

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

對象的鍵被自動轉換為字符串。我們試圖將一個對象 b 設置為對象 a 的鍵，且相應的值為 123。

然而，當字符串化一個對象時，它會變成 "[object Object]"。因此這里說的是，a["[object Object]"] = 123。然后，我們再一次做了同樣的事情，c 是另外一個對象，這里也有隱式字符串化，于是，a["[object Object]"] = 456。

然后，我們打印 a[b]，也就是 a["[object Object]"]。之前剛設置為 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

我們有一個 setTimeout 函數，并首先調用它。然而，它是最后打印日志的。

這是因為在瀏覽器中，我們不僅有運行時引擎，還有一個叫做 WebAPI 的東西。WebAPI 提供了 setTimeout 函數，也包含其他的，例如 DOM。

將 callback 推送到 WebAPI 后，setTimeout 函數本身(但不是回調！)將從棧中彈出。

現在，foo 被調用，打印 "First"。

foo 從棧中彈出，baz 被調用. 打印 "Third"。

WebAPI 不能隨時向棧內添加內容。相反，它將回調函數推到名為 queue 的地方。

這就是事件循環開始工作的地方。一個事件循環查看棧和任務隊列。如果棧是空的，它接受隊列上的第一個元素并將其推入棧。

bar 被調用，打印 "Second"，然后它被棧彈出。

31. 當點擊按鈕時，event.target是什么？

  

    
      Click!
    
  

A: Outer div

B: Inner div

C: button

D: 一個包含所有嵌套元素的數組。

答案: C

導致事件的最深嵌套的元素是事件的 target。你可以通過 event.stopPropagation 來停止冒泡。

32. 當您單擊該段落時，日志輸出是什么？

  

    Click here!
  

A: p div

B: div p

C: p

D: div

答案: A

如果我們點擊 p，我們會看到兩個日志：p 和 div。在事件傳播期間，有三個階段：捕獲、目標和冒泡。默認情況下，事件處理程序在冒泡階段執行（除非將 useCapture 設置為 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 關鍵字引用的對象。但是，.call 是立即執行的。

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

34. 輸出是什么？

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

typeof sayHi()

A: "object"

B: "number"

C: "function"

D: "undefined"

答案: B

sayHi 方法返回的是立即執行函數(IIFE)的返回值.此立即執行函數的返回值是 0， 類型是 number

參考：只有7種內置類型：null，undefined，boolean，number，string，object 和 symbol。 function 不是一種類型，函數是對象，它的類型是object。

35. 下面哪些值是 falsy?

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: 全都是 of them are falsy

答案: A

只有 6 種 falsy 值:

undefined

null

NaN

0

"" (empty string)

false

Function 構造函數, 比如 new Number 和 new Boolean，是 truthy。

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

當你為數組設置超過數組長度的值的時候， JavaScript 會創建名為 "empty slots" 的東西。它們的值實際上是 undefined。你會看到以下場景：

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

這取決于你的運行環境（每個瀏覽器，以及 node 環境，都有可能不同）

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 代碼塊接收參數 x。當我們傳遞參數時，這與之前定義的變量 x 不同 。這個 x 是屬于 catch 塊級作用域的。

然后，我們將塊級作用域中的變量賦值為 1，同時也設置了變量 y 的值。現在，我們打印塊級作用域中的變量 x，值為 1。

catch 塊之外的變量 x 的值仍為 undefined， y 的值為 2。當我們在 catch 塊之外執行 console.log(x) 時，返回 undefined，y 返回 2。

39. JavaScript 中的一切都是？

A: 基本類型與對象

B: 函數與對象

C: 只有對象

D: 數字與對象

- 答案: A

JavaScript 只有基本類型和對象。

基本類型包括 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]是初始值。初始值將會作為首次調用時第一個參數 acc 的值。在第一次執行時， acc 的值是 [1, 2]， cur 的值是 [0, 1]。合并它們，結果為 [1, 2, 0, 1]。
第二次執行， acc 的值是 [1, 2, 0, 1]， cur 的值是 [2, 3]。合并它們，最終結果為 [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 是 falsy。 !null 的值是 true。 !true 的值是 false。

"" 是 falsy。 !"" 的值是 true。 !true 的值是 false。

1 是 truthy。 !1 的值是 false。 !false 的值是 true。

42. setInterval 方法的返回值是什么？

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

A: 一個唯一的id

B: 該方法指定的毫秒數

C: 傳遞的函數

D: undefined

答案: A

setInterval 返回一個唯一的 id。此 id 可被用于 clearInterval 函數來取消定時。

43. 輸出是什么？

[..."Lydia"]

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

B: ["Lydia"]

C: [[], "Lydia"]

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

答案: A

string 類型是可迭代的。擴展運算符將迭代的每個字符映射成一個元素。

44. 輸出是什么?

function* generator(i) {
  yield i;
  yield i * 2;
}

const gen = generator(10);

console.log(gen.next().value);
console.log(gen.next().value);

A: [0, 10], [10, 20]

B: 20, 20

C: 10, 20

D: 0, 10 和 10, 20

答案: C

一般的函數在執行之后是不能中途停下的。但是，生成器函數卻可以中途“停下”，之后可以再從停下的地方繼續。當生成器遇到yield關鍵字的時候，會生成yield后面的值。注意，生成器在這種情況下不 返回 (_return_ )值，而是 生成 (_yield_)值。

首先，我們用10作為參數i來初始化生成器函數。然后使用next()方法一步步執行生成器。第一次執行生成器的時候，i的值為10，遇到第一個yield關鍵字，它要生成i的值。此時，生成器“暫停”，生成了10。

然后，我們再執行next()方法。生成器會從剛才暫停的地方繼續，這個時候i還是10。于是我們走到了第二個yield關鍵字處，這時候需要生成的值是i*2，i為10，那么此時生成的值便是20。所以這道題的最終結果是10,20。

45. 返回值是什么?

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

當我們向Promise.race方法中傳入多個Promise時，會進行 優先 解析。在這個例子中，我們用setTimeout給firstPromise和secondPromise分別設定了500ms和100ms的定時器。這意味著secondPromise會首先解析出字符串two。那么此時res參數即為two，是為輸出結果。

46. 輸出是什么?

let person = { name: "Lydia" };
const members = [person];
person = null;

console.log(members);

A: null

B: [null]

C: [{}]

D: [{ name: "Lydia" }]

答案: D

首先我們聲明了一個擁有name屬性的對象 person。

然后我們又聲明了一個變量members. 將首個元素賦值為變量person。 當設置兩個對象彼此相等時，它們會通過 引用 進行交互。但是當你將引用從一個變量分配至另一個變量時，其實只是執行了一個 復制 操作。（注意一點，他們的引用 _并不相同_!）

接下來我們讓person等于null。

我們沒有修改數組第一個元素的值，而只是修改了變量person的值,因為元素（復制而來）的引用與person不同。members的第一個元素仍然保持著對原始對象的引用。當我們輸出members數組時，第一個元素會將引用的對象打印出來。

47. 輸出是什么?

const person = {
  name: "Lydia",
  age: 21
};

for (const item in person) {
  console.log(item);
}

A: { name: "Lydia" }, { age: 21 }

B: "name", "age"

C: "Lydia", 21

D: ["name", "Lydia"], ["age", 21]

答案: B

在for-in循環中,我們可以通過對象的key來進行迭代,也就是這里的name和age。在底層，對象的key都是字符串（如果他們不是Symbol的話）。在每次循環中，我們將item設定為當前遍歷到的key.所以一開始，item是name，之后 item輸出的則是age。

48. 輸出是什么?

console.log(3 + 4 + "5");

A: "345"

B: "75"

C: 12

D: "12"

答案: B

當所有運算符的 優先級 相同時，計算表達式需要確定運算符的結合順序，即從右到左還是從左往右。在這個例子中，我們只有一類運算符+，對于加法來說，結合順序就死從左到右。

3 + 4首先計算，得到數字7.

由于類型的強制轉換，7 + "5"的結果是"75". JavaScript將7轉換成了字符串，可以參考問題15.我們可以用+號把兩個字符串連接起來。 "7" + "5" 就得到了"75".

49. num的值是什么?

const num = parseInt("7*6", 10);

A: 42

B: "42"

C: 7

D: NaN

答案: C

只返回了字符串中第一個字母. 設定了 進制 后 (也就是第二個參數，指定需要解析的數字是什么進制: 十進制、十六機制、八進制、二進制等等……),parseInt 檢查字符串中的字符是否合法. 一旦遇到一個在指定進制中不合法的字符后，立即停止解析并且忽略后面所有的字符。

*就是不合法的數字字符。所以只解析到"7"，并將其解析為十進制的7. num的值即為7.

50. 輸出是什么?

[1, 2, 3].map(num => {
  if (typeof num === "number") return;
  return num * 2;
});

A: []

B: [null, null, null]

C: [undefined, undefined, undefined]

D: [ 3 x empty ]

答案: C

對數組進行映射的時候,num就是當前循環到的元素. 在這個例子中，所有的映射都是number類型，所以if中的判斷typeof num === "number"結果都是true.map函數創建了新數組并且將函數的返回值插入數組。

但是，沒有任何值返回。當函數沒有返回任何值時，即默認返回undefined.對數組中的每一個元素來說，函數塊都得到了這個返回值，所以結果中每一個元素都是undefined.

51. 輸出的是什么?

function getInfo(member, year) {
  member.name = "Lydia";
  year = "1998";
}

const person = { name: "Sarah" };
const birthYear = "1997";

getInfo(person, birthYear);

console.log(person, birthYear);

A: { name: "Lydia" }, "1997"

B: { name: "Sarah" }, "1998"

C: { name: "Lydia" }, "1998"

D: { name: "Sarah" }, "1997"

答案: A

普通參數都是 值 傳遞的，而對象則不同，是 引用 傳遞。所以說，birthYear是值傳遞，因為他是個字符串而不是對象。當我們對參數進行值傳遞時，會創建一份該值的 復制 。（可以參考問題46）

變量birthYear有一個對"1997"的引用，而傳入的參數也有一個對"1997"的引用，但二者的引用并不相同。當我們通過給 year賦值"1998"來更新year的值的時候我們只是更新了year（的引用）。此時birthYear仍然是"1997".

而person是個對象。參數member引用與之 相同的 對象。當我們修改member所引用對象的屬性時,person的相應屬性也被修改了,因為他們引用了相同的對象. person的 name屬性也變成了 "Lydia".

52. 輸出是什么?

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語句，我么可以創建自定義錯誤。 而通過它，我們可以拋出異常。異?？梢允且粋€字符串, 一個 數字, 一個 布爾類型 或者是一個 對象。在本例中，我們的異常是字符串"Hello world".

通過 catch語句，我們可以設定當try語句塊中拋出異常后應該做什么處理。在本例中拋出的異常是字符串"Hello world". e就是這個字符串，因此被輸出。最終結果就是"Oh an error: Hello world".

53. 輸出是什么?

function Car() {
  this.make = "Lamborghini";
  return { make: "Maserati" };
}

const myCar = new Car();
console.log(myCar.make);

A: "Lamborghini"

B: "Maserati"

C: ReferenceError

D: TypeError

答案: B

返回屬性的時候，屬性的值等于 返回的 值，而不是構造函數中設定的值。我們返回了字符串 "Maserati"，所以 myCar.make等于"Maserati".

54. 輸出是什么?

(() => {
  let x = (y = 10);
})();

console.log(typeof x);
console.log(typeof y);

A: "undefined", "number"

B: "number", "number"

C: "object", "number"

D: "number", "undefined"

答案: A

let x = y = 10; 是下面這個表達式的縮寫:

y = 10;
let x = y;

我們設定y等于10時,我們實際上增加了一個屬性y給全局對象(瀏覽器里的window, Nodejs里的global)。在瀏覽器中， window.y等于10.

然后我們聲明了變量x等于y,也是10.但變量是使用 let聲明的，它只作用于 _塊級作用域_, 僅在聲明它的塊中有效；就是案例中的立即調用表達式(IIFE)。使用typeof操作符時, 操作值 x沒有被定義：因為我們在x聲明塊的外部，無法調用它。這就意味著x未定義。未分配或是未聲明的變量類型為"undefined". console.log(typeof x)返回"undefined".

而我們創建了全局變量y，并且設定y等于10.這個值在我們的代碼各處都訪問的到。 y已經被定義了，而且有一個"number"類型的值。 console.log(typeof y)返回"number".

55. 輸出是什么?

class Dog {
  constructor(name) {
    this.name = name;
  }
}

Dog.prototype.bark = function() {
  console.log(`Woof I am ${this.name}`);
};

const pet = new Dog("Mara");

pet.bark();

delete Dog.prototype.bark;

pet.bark();

A: "Woof I am Mara", TypeError

B: "Woof I am Mara","Woof I am Mara"

C: "Woof I am Mara", undefined

D: TypeError, TypeError

答案: A

我們可以用delete關鍵字刪除對象的屬性，對原型也是適用的。刪除了原型的屬性后，該屬性在原型鏈上就不可用了。在本例中，函數bark在執行了delete Dog.prototype.bark后不可用, 然而后面的代碼還在調用它。

當我們嘗試調用一個不存在的函數時TypeError異常會被拋出。在本例中就是 TypeError: pet.bark is not a function，因為pet.bark是undefined.

56. 輸出是什么?

const set = new Set([1, 1, 2, 3, 4]);

console.log(set);

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

B: [1, 2, 3, 4]

C: {1, 1, 2, 3, 4}

D: {1, 2, 3, 4}

答案: D

Set對象手機 獨一無二 的值：也就是說同一個值在其中僅出現一次。

我們傳入了數組[1, 1, 2, 3, 4]，他有一個重復值1.以為一個集合里不能有兩個重復的值，其中一個就被移除了。所以結果是 {1, 2, 3, 4}.

57. 輸出是什么?

// counter.js
let counter = 10;
export default counter;

// index.js
import myCounter from "./counter";

myCounter += 1;

console.log(myCounter);

A: 10

B: 11

C: Error

D: NaN

答案: C

引入的模塊是 只讀 的: 你不能修改引入的模塊。只有導出他們的模塊才能修改其值。

當我們給myCounter增加一個值的時候會拋出一個異常： myCounter是只讀的，不能被修改。

58. 輸出是什么?

const name = "Lydia";
age = 21;

console.log(delete name);
console.log(delete age);

A: false, true

B: "Lydia", 21

C: true, true

D: undefined, undefined

答案: A

delete操作符返回一個布爾值： true指刪除成功，否則返回false. 但是通過 var, const 或 let 關鍵字聲明的變量無法用 delete 操作符來刪除。

name變量由const關鍵字聲明，所以刪除不成功:返回 false. 而我們設定age等于21時,我們實際上添加了一個名為age的屬性給全局對象。對象中的屬性是可以刪除的，全局對象也是如此，所以delete age返回true.

59. 輸出是什么?

const numbers = [1, 2, 3, 4, 5];
const [y] = numbers;

console.log(y);

A: [[1, 2, 3, 4, 5]]

B: [1, 2, 3, 4, 5]

C: 1

D: [1]

答案: C

我們可以通過解構賦值來解析來自對象的數組或屬性的值，比如說：

[a, b] = [1, 2];

a的值現在是1，b的值現在是2.而在題目中，我們是這么做的:

[y] = [1, 2, 3, 4, 5];

也就是說，y等于數組的第一個值就是數字1.我們輸出y， 返回1.

60. 輸出是什么?

const user = { name: "Lydia", age: 21 };
const admin = { admin: true, ...user };

console.log(admin);

A: { admin: true, user: { name: "Lydia", age: 21 } }

B: { admin: true, name: "Lydia", age: 21 }

C: { admin: true, user: ["Lydia", 21] }

D: { admin: true }

答案: B

擴展運算符...為對象的組合提供了可能。你可以復制對象中的鍵值對，然后把它們加到另一個對象里去。在本例中，我們復制了user對象鍵值對，然后把它們加入到admin對象中。admin對象就擁有了這些鍵值對，所以結果為{ admin: true, name: "Lydia", age: 21 }.

61. 輸出是什么?

const person = { name: "Lydia" };

Object.defineProperty(person, "age", { value: 21 });

console.log(person);
console.log(Object.keys(person));

A: { name: "Lydia", age: 21 }, ["name", "age"]

B: { name: "Lydia", age: 21 }, ["name"]

C: { name: "Lydia"}, ["name", "age"]

D: { name: "Lydia"}, ["age"]

答案: B

通過defineProperty方法，我們可以給對象添加一個新屬性，或者修改已經存在的屬性。而我們使用defineProperty方法給對象添加了一個屬性之后，屬性默認為 不可枚舉(not enumerable)_. Object.keys方法僅返回對象中 _可枚舉(enumerable) 的屬性，因此只剩下了"name".

用defineProperty方法添加的屬性默認不可變。你可以通過writable, configurable 和 enumerable屬性來改變這一行為。這樣的話， 相比于自己添加的屬性，defineProperty方法添加的屬性有了更多的控制權。

62. 輸出是什么?

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

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

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

63. 輸出是什么?

let num = 10;

const increaseNumber = () => num++;
const increasePassedNumber = number => number++;

const num1 = increaseNumber();
const num2 = increasePassedNumber(num1);

console.log(num1);
console.log(num2);

A: 10, 10

B: 10, 11

C: 11, 11

D: 11, 12

答案: A

一元操作符 ++ 先返回 操作值, 再累加 操作值。num1的值是10, 因為increaseNumber函數首先返回num的值，也就是10，隨后再進行 num的累加。

num2是10因為我們將 num1傳入increasePassedNumber. number等于10（num1的值。同樣道理，++ 先返回 操作值, 再累加 操作值。） number是10，所以num2也是10.

本文首發微信公眾號：前端先鋒 歡迎掃描二維碼關注公眾號，每天都給你推送新鮮的前端技術文章 歡迎繼續閱讀本專欄其它高贊文章：

深入理解Shadow DOM v1

一步步教你用 WebVR 實現虛擬現實游戲

13個幫你提高開發效率的現代CSS框架

快速上手BootstrapVue

JavaScript引擎是如何工作的？從調用棧到Promise你需要知道的一切

WebSocket實戰：在 Node 和 React 之間進行實時通信

關于 Git 的 20 個面試題

深入解析 Node.js 的 console.log

Node.js 究竟是什么？

30分鐘用Node.js構建一個API服務器

Javascript的對象拷貝

程序員30歲前月薪達不到30K，該何去何從

14個最好的 JavaScript 數據可視化庫

8 個給前端的頂級 VS Code 擴展插件

Node.js 多線程完全指南

把HTML轉成PDF的4個方案及實現

更多文章...