首頁»JavaScript»JavaScript 進階問題列表

JavaScript 進階問題列表

來源:瘋狂的技術宅 發布時間:2019-07-19 閱讀次數:

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

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

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


1. 輸出是什么?

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

sayHi()
  • A: Lydiaundefined
  • B: LydiaReferenceError
  • C: ReferenceError21
  • D: undefinedReferenceError

 

答案: D

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

通過 letconst 關鍵字聲明的變量也會提升,但是和 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 20 1 2
  • B: 0 1 23 3 3
  • C: 3 3 30 1 2

 

答案: C

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

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


 

3. 輸出是什么?

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

shape.diameter()
shape.perimeter()
  • A: 2062.83185307179586
  • B: 20NaN
  • C: 2063
  • D: NaN63

 

答案: B

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

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

window 中沒有 radius 這個屬性,因此返回 undefined


 

4. 輸出是什么?

+true;
!"Lydia";
  • A: 1false
  • B: falseNaN
  • C: falsefalse

 

答案: A

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

字符串 '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,這會得到 smallmouse["small"] 返回 true

然后使用點語法的話,上面這一切都不會發生。mouse 沒有 bird 這個 key,這也就意味著 mouse.birdundefined。然后當我們使用點語法 mouse.bird.size 時,因為 mouse.birdundefined,這也就變成了 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),所有對象都有原型。基本對象可以訪問一些方法和屬性,比如 .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

一元后自增運算符 ++

  1. 返回值(返回 0
  2. 值自增(number 現在是 1

一元前自增運算符 ++

  1. 值自增(number 現在是 2
  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 關鍵字,你可以用相同的名稱聲明多個變量。然后變量將保存最新的值。

你不能使用 letconst 來實現這一點,因為它們是塊作用域的。


 

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。它有數字類型為 1set.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是什么?

<div onclick="console.log('first div')">
  <div onclick="console.log('second div')">
    <button onclick="console.log('button')">
      Click!
    </button>
  </div>
</div>
  • A: Outer div
  • B: Inner div
  • C: button
  • D: 一個包含所有嵌套元素的數組。

 

答案: C

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


 

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

<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,我們會看到兩個日志:pdiv。在事件傳播期間,有三個階段:捕獲、目標和冒泡。默認情況下,事件處理程序在冒泡階段執行(除非將 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種內置類型:nullundefinedbooleannumberstringobjectsymbolfunction 不是一種類型,函數是對象,它的類型是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 Numbernew 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 的值仍為 undefinedy 的值為 2。當我們在 catch 塊之外執行 console.log(x) 時,返回 undefinedy 返回 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

nullfalsy!null 的值是 true!true 的值是 false

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

1truthy!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*2i10,那么此時生成的值便是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時,會進行 優先 解析。在這個例子中,我們用setTimeoutfirstPromisesecondPromise分別設定了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來進行迭代,也就是這里的nameage。在底層,對象的key都是字符串(如果他們不是Symbol的話)。在每次循環中,我們將item設定為當前遍歷到的key.所以一開始,itemname,之后 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的相應屬性也被修改了,因為他們引用了相同的對象. personname屬性也變成了 "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.barkundefined.


 

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, constlet 關鍵字聲明的變量無法用 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的值現在是1b的值現在是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, configurableenumerable屬性來改變這一行為。這樣的話, 相比于自己添加的屬性,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的累加。

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

QQ群:WEB開發者官方群(515171538),驗證消息:10000
微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
網友評論(共0條評論) 正在載入評論......
理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
登錄會員中心
福建时时结果查询