JavaScript?進(jìn)階問題列表(各種js代碼段66-107)
我在我的 Instagram 上每天都會(huì)發(fā)布 JavaScript 的多選問題,并且同時(shí)也會(huì)在這個(gè)倉(cāng)庫(kù)中發(fā)布。
從基礎(chǔ)到進(jìn)階,測(cè)試你有多了解 JavaScript,刷新你的知識(shí),或者幫助你的 coding 面試! :muscle: :rocket: 我每周都會(huì)在這個(gè)倉(cāng)庫(kù)下更新新的問題。
答案在問題下方的折疊部分,點(diǎn)擊即可展開問題。祝你好運(yùn)
66. 使用哪個(gè)構(gòu)造函數(shù)可以成功繼承Dog
類?
class Dog { constructor(name) { this.name = name; } }; class Labrador extends Dog { // 1 constructor(name, size) { this.size = size; } // 2 constructor(name, size) { super(name); this.size = size; } // 3 constructor(size) { super(name); this.size = size; } // 4 constructor(name, size) { this.name = name; this.size = size; } };
- A: 1
- B: 2
- C: 3
- D: 4
答案
答案:B
在子類中,在調(diào)用super
之前不能訪問到this
關(guān)鍵字。如果這樣做,它將拋出一個(gè)ReferenceError
:1 和 4 將引發(fā)一個(gè)引用錯(cuò)誤。
使用super
關(guān)鍵字,需要用給定的參數(shù)來調(diào)用父類的構(gòu)造函數(shù)。父類的構(gòu)造函數(shù)接收name
參數(shù),因此我們需要將name
傳遞給super
。
Labrador
類接收兩個(gè)參數(shù),name
參數(shù)是由于它繼承了Dog
,size
作為Labrador
類的額外屬性,它們都需要傳遞給Labrador
的構(gòu)造函數(shù),因此使用構(gòu)造函數(shù) 2 正確完成。
67. 輸出什么?
// index.js console.log('running index.js'); import { sum } from './sum.js'; console.log(sum(1, 2)); // sum.js console.log('running sum.js'); export const sum = (a, b) => a + b;
- A:
running index.js
,running sum.js
,3
- B:
running sum.js
,running index.js
,3
- C:
running sum.js
,3
,running index.js
- D:
running index.js
,undefined
,running sum.js
答案
答案:B
import
命令是編譯階段執(zhí)行的,在代碼運(yùn)行之前。因此這意味著被導(dǎo)入的模塊會(huì)先運(yùn)行,而導(dǎo)入模塊的文件會(huì)后執(zhí)行。
這是 CommonJS 中require()
和import
之間的區(qū)別。使用require()
,您可以在運(yùn)行代碼時(shí)根據(jù)需要加載依賴項(xiàng)。如果我們使用require
而不是import
,running index.js
,running sum.js
,3
會(huì)被依次打印。
68. 輸出什么?
console.log(Number(2) === Number(2)) console.log(Boolean(false) === Boolean(false)) console.log(Symbol('foo') === Symbol('foo'))
- A:
true
,true
,false
- B:
false
,true
,false
- C:
true
,false
,true
- D:
true
,true
,true
答案
答案:A
每個(gè)Symbol
都是完全唯一的。傳遞給Symbol
的參數(shù)只是給Symbol
的一個(gè)描述。Symbol
的值不依賴于傳遞的參數(shù)。當(dāng)我們測(cè)試相等時(shí),我們創(chuàng)建了兩個(gè)全新的符號(hào):第一個(gè)Symbol('foo')
,第二個(gè)Symbol('foo')
,這兩個(gè)值是唯一的,彼此不相等,因此返回false
。
69. 輸出什么?
const name = "Lydia Hallie" console.log(name.padStart(13)) console.log(name.padStart(2))
- A:
"Lydia Hallie"
,"Lydia Hallie"
- B:
" Lydia Hallie"
," Lydia Hallie"
("[13x whitespace]Lydia Hallie"
,"[2x whitespace]Lydia Hallie"
) - C:
" Lydia Hallie"
,"Lydia Hallie"
("[1x whitespace]Lydia Hallie"
,"Lydia Hallie"
) - D:
"Lydia Hallie"
,"Lyd"
答案
答案:C
使用padStart
方法,我們可以在字符串的開頭添加填充。傳遞給此方法的參數(shù)是字符串的總長(zhǎng)度(包含填充)。字符串Lydia Hallie
的長(zhǎng)度為12
,因此name.padStart(13)
在字符串的開頭只會(huì)插入 1(13 - 12 = 1
)個(gè)空格。
如果傳遞給padStart
方法的參數(shù)小于字符串的長(zhǎng)度,則不會(huì)添加填充。
70. 輸出什么?
console.log("??" + "??");
- A:
"????"
- B:
257548
- C: A string containing their code points
- D: Error
答案
答案:A
使用+
運(yùn)算符,您可以連接字符串。上述情況,我們將字符串“??”
與字符串”??“
連接起來,產(chǎn)生”????“
。
71. 如何能打印出console.log
語句后注釋掉的值?
function* startGame() { const 答案 = yield "Do you love JavaScript?"; if (答案 !== "Yes") { return "Oh wow... Guess we're gone here"; } return "JavaScript loves you back ??"; } const game = startGame(); console.log(/* 1 */); // Do you love JavaScript? console.log(/* 2 */); // JavaScript loves you back ??
- A:
game.next("Yes").value
andgame.next().value
- B:
game.next.value("Yes")
andgame.next.value()
- C:
game.next().value
andgame.next("Yes").value
- D:
game.next.value()
andgame.next.value("Yes")
答案
答案:C
generator
函數(shù)在遇到yield
關(guān)鍵字時(shí)會(huì)“暫停”其執(zhí)行。首先,我們需要讓函數(shù)產(chǎn)生字符串Do you love JavaScript?
,這可以通過調(diào)用game.next().value
來完成。上述函數(shù)的第一行就有一個(gè)yield
關(guān)鍵字,那么運(yùn)行立即停止了,yield
表達(dá)式本身沒有返回值,或者說總是返回undefined
,這意味著此時(shí)變量 答案
為undefined
next
方法可以帶一個(gè)參數(shù),該參數(shù)會(huì)被當(dāng)作上一個(gè) yield
表達(dá)式的返回值。當(dāng)我們調(diào)用game.next("Yes").value
時(shí),先前的 yield
的返回值將被替換為傳遞給next()
函數(shù)的參數(shù)"Yes"
。此時(shí)變量 答案
被賦值為 "Yes"
,if
語句返回false
,所以JavaScript loves you back ??
被打印。
72. 輸出什么?
console.log(String.raw`Hello\nworld`);
- A:
Hello world!
- B:
Hello
world
- C:
Hello\nworld
- D:
Hello\n
world
答案
答案:C
String.raw
函數(shù)是用來獲取一個(gè)模板字符串的原始字符串的,它返回一個(gè)字符串,其中忽略了轉(zhuǎn)義符(\n
,\v
,\t
等)。但反斜杠可能造成問題,因?yàn)槟憧赡軙?huì)遇到下面這種類似情況:
const path = `C:\Documents\Projects\table.html` String.raw`${path}`
這將導(dǎo)致:
"C:DocumentsProjects able.html"
直接使用String.raw
String.raw`C:\Documents\Projects\table.html`
上述情況,字符串是Hello\nworld
被打印出。
73. 輸出什么?
async function getData() { return await Promise.resolve("I made it!"); } const data = getData(); console.log(data);
- A:
"I made it!"
- B:
Promise {<resolved>: "I made it!"}
- C:
Promise {<pending>}
- D:
undefined
答案
答案:C
異步函數(shù)始終返回一個(gè) promise。await
仍然需要等待 promise 的解決:當(dāng)我們調(diào)用getData()
并將其賦值給data
,此時(shí)data
為getData
方法返回的一個(gè)掛起的 promise,該 promise 并沒有解決。
如果我們想要訪問已解決的值"I made it!"
,可以在data
上使用.then()
方法:
data.then(res => console.log(res))
這樣將打印 "I made it!"
74. 輸出什么?
function addToList(item, list) { return list.push(item); } const result = addToList("apple", ["banana"]); console.log(result);
- A:
['apple', 'banana']
- B:
2
- C:
true
- D:
undefined
答案
答案:B
push()
方法返回新數(shù)組的長(zhǎng)度。一開始,數(shù)組包含一個(gè)元素(字符串"banana"
),長(zhǎng)度為 1。在數(shù)組中添加字符串"apple"
后,長(zhǎng)度變?yōu)?2,并將從addToList
函數(shù)返回。
push
方法修改原始數(shù)組,如果你想從函數(shù)返回?cái)?shù)組而不是數(shù)組長(zhǎng)度,那么應(yīng)該在 push item
之后返回list
。
75. 輸出什么?
const box = { x: 10, y: 20 }; Object.freeze(box); const shape = box; shape.x = 100; console.log(shape)
- A:
{ x: 100, y: 20 }
- B:
{ x: 10, y: 20 }
- C:
{ x: 100 }
- D:
ReferenceError
答案
答案:B
Object.freeze
使得無法添加、刪除或修改對(duì)象的屬性(除非屬性的值是另一個(gè)對(duì)象)。
當(dāng)我們創(chuàng)建變量shape
并將其設(shè)置為等于凍結(jié)對(duì)象box
時(shí),shape
指向的也是凍結(jié)對(duì)象。你可以使用Object.isFrozen
檢查一個(gè)對(duì)象是否被凍結(jié),上述情況,Object.isFrozen(shape)
將返回true
。
由于shape
被凍結(jié),并且x
的值不是對(duì)象,所以我們不能修改屬性x
。x
仍然等于10
,{x:10,y:20}
被打印。
注意,上述例子我們對(duì)屬性x
進(jìn)行修改,可能會(huì)導(dǎo)致拋出 TypeError 異常(最常見但不僅限于嚴(yán)格模式下時(shí))。
76. 輸出什么?
const { name: myName } = { name: "Lydia" }; console.log(name);
- A:
"Lydia"
- B:
"myName"
- C:
undefined
- D:
ReferenceError
答案
答案:D
當(dāng)我們從右側(cè)的對(duì)象解構(gòu)屬性name
時(shí),我們將其值Lydia
分配給名為myName
的變量。
使用{name:myName}
,我們是在告訴 JavaScript 我們要?jiǎng)?chuàng)建一個(gè)名為myName
的新變量,并且其值是右側(cè)對(duì)象的name
屬性的值。
當(dāng)我們嘗試打印name
,一個(gè)未定義的變量時(shí),就會(huì)引發(fā)ReferenceError
。
77. 以下是個(gè)純函數(shù)么?
function sum(a, b) { return a + b; }
- A: Yes
- B: No
答案
答案:A
純函數(shù)在相同的輸入值時(shí),需產(chǎn)生相同的輸出,其輸出的結(jié)果,與輸入值以外的其他隱藏信息或狀態(tài)無關(guān),也和由 I/O 設(shè)備產(chǎn)生的外部輸出無關(guān)。 純函數(shù)不會(huì)產(chǎn)生副作用。
純函數(shù)與副作用的定義可參考: https://zh.wikipedia.org/wiki/%E5%89%AF%E4%BD%9C%E7%94%A8_(%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6)
78. 輸出什么?
const add = () => { const cache = {}; return num => { if (num in cache) { return `From cache! ${cache[num]}`; } else { const result = num + 10; cache[num] = result; return `Calculated! ${result}`; } }; }; const addFunction = add(); console.log(addFunction(10)); console.log(addFunction(10)); console.log(addFunction(5 * 2));
- A:
Calculated! 20
Calculated! 20
Calculated! 20
- B:
Calculated! 20
From cache! 20
Calculated! 20
- C:
Calculated! 20
From cache! 20
From cache! 20
- D:
Calculated! 20
From cache! 20
Error
答案
答案:C
add
函數(shù)是一個(gè)記憶函數(shù)。通過記憶化,我們可以緩存函數(shù)的結(jié)果,以加快其執(zhí)行速度。上述情況,我們創(chuàng)建一個(gè)cache
對(duì)象,用于存儲(chǔ)先前返回過的值。
如果我們使用相同的參數(shù)多次調(diào)用addFunction
函數(shù),它首先檢查緩存中是否已有該值,如果有,則返回緩存值,這將節(jié)省執(zhí)行時(shí)間。如果沒有,那么它將計(jì)算該值,并存儲(chǔ)在緩存中。
我們用相同的值三次調(diào)用了addFunction
函數(shù):
在第一次調(diào)用,num
等于10
時(shí)函數(shù)的值尚未緩存,if 語句num in cache
返回false
,else 塊的代碼被執(zhí)行:Calculated! 20
,并且其結(jié)果被添加到緩存對(duì)象,cache
現(xiàn)在看起來像{10:20}
。
第二次,cache
對(duì)象包含10
的返回值。if 語句 num in cache
返回true
,From cache! 20
被打印。
第三次,我們將5 * 2
(值為 10) 傳遞給函數(shù)。cache
對(duì)象包含10
的返回值。if 語句 num in cache
返回true
,From cache! 20
被打印。
79. 輸出什么?
const myLifeSummedUp = ["?", "??", "??", "??"] for (let item in myLifeSummedUp) { console.log(item) } for (let item of myLifeSummedUp) { console.log(item) }
- A:
0
1
2
3
and"?"
"??"
"??"
"??"
- B:
"?"
"??"
"??"
"??"
and"?"
"??"
"??"
"??"
- C:
"?"
"??"
"??"
"??"
and0
1
2
3
- D:
0
1
2
3
and{0: "?", 1: "??", 2: "??", 3: "??"}
答案
答案:A
通過for-in
循環(huán),我們可以遍歷一個(gè)對(duì)象自有的、繼承的、可枚舉的、非 Symbol 的屬性。在數(shù)組中,可枚舉屬性是數(shù)組元素的“鍵”,即它們的索引。類似于下面這個(gè)對(duì)象:
{0: "?", 1: "??", 2: "??", 3: "??"}
其中鍵則是可枚舉屬性,因此 0
,1
,2
,3
被記錄。
通過for-of
循環(huán),我們可以迭代可迭代對(duì)象(包括 Array
,Map
,Set
,String
,arguments
等)。當(dāng)我們迭代數(shù)組時(shí),在每次迭代中,不同屬性的值將被分配給變量item
,因此“?”
,“??”
,“??”
,“??”
被打印。
80. 輸出什么?
const list = [1 + 2, 1 * 2, 1 / 2] console.log(list)
- A:
["1 + 2", "1 * 2", "1 / 2"]
- B:
["12", 2, 0.5]
- C:
[3, 2, 0.5]
- D:
[1, 1, 1]
答案
答案:C
數(shù)組元素可以包含任何值。數(shù)字,字符串,布爾值,對(duì)象,數(shù)組,null
,undefined
,以及其他表達(dá)式,如日期,函數(shù)和計(jì)算。
元素將等于返回的值。1 + 2
返回3
,1 * 2
返回'2,'1 / 2
返回0.5
。
81. 輸出什么?
function sayHi(name) { return `Hi there, ${name}` } console.log(sayHi())
- A:
Hi there,
- B:
Hi there, undefined
- C:
Hi there, null
- D:
ReferenceError
答案
答案:B
默認(rèn)情況下,如果不給函數(shù)傳參,參數(shù)的值將為undefined
。上述情況,我們沒有給參數(shù)name
傳值。name
等于undefined
,并被打印。
在 ES6 中,我們可以使用默認(rèn)參數(shù)覆蓋此默認(rèn)的undefined
值。例如:
function sayHi (name =“Lydia”){...}
在這種情況下,如果我們沒有傳遞值或者如果我們傳遞undefined
,name
總是等于字符串Lydia
82. 輸出什么?
var status = "??" setTimeout(() => { const status = "??" const data = { status: "??", getStatus() { return this.status } } console.log(data.getStatus()) console.log(data.getStatus.call(this)) }, 0)
- A:
"??"
and"??"
- B:
"??"
and"??"
- C:
"??"
and"??"
- D:
"??"
and"??"
答案
答案:B
this
關(guān)鍵字的指向取決于使用它的位置。在函數(shù)中,比如getStatus
,this
指向的是調(diào)用它的對(duì)象,上述例子中data
對(duì)象調(diào)用了getStatus
,因此this
指向的就是data
對(duì)象。當(dāng)我們打印this.status
時(shí),data
對(duì)象的status
屬性被打印,即"??"
。
使用call
方法,可以更改this
指向的對(duì)象。data.getStatus.call(this)
是將this
的指向由data
對(duì)象更改為全局對(duì)象。在全局對(duì)象上,有一個(gè)名為status
的變量,其值為”??“
。因此打印this.status
時(shí),會(huì)打印“??”
。
83. 輸出什么?
const person = { name: "Lydia", age: 21 } let city = person.city city = "Amsterdam" console.log(person)
- A:
{ name: "Lydia", age: 21 }
- B:
{ name: "Lydia", age: 21, city: "Amsterdam" }
- C:
{ name: "Lydia", age: 21, city: undefined }
- D:
"Amsterdam"
答案
答案:A
我們將變量city
設(shè)置為等于person
對(duì)象上名為city
的屬性的值。這個(gè)對(duì)象上沒有名為city
的屬性,因此變量city
的值為undefined
。
請(qǐng)注意,我們沒有引用person
對(duì)象本身,只是將變量city
設(shè)置為等于person
對(duì)象上city
屬性的當(dāng)前值。
然后,我們將city
設(shè)置為等于字符串“Amsterdam”
。這不會(huì)更改 person 對(duì)象:沒有對(duì)該對(duì)象的引用。
因此打印person
對(duì)象時(shí),會(huì)返回未修改的對(duì)象。
84. 輸出什么?
function checkAge(age) { if (age < 18) { const message = "Sorry, you're too young." } else { const message = "Yay! You're old enough!" } return message } console.log(checkAge(21))
- A:
"Sorry, you're too young."
- B:
"Yay! You're old enough!"
- C:
ReferenceError
- D:
undefined
答案
答案:C
const
和let
聲明的變量是具有塊級(jí)作用域的,塊是大括號(hào)({}
)之間的任何東西,即上述情況if / else
語句的花括號(hào)。由于塊級(jí)作用域,我們無法在聲明的塊之外引用變量,因此拋出ReferenceError
。
85. 什么樣的信息將被打印?
fetch('https://www.website.com/api/user/1') .then(res => res.json()) .then(res => console.log(res))
- A:
fetch
方法的結(jié)果 - B: 第二次調(diào)用
fetch
方法的結(jié)果 - C: 前一個(gè)
.then()
中回調(diào)方法返回的結(jié)果 - D: 總是
undefined
答案
答案:C
第二個(gè).then
中res
的值等于前一個(gè).then
中的回調(diào)函數(shù)返回的值。你可以像這樣繼續(xù)鏈接.then
,將值傳遞給下一個(gè)處理程序。
86. 哪個(gè)選項(xiàng)是將hasName
設(shè)置為true
的方法,前提是不能將true
作為參數(shù)傳遞?
function getName(name) { const hasName = // }
- A:
!!name
- B:
name
- C:
new Boolean(name)
- D:
name.length
答案
答案:A
使用邏輯非運(yùn)算符!
,將返回一個(gè)布爾值,使用!! name
,我們可以確定name
的值是真的還是假的。如果name
是真實(shí)的,那么!name
返回false
。!false
返回true
。
通過將hasName
設(shè)置為name
,可以將hasName
設(shè)置為等于傳遞給getName
函數(shù)的值,而不是布爾值true
。
new Boolean(true)
返回一個(gè)對(duì)象包裝器,而不是布爾值本身。
name.length
返回傳遞的參數(shù)的長(zhǎng)度,而不是布爾值true
。
87. 輸出什么?
console.log("I want pizza"[0])
- A:
"""
- B:
"I"
- C:
SyntaxError
- D:
undefined
答案
答案:B
可以使用方括號(hào)表示法獲取字符串中特定索引的字符,字符串中的第一個(gè)字符具有索引 0,依此類推。在這種情況下,我們想要得到索引為 0 的元素,字符'I'
被記錄。
請(qǐng)注意,IE7 及更低版本不支持此方法。在這種情況下,應(yīng)該使用.charAt()
88. 輸出什么?
function sum(num1, num2 = num1) { console.log(num1 + num2) } sum(10)
- A:
NaN
- B:
20
- C:
ReferenceError
- D:
undefined
答案
答案:B
您可以將默認(rèn)參數(shù)的值設(shè)置為函數(shù)的另一個(gè)參數(shù),只要另一個(gè)參數(shù)定義在其之前即可。我們將值10
傳遞給sum
函數(shù)。如果sum
函數(shù)只接收 1 個(gè)參數(shù),則意味著沒有傳遞num2
的值,這種情況下,num1
的值等于傳遞的值10
。num2
的默認(rèn)值是num1
的值,即10
。num1 + num2
返回20
。
如果您嘗試將默認(rèn)參數(shù)的值設(shè)置為后面定義的參數(shù),則可能導(dǎo)致參數(shù)的值尚未初始化,從而引發(fā)錯(cuò)誤。比如:
function test(m = n, n = 2) { console.log(m, n) } test() // Uncaught ReferenceError: Cannot access 'n' before initialization test(3) // 3 2 test(3, 4) // 3 4
89. 輸出什么?
// module.js export default () => "Hello world" export const name = "Lydia" // index.js import * as data from "./module" console.log(data)
- A:
{ default: function default(), name: "Lydia" }
- B:
{ default: function default() }
- C:
{ default: "Hello world", name: "Lydia" }
- D: Global object of
module.js
答案
答案:A
使用import * as name
語法,我們將module.js
文件中所有export
導(dǎo)入到index.js
文件中,并且創(chuàng)建了一個(gè)名為data
的新對(duì)象。在module.js
文件中,有兩個(gè)導(dǎo)出:默認(rèn)導(dǎo)出和命名導(dǎo)出。默認(rèn)導(dǎo)出是一個(gè)返回字符串“Hello World”的函數(shù),命名導(dǎo)出是一個(gè)名為name
的變量,其值為字符串“Lydia”
。
data
對(duì)象具有默認(rèn)導(dǎo)出的default
屬性,其他屬性具有指定 exports 的名稱及其對(duì)應(yīng)的值。
90. 輸出什么?
class Person { constructor(name) { this.name = name } } const member = new Person("John") console.log(typeof member)
- A:
"class"
- B:
"function"
- C:
"object"
- D:
"string"
答案
答案:C
類是構(gòu)造函數(shù)的語法糖,如果用構(gòu)造函數(shù)的方式來重寫Person
類則將是:
function Person() { this.name = name }
通過new
來調(diào)用構(gòu)造函數(shù),將會(huì)生成構(gòu)造函數(shù)Person
的實(shí)例,對(duì)實(shí)例執(zhí)行typeof
關(guān)鍵字將返回"object"
,上述情況打印出"object"
。
91. 輸出什么?
let newList = [1, 2, 3].push(4) console.log(newList.push(5))
- A:
[1, 2, 3, 4, 5]
- B:
[1, 2, 3, 5]
- C:
[1, 2, 3, 4]
- D:
Error
答案
答案:D
.push
方法返回?cái)?shù)組的長(zhǎng)度,而不是數(shù)組本身!通過將newList
設(shè)置為[1,2,3].push(4)
,實(shí)際上newList
等于數(shù)組的新長(zhǎng)度:4
。
然后,嘗試在newList
上使用.push
方法。由于newList
是數(shù)值4
,拋出 TypeError。
92. 輸出什么?
function giveLydiaPizza() { return "Here is pizza!" } const giveLydiaChocolate = () => "Here's chocolate... now go hit the gym already." console.log(giveLydiaPizza.prototype) console.log(giveLydiaChocolate.prototype)
- A:
{ constructor: ...}
{ constructor: ...}
- B:
{}
{ constructor: ...}
- C:
{ constructor: ...}
{}
- D:
{ constructor: ...}
undefined
答案
答案:D
常規(guī)函數(shù),例如giveLydiaPizza
函數(shù),有一個(gè)prototype
屬性,它是一個(gè)帶有constructor
屬性的對(duì)象(原型對(duì)象)。然而,箭頭函數(shù),例如giveLydiaChocolate
函數(shù),沒有這個(gè)prototype
屬性。嘗試使用giveLydiaChocolate.prototype
訪問prototype
屬性時(shí)會(huì)返回undefined
。
93. 輸出什么?
const person = { name: "Lydia", age: 21 } for (const [x, y] of Object.entries(person)) { console.log(x, y) }
- A:
name
Lydia
andage
21
- B:
["name", "Lydia"]
and["age", 21]
- C:
["name", "age"]
andundefined
- D:
Error
答案
答案:A
Object.entries()
方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組,上述情況返回一個(gè)二維數(shù)組,數(shù)組每個(gè)元素是一個(gè)包含鍵和值的數(shù)組:
[['name','Lydia'],['age', 21]]
使用for-of
循環(huán),我們可以迭代數(shù)組中的每個(gè)元素,上述情況是子數(shù)組。我們可以使用const [x,y]
在for-of
循環(huán)中解構(gòu)子數(shù)組。x
等于子數(shù)組中的第一個(gè)元素,y
等于子數(shù)組中的第二個(gè)元素。
第一個(gè)子陣列是[“name”,“Lydia”]
,其中x
等于name
,而y
等于Lydia
。 第二個(gè)子陣列是[“age”,21]
,其中x
等于age
,而y
等于21
。
94. 輸出什么?
function getItems(fruitList, ...args, favoriteFruit) { return [...fruitList, ...args, favoriteFruit] } getItems(["banana", "apple"], "pear", "orange")
- A:
["banana", "apple", "pear", "orange"]
- B:
[["banana", "apple"], "pear", "orange"]
- C:
["banana", "apple", ["pear"], "orange"]
- D:
SyntaxError
答案
答案:D
... args
是剩余參數(shù),剩余參數(shù)的值是一個(gè)包含所有剩余參數(shù)的數(shù)組,并且只能作為最后一個(gè)參數(shù)。上述示例中,剩余參數(shù)是第二個(gè)參數(shù),這是不可能的,并會(huì)拋出語法錯(cuò)誤。
function getItems(fruitList, favoriteFruit, ...args) { return [...fruitList, ...args, favoriteFruit] }
getItems(["banana", "apple"], "pear", "orange")
上述例子是有效的,將會(huì)返回?cái)?shù)組:[ 'banana', 'apple', 'orange', 'pear' ]
95. 輸出什么?
function nums(a, b) { if (a > b) console.log('a is bigger') else console.log('b is bigger') return a + b } console.log(nums(4, 2)) console.log(nums(1, 2))
- A:
a is bigger
,6
andb is bigger
,3
- B:
a is bigger
,undefined
andb is bigger
,undefined
- C:
undefined
andundefined
- D:
SyntaxError
答案
答案:B
在 JavaScript 中,我們不必顯式地編寫分號(hào) (;
),但是 JavaScript 引擎仍然在語句之后自動(dòng)添加分號(hào)。這稱為自動(dòng)分號(hào)插入。例如,一個(gè)語句可以是變量,或者像throw
、return
、break
這樣的關(guān)鍵字。
在這里,我們?cè)谛碌囊恍猩蠈懥艘粋€(gè)return
語句和另一個(gè)值a + b
。然而,由于它是一個(gè)新行,引擎并不知道它實(shí)際上是我們想要返回的值。相反,它會(huì)在return
后面自動(dòng)添加分號(hào)。你可以這樣看:
return; a + b
這意味著永遠(yuǎn)不會(huì)到達(dá)a + b
,因?yàn)楹瘮?shù)在return
關(guān)鍵字之后停止運(yùn)行。如果沒有返回值,就像這里,函數(shù)返回undefined
。注意,在if/else
語句之后沒有自動(dòng)插入!
96. 輸出什么?
class Person { constructor() { this.name = "Lydia" } } Person = class AnotherPerson { constructor() { this.name = "Sarah" } } const member = new Person() console.log(member.name)
- A:
"Lydia"
- B:
"Sarah"
- C:
Error: cannot redeclare Person
- D:
SyntaxError
答案
答案:B
我們可以將類設(shè)置為等于其他類/函數(shù)構(gòu)造函數(shù)。在這種情況下,我們將Person
設(shè)置為AnotherPerson
。這個(gè)構(gòu)造函數(shù)的名字是Sarah
,所以新的Person
實(shí)例member
上的 name 屬性是Sarah
。
97. 輸出什么?
const info = { [Symbol('a')]: 'b' } console.log(info) console.log(Object.keys(info))
- A:
{Symbol('a'): 'b'}
and["{Symbol('a')"]
- B:
{}
and[]
- C:
{ a: "b" }
and["a"]
- D:
{Symbol('a'): 'b'}
and[]
答案
答案:D
Symbol
類型是不可枚舉的。Object.keys
方法返回對(duì)象上的所有可枚舉的鍵屬性。Symbol
類型是不可見的,并返回一個(gè)空數(shù)組。記錄整個(gè)對(duì)象時(shí),所有屬性都是可見的,甚至是不可枚舉的屬性。
這是Symbol
的眾多特性之一:除了表示完全唯一的值(防止對(duì)象意外名稱沖突,例如當(dāng)使用 2 個(gè)想要向同一對(duì)象添加屬性的庫(kù)時(shí)),您還可以隱藏
這種方式對(duì)象的屬性(盡管不完全。你仍然可以使用Object.getOwnPropertySymbols()
方法訪問 Symbol
。
98. 輸出什么?
const getList = ([x, ...y]) => [x, y] const getUser = user => { name: user.name, age: user.age } const list = [1, 2, 3, 4] const user = { name: "Lydia", age: 21 } console.log(getList(list)) console.log(getUser(user))
- A:
[1, [2, 3, 4]]
andSyntaxError
- B:
[1, [2, 3, 4]]
and{ name: "Lydia", age: 21 }
- C:
[1, 2, 3, 4]
and{ name: "Lydia", age: 21 }
- D:
Error
and{ name: "Lydia", age: 21 }
答案
答案:A
getList
函數(shù)接收一個(gè)數(shù)組作為其參數(shù)。在getList
函數(shù)的括號(hào)之間,我們立即解構(gòu)這個(gè)數(shù)組。您可以將其視為:
[x, ...y] = [1, 2, 3, 4]
使用剩余的參數(shù)... y
,我們將所有剩余參數(shù)放在一個(gè)數(shù)組中。在這種情況下,其余的參數(shù)是2
,3
和4
。 y
的值是一個(gè)數(shù)組,包含所有其余參數(shù)。在這種情況下,x
的值等于1
,所以當(dāng)我們打印[x,y]
時(shí),會(huì)打印[1,[2,3,4]]
。
getUser
函數(shù)接收一個(gè)對(duì)象。對(duì)于箭頭函數(shù),如果只返回一個(gè)值,我們不必編寫花括號(hào)。但是,如果您想從一個(gè)箭頭函數(shù)返回一個(gè)對(duì)象,您必須將它寫在圓括號(hào)之間,否則兩個(gè)花括號(hào)之間的所有內(nèi)容都將被解釋為一個(gè)塊語句!在這種情況下,花括號(hào)之間的代碼不是有效的 JavaScript 代碼,因此會(huì)拋出 SyntaxError。
以下函數(shù)將返回一個(gè)對(duì)象:
const getUser = user => ({ name: user.name, age: user.age })
99. 輸出什么?
const name = "Lydia" console.log(name())
- A:
SyntaxError
- B:
ReferenceError
- C:
TypeError
- D:
undefined
答案
答案:C
變量name
保存字符串的值,該字符串不是函數(shù),因此無法調(diào)用。
當(dāng)值不是預(yù)期類型時(shí),會(huì)拋出TypeErrors
。JavaScript 期望name
是一個(gè)函數(shù),因?yàn)槲覀冊(cè)噲D調(diào)用它。但它是一個(gè)字符串,因此拋出TypeError
:name is not a function
當(dāng)你編寫了一些非有效的 JavaScript 時(shí),會(huì)拋出語法錯(cuò)誤,例如當(dāng)你把return
這個(gè)詞寫成retrun
時(shí)。 當(dāng) JavaScript 無法找到您嘗試訪問的值的引用時(shí),拋出ReferenceErrors
。
100. 輸出什么?
// ??? This is my 100th question! ??? const output = `${[] && 'Im'}possible! You should${'' && `n't`} see a therapist after so much JavaScript lol`
- A:
possible! You should see a therapist after so much JavaScript lol
- B:
Impossible! You should see a therapist after so much JavaScript lol
- C:
possible! You shouldn't see a therapist after so much JavaScript lol
- D:
Impossible! You shouldn't see a therapist after so much JavaScript lol
答案
答案:B
[]
是一個(gè)真值。使用&&
運(yùn)算符,如果左側(cè)值是真值,則返回右側(cè)值。在這種情況下,左側(cè)值[]
是一個(gè)真值,所以返回Im
。
""
是一個(gè)假值。如果左側(cè)值是假的,則不返回任何內(nèi)容。n't
不會(huì)被退回。
101.輸出什么?
const one = (false || {} || null) const two = (null || false || "") const three = ([] || 0 || true) console.log(one, two, three)
- A:
false
null
[]
- B:
null
""
true
- C:
{}
""
[]
- D:
null
null
true
答案
答案:C
使用||
運(yùn)算符,我們可以返回第一個(gè)真值。如果所有值都是假值,則返回最后一個(gè)值。
(false || {} || null)
:空對(duì)象{}
是一個(gè)真值。這是第一個(gè)(也是唯一的)真值,它將被返回。one
等于{}
。
(null || false ||“”)
:所有值都是假值。這意味著返回傳遞的值""
。two
等于""
。
([] || 0 ||“”)
:空數(shù)組[]
是一個(gè)真值。這是第一個(gè)返回的真值。three
等于[]
。
102. 依次輸出什么?
const myPromise = () => Promise.resolve('I have resolved!') function firstFunction() { myPromise().then(res => console.log(res)) console.log('second') } async function secondFunction() { console.log(await myPromise()) console.log('second') } firstFunction() secondFunction()
- A:
I have resolved!
,second
andI have resolved!
,second
- B:
second
,I have resolved!
andsecond
,I have resolved!
- C:
I have resolved!
,second
andsecond
,I have resolved!
- D:
second
,I have resolved!
andI have resolved!
,second
答案
答案:D
有了 promise,我們通常會(huì)說:當(dāng)我想要調(diào)用某個(gè)方法,但是由于它可能需要一段時(shí)間,因此暫時(shí)將它放在一邊。只有當(dāng)某個(gè)值被 resolved/rejected,并且執(zhí)行棧為空時(shí)才使用這個(gè)值。
我們可以在async
函數(shù)中通過.then
和await
關(guān)鍵字獲得該值。盡管我們可以通過.then
和await
獲得 promise 的價(jià)值,但是它們的工作方式有所不同。
在 firstFunction
中,當(dāng)運(yùn)行到myPromise
方法時(shí)我們將其放在一邊,即 promise 進(jìn)入微任務(wù)隊(duì)列,其他后面的代碼(console.log('second')
)照常運(yùn)行,因此second
被打印出,firstFunction
方法到此執(zhí)行完畢,執(zhí)行棧中宏任務(wù)隊(duì)列被清空,此時(shí)開始執(zhí)行微任務(wù)隊(duì)列中的任務(wù),I have resolved
被打印出。
在secondFunction
方法中,我們通過await
關(guān)鍵字,暫停了后面代碼的執(zhí)行,直到異步函數(shù)的值被解析才開始后面代碼的執(zhí)行。這意味著,它會(huì)等著直到 myPromise
以值I have resolved
被解決之后,下一行second
才開始執(zhí)行。
103. 輸出什么?
const set = new Set() set.add(1) set.add("Lydia") set.add({ name: "Lydia" }) for (let item of set) { console.log(item + 2) }
- A:
3
,NaN
,NaN
- B:
3
,7
,NaN
- C:
3
,Lydia2
,[Object object]2
- D:
"12"
,Lydia2
,[Object object]2
答案
答案:C
“+”運(yùn)算符不僅用于添加數(shù)值,還可以使用它來連接字符串。每當(dāng) JavaScript 引擎發(fā)現(xiàn)一個(gè)或多個(gè)值不是數(shù)字時(shí),就會(huì)將數(shù)字強(qiáng)制為字符串。
第一個(gè)是數(shù)字 1。1 + 2 返回?cái)?shù)字 3。
但是,第二個(gè)是字符串“Lydia”。 “Lydia”是一個(gè)字符串,2 是一個(gè)數(shù)字:2 被強(qiáng)制轉(zhuǎn)換為字符串。 “Lydia”和“2”被連接起來,產(chǎn)生字符串“Lydia2”。
{name:“Lydia”}
是一個(gè)對(duì)象。數(shù)字和對(duì)象都不是字符串,因此將二者都字符串化。每當(dāng)我們對(duì)常規(guī)對(duì)象進(jìn)行字符串化時(shí),它就會(huì)變成[Object object]
。與“2”串聯(lián)的“ [Object object]”成為“[Object object]2”。
104. 結(jié)果是什么?
Promise.resolve(5)
- A:
5
- B:
Promise {<pending>: 5}
- C:
Promise {<fulfilled>: 5}
- D:
Error
答案
答案:C
我們可以將我們想要的任何類型的值傳遞Promise.resolve
,無論是否promise
。該方法本身返回帶有已解析值的Promise
()。如果您傳遞常規(guī)函數(shù),它將是具有常規(guī)值的已解決promise
。如果你通過了 promise,它將是一個(gè)已經(jīng) resolved 的且?guī)в袀鞯闹档?promise。
上述情況,我們傳了數(shù)字 5,因此返回一個(gè) resolved 狀態(tài)的 promise,resolve 值為5
105. 輸出什么?
function compareMembers(person1, person2 = person) { if (person1 !== person2) { console.log("Not the same!") } else { console.log("They are the same!") } } const person = { name: "Lydia" } compareMembers(person)
- A:
Not the same!
- B:
They are the same!
- C:
ReferenceError
- D:
SyntaxError
答案
答案:B
對(duì)象通過引用傳遞。當(dāng)我們檢查對(duì)象的嚴(yán)格相等性(===)時(shí),我們正在比較它們的引用。
我們將“person2”的默認(rèn)值設(shè)置為“person”對(duì)象,并將“person”對(duì)象作為“person1”的值傳遞。
這意味著兩個(gè)值都引用內(nèi)存中的同一位置,因此它們是相等的。
運(yùn)行“else”語句中的代碼塊,并記錄They are the same!
。
106. 輸出什么?
const colorConfig = { red: true, blue: false, green: true, black: true, yellow: false, } const colors = ["pink", "red", "blue"] console.log(colorConfig.colors[1])
- A:
true
- B:
false
- C:
undefined
- D:
TypeError
答案
答案:D
在 JavaScript 中,我們有兩種訪問對(duì)象屬性的方法:括號(hào)表示法或點(diǎn)表示法。在此示例中,我們使用點(diǎn)表示法(colorConfig.colors
)代替括號(hào)表示法(colorConfig [“colors”]
)。
使用點(diǎn)表示法,JavaScript 會(huì)嘗試使用該確切名稱在對(duì)象上查找屬性。在此示例中,JavaScript 嘗試在 colorConfig 對(duì)象上找到名為 colors 的屬性。沒有名為“colors”的屬性,因此返回“undefined”。 然后,我們嘗試使用[1]
訪問第一個(gè)元素的值。我們無法對(duì)未定義的值執(zhí)行此操作,因此會(huì)拋出Cannot read property '1' of undefined
。
JavaScript 解釋(或取消裝箱)語句。當(dāng)我們使用方括號(hào)表示法時(shí),它會(huì)看到第一個(gè)左方括號(hào)[
并一直進(jìn)行下去,直到找到右方括號(hào)]
。只有這樣,它才會(huì)評(píng)估該語句。如果我們使用了 colorConfig [colors [1]],它將返回 colorConfig 對(duì)象上 red 屬性的值。
107. 輸出什么?
console.log('??' === '??')
- A:
true
- B:
false
答案
答案:A
在內(nèi)部,表情符號(hào)是 unicode。heat 表情符號(hào)的 unicode 是“U + 2764 U + FE0F”
。對(duì)于相同的表情符號(hào),它們總是相同的,因此我們將兩個(gè)相等的字符串相互比較,這將返回 true。
相關(guān)文章
微信小程序以ssm做后臺(tái)開發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了微信小程序以ssm做后臺(tái)開發(fā)的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04讓你的博文自動(dòng)帶上縮址的實(shí)現(xiàn)代碼,方便發(fā)到微博客上
添加以下代碼到你的博客中: (呵呵,抄襲至lulu Studio http://s8.hk/0itw)2010-12-12Flutter 超實(shí)用簡(jiǎn)單菜單彈出框 PopupMenuButton功能
這篇文章主要介紹了Flutter 超實(shí)用簡(jiǎn)單菜單彈出框 PopupMenuButton功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08javascript?實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel兩種方式
這篇文章主要介紹了javascript?實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel兩種方式,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參一下2022-07-07微信公眾號(hào)平臺(tái)接口開發(fā) 菜單管理的實(shí)現(xiàn)
這篇文章主要介紹了微信公眾號(hào)平臺(tái)接口開發(fā) 菜單管理的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08javascript實(shí)現(xiàn)PC網(wǎng)頁(yè)里的拖拽效果
這篇文章主要介紹了javascript實(shí)現(xiàn)PC網(wǎng)頁(yè)里的拖拽效果的相關(guān)資料,需要的朋友可以參考下2016-03-03JavaScript實(shí)現(xiàn)復(fù)制圖片功能的方法示例
本文主要介紹了在JavaScript中實(shí)現(xiàn)復(fù)制圖片的方法,先介紹了實(shí)現(xiàn)復(fù)制的前置知識(shí),包括傳統(tǒng)的 execCommand 方法及其優(yōu)缺點(diǎn)和 Clipboard API,然后詳細(xì)闡述了如何將不同形式的圖片轉(zhuǎn)化為blob對(duì)象并通過Clipboard API實(shí)現(xiàn)復(fù)制,還提及了兼容性問題及預(yù)覽、下載圖片的實(shí)現(xiàn)思路2025-03-03