JavaScript?進階問題列表(各種js代碼段1-65)

更新時間：2024年11月03日 12:24:18 投稿：mdxy-dxy

從基礎(chǔ)到進階,測試你有多了解?JavaScript,刷新你的知識,或者幫助你的?coding?面試！?:muscle:?:rocket:?我每周都會在這個倉庫下更新新的問題

我在我的 Instagram 上每天都會發(fā)布 JavaScript 的多選問題，并且同時也會在這個倉庫中發(fā)布。

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

答案在問題下方的折疊部分，點擊即可展開問題。祝你好運

因為篇幅有限這里提供的是1-65條，剩下的在文章結(jié)尾

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ù)內(nèi)部，我們首先通過 var 關(guān)鍵字聲明了 name 變量。這意味著變量被提升了（內(nèi)存空間在創(chuàng)建階段就被設(shè)置好了），直到程序運行到定義變量位置之前默認值都是 undefined。因為當我們打印 name 變量時還沒有執(zhí)行到定義變量的位置，因此變量的值保持為 undefined。

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

2. 輸出是什么？

for (var i = 0; i &lt; 3; i++) {
  setTimeout(() =&gt; console.log(i), 1)
}

for (let i = 0; i &lt; 3; i++) {
  setTimeout(() =&gt; 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 的值。當 setTimeout 回調(diào)執(zhí)行的時候，i 的值等于 3。

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

3. 輸出是什么？

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2
  },
  perimeter: () =&gt; 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

注意 diameter 的值是一個常規(guī)函數(shù)，但是 perimeter 的值是一個箭頭函數(shù)。

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

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

4. 輸出是什么？

+true;
!"Lydia";

A: 1 and false
B: false and NaN
C: false and false

答案

答案：A

一元操作符加號嘗試將 bool 轉(zhuǎn)為 number。true 轉(zhuǎn)換為 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）。盡管我們可能不會定義它們?yōu)樽址?，但它們在底層總會被轉(zhuǎn)換為字符串。

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

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

然后使用點語法的話，上面這一切都不會發(fā)生。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 中，當設(shè)置兩個對象彼此相等時，它們會通過引用進行交互。

首先，變量 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() 是一個內(nèi)建的函數(shù)構(gòu)造器。雖然它看著像是一個 number，但它實際上并不是一個真實的 number：它有一堆額外的功能并且它是一個對象。

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

然后，當我們使用 === 操作符時，兩者的值以及類型都應(yīng)該是相同的。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 是一個靜態(tài)方法。靜態(tài)方法被設(shè)計為只能被創(chuàng)建它們的構(gòu)造器使用（也就是 Chameleon），并且不能傳遞給實例。因為 freddie 是一個實例，靜態(tài)方法不能被實例使用，因此拋出了 TypeError 錯誤。

9. 輸出是什么？

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

A: {}
B: ReferenceError: greetign is not defined
C: undefined

答案

答案：A

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

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

10. 當我們這么做時，會發(fā)生什么？

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

bark.animal = 'dog'

A: 正常運行！
B: SyntaxError. 你不能通過這種方式給函數(shù)增加屬性。
C: undefined
D: ReferenceError

答案

答案：A

這在 JavaScript 中是可以的，因為函數(shù)是對象?。ǔ嘶绢愋椭馄渌际菍ο螅?/p>

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

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

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

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

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

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

對于 sarah，我們沒有使用 new 關(guān)鍵字。當使用 new 時，this 引用我們創(chuàng)建的空對象。當未使用 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: 對
B: 錯

答案

答案：B

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

15. 輸出是什么？

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

sum(1, '2')

A: NaN
B: TypeError
C: "12"
D: 3

答案

答案：C

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

在本例中，JavaScript 將數(shù)字 1 轉(zhuǎn)換為字符串，以便函數(shù)有意義并返回一個值。在數(shù)字類型（1）和字符串類型（'2'）相加時，該數(shù)字被視為字符串。我們可以連接字符串，比如 "Hello" + "World"，這里發(fā)生的是 "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 現(xiàn)在是 1）

一元前自增運算符 ++：

值自增（number 現(xiàn)在是 2）
返回值（返回 2）

結(jié)果是 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

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

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 檢查對象是否具有對內(nèi)存中相同位置的引用。

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

這也是 { 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）會返回實參組成的數(shù)組。而數(shù)組是對象，因此 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。這將返回數(shù)字 105。

22. cool_secret 可訪問多長時間？

sessionStorage.setItem('cool_secret', 123)

A: 永遠，數(shù)據(jù)不會丟失。
B: 當用戶關(guān)掉標簽頁時。
C: 當用戶關(guān)掉整個瀏覽器，而不只是關(guān)掉標簽頁。
D: 當用戶關(guān)閉電腦時。

答案

答案：B

關(guān)閉 tab 標簽頁 后，sessionStorage 存儲的數(shù)據(jù)才會刪除。

如果使用 localStorage，那么數(shù)據(jù)將永遠在那里，除非調(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)鍵字，你可以用相同的名稱聲明多個變量。然后變量將保存最新的值。

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

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。它有數(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

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

26. JavaScript 全局執(zhí)行上下文為你做了兩件事：全局對象和 this 關(guān)鍵字。

A: 對
B: 錯
C: 看情況

答案

答案：A

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

27. 輸出是什么？

for (let i = 1; i &lt; 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 = () =&gt; {
  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 是內(nèi)置的構(gòu)造函數(shù)，我們可以向它添加屬性。我只是在它的原型中添加了一個方法?；绢愋妥址蛔詣愚D(zhuǎn)換為字符串對象，由字符串原型函數(shù)生成。因此，所有 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

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

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

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

30. 輸出是什么？

const foo = () =&gt; console.log('First')
const bar = () =&gt; setTimeout(() =&gt; console.log('Second'))
const baz = () =&gt; console.log('Third')

bar()
foo()
baz()

A: First Second Third
B: First Third Second
C: Second First Third
D: Second Third First

答案

答案：B

我們有一個 setTimeout 函數(shù)，并首先調(diào)用它。然而，它是最后打印日志的。

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

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

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

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

WebAPI 不能隨時向棧內(nèi)添加內(nèi)容。相反，它將回調(diào)函數(shù)推到名為 queue 的地方。

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

bar 被調(diào)用，打印 "Second"，然后它被棧彈出。

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

&lt;div onclick="console.log('first div')"&gt;
  &lt;div onclick="console.log('second div')"&gt;
    &lt;button onclick="console.log('button')"&gt;
      Click!
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;

A: Outer div
B: Inner div
C: button
D: 一個包含所有嵌套元素的數(shù)組。

答案

答案：C

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

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

&lt;div onclick="console.log('div')"&gt;
  &lt;p onclick="console.log('p')"&gt;
    Click here!
  &lt;/p&gt;
&lt;/div&gt;

A: p div
B: div p
C: p
D: div

答案

答案：A

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

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

34. 輸出是什么？

function sayHi() {
  return (() =&gt; 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 和 bigint。function 不是一種類型，函數(shù)是對象，它的類型是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: All of them are falsy

答案

答案：A

只有 8 種 falsy 值：

undefined
null
NaN
false
'' (empty string)
0
-0
0n (BigInt(0))

Function 構(gòu)造函數(shù)，比如 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

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

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

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

38. 輸出是什么？

(() =&gt; {
  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。當我們傳遞參數(shù)時，這與之前定義的變量 x 不同。這個 x 是屬于 catch 塊級作用域的。

然后，我們將塊級作用域中的變量賦值為 1，同時也設(shè)置了變量 y 的值?，F(xiàn)在，我們打印塊級作用域中的變量 x，值為 1。

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

39. JavaScript 中的一切都是？

A: 基本類型與對象
B: 函數(shù)與對象
C: 只有對象
D: 數(shù)字與對象

答案

答案：A

JavaScript 只有基本類型和對象。

基本類型包括 boolean, null, undefined, bigint, number, string, symbol。

40. 輸出是什么？

[[0, 1], [2, 3]].reduce(
  (acc, cur) =&gt; {
    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]是初始值。初始值將會作為首次調(diào)用時第一個參數(shù) acc 的值。在第一次執(zhí)行時，acc 的值是 [1, 2]，cur 的值是 [0, 1]。合并它們，結(jié)果為 [1, 2, 0, 1]。第二次執(zhí)行，acc 的值是 [1, 2, 0, 1]，cur 的值是 [2, 3]。合并它們，最終結(jié)果為 [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(() =&gt; console.log('Hi'), 1000)

A: 一個唯一的 id
B: 該方法指定的毫秒數(shù)
C: 傳遞的函數(shù)
D: undefined

答案

答案：A

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

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 and 10, 20

答案

答案：C

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

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

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

45. 返回值是什么？

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

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

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

A: "one"
B: "two"
C: "two" "one"
D: "one" "two"

答案

答案：B

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

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。當設(shè)置兩個對象彼此相等時，它們會通過引用進行交互。但是當你將引用從一個變量分配至另一個變量時，其實只是執(zhí)行了一個復制操作。（注意一點，他們的引用并不相同!）

接下來我們讓person等于null。

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

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循環(huán)中，我們可以通過對象的 key 來進行迭代，也就是這里的name和age。在底層，對象的 key 都是字符串（如果他們不是 Symbol 的話）。在每次循環(huán)中，我們將item設(shè)定為當前遍歷到的 key.所以一開始，item是name，之后 item輸出的則是age。

48. 輸出是什么？

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

A: "345"
B: "75"
C: 12
D: "12"

答案

答案：B

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

3 + 4首先計算，得到數(shù)字7.

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

49. `num`的值是什么？

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

A: 42
B: "42"
C: 7
D: NaN

答案

答案：C

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

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

50. 輸出是什么？

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

A: []
B: [null, null, null]
C: [undefined, undefined, undefined]
D: [ 3 x empty ]

答案

答案：C

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

但是，沒有任何值返回。當函數(shù)沒有返回任何值時，即默認返回undefined.對數(shù)組中的每一個元素來說，函數(shù)塊都得到了這個返回值，所以結(jié)果中每一個元素都是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

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

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

而person是個對象。參數(shù)member引用與之相同的對象。當我們修改member所引用對象的屬性時，person的相應(yīng)屬性也被修改了，因為他們引用了相同的對象。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語句，我么可以創(chuàng)建自定義錯誤。而通過它，我們可以拋出異常。異常可以是一個字符串，一個 數(shù)字，一個 布爾類型 或者是一個對象。在本例中，我們的異常是字符串'Hello world'.

通過 catch語句，我們可以設(shè)定當try語句塊中拋出異常后應(yīng)該做什么處理。在本例中拋出的異常是字符串'Hello world'. e就是這個字符串，因此被輸出。最終結(jié)果就是'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

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

54. 輸出是什么？

(() =&gt; {
  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;

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

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

而我們創(chuàng)建了全局變量y，并且設(shè)定y等于10.這個值在我們的代碼各處都訪問的到。y已經(jīng)被定義了，而且有一個"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關(guān)鍵字刪除對象的屬性，對原型也是適用的。刪除了原型的屬性后，該屬性在原型鏈上就不可用了。在本例中，函數(shù)bark在執(zhí)行了delete Dog.prototype.bark后不可用，然而后面的代碼還在調(diào)用它。

當我們嘗試調(diào)用一個不存在的函數(shù)時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對象是獨一無二的值的集合：也就是說同一個值在其中僅出現(xiàn)一次。

我們傳入了數(shù)組[1, 1, 2, 3, 4]，他有一個重復值1.以為一個集合里不能有兩個重復的值，其中一個就被移除了。所以結(jié)果是 {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 關(guān)鍵字聲明的變量無法用 delete 操作符來刪除。

name變量由const關(guān)鍵字聲明，所以刪除不成功：返回 false. 而我們設(shè)定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

我們可以通過解構(gòu)賦值來解析來自對象的數(shù)組或?qū)傩缘闹?，比如說：

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

a的值現(xiàn)在是1，b的值現(xiàn)在是2.而在題目中，我們是這么做的：

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

也就是說，y等于數(shù)組的第一個值就是數(shù)字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對象就擁有了這些鍵值對，所以結(jié)果為{ 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方法，我們可以給對象添加一個新屬性，或者修改已經(jīng)存在的屬性。而我們使用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的第二個參數(shù)是替代者 (replacer). 替代者 (replacer) 可以是個函數(shù)或數(shù)組，用以控制哪些值如何被轉(zhuǎn)換為字符串。

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

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

63. 輸出是什么？

let num = 10;

const increaseNumber = () =&gt; num++;
const increasePassedNumber = number =&gt; 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函數(shù)首先返回num的值，也就是10，隨后再進行 num的累加。

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

64. 輸出什么？

const value = { number: 10 };

const multiply = (x = { ...value }) =&gt; {
  console.log(x.number *= 2);
};

multiply();
multiply();
multiply(value);
multiply(value);

A: 20, 40, 80, 160
B: 20, 40, 20, 40
C: 20, 20, 20, 40
D: NaN, NaN, 20, 40

答案

答案：C

在 ES6 中，我們可以使用默認值初始化參數(shù)。如果沒有給函數(shù)傳參，或者傳的參值為 "undefined"，那么參數(shù)的值將是默認值。上述例子中，我們將 value 對象進行了解構(gòu)并傳到一個新對象中，因此 x 的默認值為 {number：10}。

默認參數(shù)在調(diào)用時才會進行計算，每次調(diào)用函數(shù)時，都會創(chuàng)建一個新的對象。我們前兩次調(diào)用 multiply 函數(shù)且不傳遞值，那么每一次 x 的默認值都為 {number：10}，因此打印出該數(shù)字的乘積值為20。

第三次調(diào)用 multiply 時，我們傳遞了一個參數(shù)，即對象value。*=運算符實際上是x.number = x.number * 2的簡寫，我們修改了x.number的值，并打印出值20。

第四次，我們再次傳遞value對象。x.number之前被修改為20，所以x.number * = 2打印為40。

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

JavaScript?進階問題列表(各種js代碼段1-65)

1. 輸出是什么？

答案：D

2. 輸出是什么？

答案：C

3. 輸出是什么？

答案：B

4. 輸出是什么？

答案：A

5. 哪一個是正確的？

答案：A

6. 輸出是什么？

答案：A

7. 輸出是什么？

答案：C

8. 輸出是什么？

答案：D

9. 輸出是什么？

答案：A

10. 當我們這么做時，會發(fā)生什么？

答案：A

11. 輸出是什么？

答案：A

12. 輸出是什么？

答案：A

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

答案：D

14. 所有對象都有原型。

答案：B

15. 輸出是什么？

答案：C

16. 輸出是什么？

答案：C

17. 輸出是什么？

答案：B

18. 輸出是什么？

答案：C

19. 輸出是什么？

答案：C

20. 輸出是什么？

答案：C

21. 輸出是什么？

答案：A

22. cool_secret 可訪問多長時間？

答案：B

23. 輸出是什么？

答案：B

24. 輸出是什么？

答案：C

25. 輸出是什么？

答案：C

26. JavaScript 全局執(zhí)行上下文為你做了兩件事：全局對象和 this 關(guān)鍵字。

答案：A

27. 輸出是什么？

答案：C

28. 輸出是什么？

答案：A

29. 輸出是什么？

答案：B

30. 輸出是什么？

答案：B

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

答案：C

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

答案：A

33. 輸出是什么？

答案：D

34. 輸出是什么？

答案：B

35. 下面哪些值是 falsy?

答案：A

36. 輸出是什么？

答案：B

37. 輸出是什么？

答案：C

38. 輸出是什么？

答案：A

39. JavaScript 中的一切都是？

答案：A

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

1. 輸出是什么？

2. 輸出是什么？

3. 輸出是什么？

5. 哪一個是正確的？

6. 輸出是什么？

7. 輸出是什么？

8. 輸出是什么？

9. 輸出是什么？

10. 當我們這么做時，會發(fā)生什么？

11. 輸出是什么？

12. 輸出是什么？

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

16. 輸出是什么？

17. 輸出是什么？

18. 輸出是什么？

20. 輸出是什么？

21. 輸出是什么？

22. cool_secret 可訪問多長時間？

23. 輸出是什么？

24. 輸出是什么？

25. 輸出是什么？

26. JavaScript 全局執(zhí)行上下文為你做了兩件事：全局對象和 this 關(guān)鍵字。

27. 輸出是什么？

28. 輸出是什么？

29. 輸出是什么？

30. 輸出是什么？

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

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

33. 輸出是什么？

34. 輸出是什么？

36. 輸出是什么？

37. 輸出是什么？

39. JavaScript 中的一切都是？

40. 輸出是什么？

41. 輸出是什么？

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

43. 輸出是什么？

44. 輸出是什么？

45. 返回值是什么？

46. 輸出是什么？

47. 輸出是什么？

48. 輸出是什么？

49. `num`的值是什么？

50. 輸出是什么？

52. 輸出是什么？

53. 輸出是什么？

54. 輸出是什么？

55. 輸出是什么？

56. 輸出是什么？

57. 輸出是什么？

58. 輸出是什么？

61. 輸出是什么？

62. 輸出是什么？

63. 輸出是什么？

64. 輸出什么？