整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在前端面試時(shí)，Javascript的面試是必不可少的，之前看到一道關(guān)于Javascript預(yù)解析相關(guān)的面試題目，覺(jué)得很有意義，就在這里講解一下，大家認(rèn)真看下，沒(méi)準(zhǔn)在你面試的時(shí)候就遇到了呢。
Javascript
在講解下面的題目之前，我們先說(shuō)下文章中涉及的主要知識(shí)點(diǎn)，掌握了下面的知識(shí)點(diǎn)后，看了文章中的題目就清楚了。
變量提升，在JavaScript中定義的變量聲明會(huì)提前到函數(shù)頂部。
函數(shù)聲明優(yōu)先級(jí)大于變量聲明。
函數(shù)表達(dá)式不會(huì)產(chǎn)生變量提升。
記住上面的知識(shí)點(diǎn)后，我們先來(lái)看題目1。
題目1
我們一步步分析會(huì)得出什么樣的結(jié)果。
在第三行中定義了var a=3，同時(shí)又在下面聲明了一個(gè)函數(shù)a，兩者都會(huì)進(jìn)行變量提升，由于函數(shù)聲明會(huì)優(yōu)于變量聲明，因此a實(shí)際定義為一個(gè)函數(shù)function，所以第一行代碼會(huì)輸出function a(){alert(10)}。
接下來(lái)在第二行，執(zhí)行了a函數(shù)，輸出10。
第三行代碼，又對(duì)a執(zhí)行了賦值操作，這時(shí)a不再是一個(gè)函數(shù)，而是數(shù)字值3，因此在第7行代碼中會(huì)輸出3。
在第八行代碼中又對(duì)a值進(jìn)行了修改，為數(shù)字6，在第九行中進(jìn)行調(diào)用，但是此時(shí)a已經(jīng)不指向函數(shù)，此時(shí)再執(zhí)行a方法，會(huì)報(bào)錯(cuò)。
所以上面題目的整體結(jié)果如下圖所示。
題目1結(jié)果
接下來(lái)我們對(duì)題目1稍作改動(dòng)，將其中的函數(shù)聲明變成函數(shù)表達(dá)式類(lèi)型，得到題目2，代碼如下所示。
題目2
按照之前的理論，只有函數(shù)聲明才可以進(jìn)行變量提升，而函數(shù)表達(dá)式不能進(jìn)行變量提升。
所以題目2中，只有var a = 3;才進(jìn)行了變量提升，在執(zhí)行第一行代碼時(shí)，實(shí)際a只進(jìn)行了聲明，并未賦值，因此會(huì)輸出undefined。
在執(zhí)行第二行代碼時(shí)，由于a為undefined，再調(diào)用a()方法，會(huì)報(bào)錯(cuò)。
因此題目2的結(jié)果如下圖所示。
題目2結(jié)果
題目3的代碼比較簡(jiǎn)單，如下所示。
題目3
在執(zhí)行aa方法后，在函數(shù)中會(huì)輸出a的值，由于變量提升只會(huì)發(fā)生在函數(shù)內(nèi)部，因此a變量的聲明會(huì)提到aa方法的頂部，然后執(zhí)行輸出，又由于作用域的限制，會(huì)優(yōu)先輸出函數(shù)內(nèi)部的變量a，而此時(shí)a還未賦值，因此輸出undefined。
題目4的代碼如下所示。
題目4
題目4中，會(huì)首先調(diào)用aa(5);傳入一個(gè)參數(shù)5，此時(shí)執(zhí)行到函數(shù)內(nèi)部，雖然也會(huì)產(chǎn)生變量提升，但是其優(yōu)先級(jí)要低于傳遞的參數(shù)，因此a會(huì)優(yōu)先賦值為5，所以會(huì)先輸出5。
在外面的輸出語(yǔ)句中，因?yàn)樽饔糜虻膯?wèn)題，只能訪問(wèn)到外部的全局變量a=0，因此會(huì)輸出0。
所以題目4的結(jié)果是輸出5，0。
題目5的代碼如下所示。
題目5
題目5相比于題目4，只是去掉了aa方法中的var a=3;前面的var。
在aa方法中雖然對(duì)a的值進(jìn)行了修改，但實(shí)際是修改了函數(shù)傳遞的參數(shù)a，而不是外面全局變量a，因此對(duì)實(shí)際輸出并沒(méi)有影響。
題目5的結(jié)果輸出5，0。
題目6代碼如下所示。
題目6
題目6中，在執(zhí)行aa()方法時(shí)，傳入了一個(gè)參數(shù)a，但是參數(shù)的優(yōu)先級(jí)會(huì)高于變量聲明的優(yōu)先級(jí)，所以雖然產(chǎn)生了變量提升，但是會(huì)通過(guò)參數(shù)優(yōu)先賦值，因此首先a=5，第一個(gè)輸出為5。
然后執(zhí)行代碼a=3，修改a的值，在第二個(gè)輸出時(shí)，就輸出3。
題目6的結(jié)果是5，3。
題目7代碼如下所示。
題目7
題目7中，定義了一個(gè)函數(shù)aa，接收一個(gè)參數(shù)，但是在調(diào)用時(shí)并未傳入?yún)?shù)，因此在執(zhí)行第一個(gè)輸出時(shí)，a未定義，因此輸出undefined。
需要注意的是，在aa方法中并沒(méi)有變量提升操作，因?yàn)閍只是形參而已。
然后a=3，修改的也是形參a的值，在第二個(gè)輸出時(shí)，輸出的實(shí)際是形參a的值。
最后一行語(yǔ)句輸出a時(shí)，輸出的是全局變量a的值，雖然在aa方法中有修改a的值，但是實(shí)際修改的是形參的值，不是全局變量a的值，因此全局變量a的值并沒(méi)有發(fā)生變化，最后輸出0。
題目7的結(jié)果是undefined，3，0。
今天文章中的所有題目都講解完畢了，大家都掌握了嗎？如果上面的題目都會(huì)做的話，應(yīng)該對(duì)JavaScript預(yù)解析，變量提升等概念掌握的差不多了。
擊右上方紅色按鈕關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識(shí)，搞懂一個(gè)問(wèn)題！
有關(guān)CSS布局的重要性，這里就不在多說(shuō)了，每次在面試的時(shí)候，我都會(huì)問(wèn)幾個(gè)與CSS布局相關(guān)且實(shí)用的問(wèn)題，因?yàn)檫@是我們前端最重要的基礎(chǔ)知識(shí)點(diǎn)之一。而在所有的問(wèn)題中，問(wèn)的最多的估計(jì)就是居中了。正如今天要說(shuō)的一道面試題。如下
多種方式實(shí)現(xiàn)未知或者已知寬度的垂直水平居中？
這道題大家應(yīng)該都遇到過(guò)，或多或少也知道幾種答案，不管怎么樣，今天就當(dāng)溫習(xí)或者復(fù)習(xí)也好，來(lái)參考一下下面這四種解決是否也是你心中的答案。
. 下面代碼的輸出是什么?
function* generator(i) {
yield i;
yield i * 2;
}
const gen = generator(10);
console.log(gen.next().value);
console.log(gen.next().value);
答案: C
一般的函數(shù)在執(zhí)行之后是不能中途停下的。但是，生成器函數(shù)卻可以中途“停下”，之后可以再?gòu)耐Ｏ碌牡胤嚼^續(xù)。當(dāng)生成器遇到 yield關(guān)鍵字的時(shí)候，會(huì)生成 yield后面的值。注意，生成器在這種情況下不 返回(return )值，而是 生成 (yield)值。
首先，我們用 10作為參數(shù) i來(lái)初始化生成器函數(shù)。然后使用 next()方法一步步執(zhí)行生成器。第一次執(zhí)行生成器的時(shí)候， i的值為 10，遇到第一個(gè) yield關(guān)鍵字，它要生成 i的值。此時(shí)，生成器“暫停”，生成了 10。
然后，我們?cè)賵?zhí)行 next()方法。生成器會(huì)從剛才暫停的地方繼續(xù)，這個(gè)時(shí)候 i還是 10。于是我們走到了第二個(gè) yield關(guān)鍵字處，這時(shí)候需要生成的值是 i*2， i為 10，那么此時(shí)生成的值便是 20。所以這道題的最終結(jié)果是 10,20。
2. 下面代碼的返回值是什么?
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));
答案: B
當(dāng)我們向 Promise.race方法中傳入多個(gè) Promise時(shí)，會(huì)進(jìn)行 優(yōu)先 解析。在這個(gè)例子中，我們用 setTimeout給 firstPromise和 secondPromise分別設(shè)定了500ms和100ms的定時(shí)器。這意味著 secondPromise會(huì)首先解析出字符串 two。那么此時(shí) res參數(shù)即為 two，是為輸出結(jié)果。
3. 下面代碼的輸出是什么?
let person = { name: "Lydia" };
const members = [person];
person = null;
console.log(members);
答案: D
首先我們聲明了一個(gè)擁有 name屬性的對(duì)象 person。
然后我們又聲明了一個(gè)變量 members. 將首個(gè)元素賦值為變量 person。 當(dāng)設(shè)置兩個(gè)對(duì)象彼此相等時(shí)，它們會(huì)通過(guò) 引用 進(jìn)行交互。但是當(dāng)你將引用從一個(gè)變量分配至另一個(gè)變量時(shí)，其實(shí)只是執(zhí)行了一個(gè) 復(fù)制 操作。（注意一點(diǎn)，他們的引用 并不相同!）
接下來(lái)我們讓 person等于 null。
我們沒(méi)有修改數(shù)組第一個(gè)元素的值，而只是修改了變量 person的值,因?yàn)樵兀◤?fù)制而來(lái)）的引用與 person不同。members的第一個(gè)元素仍然保持著對(duì)原始對(duì)象的引用。當(dāng)我們輸出 members數(shù)組時(shí)，第一個(gè)元素會(huì)將引用的對(duì)象打印出來(lái)。
4. 下面代碼的輸出是什么?
const person = {
name: "Lydia",
age: 21
};
for (const item in person) {
console.log(item);
}
答案: B
在 for-in循環(huán)中,我們可以通過(guò)對(duì)象的key來(lái)進(jìn)行迭代,也就是這里的 name和 age。在底層，對(duì)象的key都是字符串（如果他們不是Symbol的話）。在每次循環(huán)中，我們將 item設(shè)定為當(dāng)前遍歷到的key.所以一開(kāi)始， item是 name，之后 item輸出的則是 age。
5. 下面代碼的輸出是什么?
console.log(3 + 4 + "5");
答案: B
當(dāng)所有運(yùn)算符的 優(yōu)先級(jí) 相同時(shí)，計(jì)算表達(dá)式需要確定運(yùn)算符的結(jié)合順序，即從右到左還是從左往右。在這個(gè)例子中，我們只有一類(lèi)運(yùn)算符 +，對(duì)于加法來(lái)說(shuō)，結(jié)合順序就是從左到右。
3+4首先計(jì)算，得到數(shù)字 7.
由于類(lèi)型的強(qiáng)制轉(zhuǎn)換， 7+'5'的結(jié)果是 "75". JavaScript將 7轉(zhuǎn)換成了字符串，可以參考問(wèn)題15.我們可以用 +號(hào)把兩個(gè)字符串連接起來(lái)。"7"+"5" 就得到了 "75".
6. num的值是什么?
const num = parseInt("7*6", 10);
答案: C
只返回了字符串中第一個(gè)字母. 設(shè)定了 進(jìn)制 后 (也就是第二個(gè)參數(shù)，指定需要解析的數(shù)字是什么進(jìn)制: 十進(jìn)制、十六機(jī)制、八進(jìn)制、二進(jìn)制等等……), parseInt 檢查字符串中的字符是否合法. 一旦遇到一個(gè)在指定進(jìn)制中不合法的字符后，立即停止解析并且忽略后面所有的字符。
*就是不合法的數(shù)字字符。所以只解析到 "7"，并將其解析為十進(jìn)制的 7. num的值即為 7.
7. 下面代碼的輸出是什么?
[1, 2, 3].map(num => {
if (typeof num === "number") return;
return num * 2;
});
答案: C
對(duì)數(shù)組進(jìn)行映射的時(shí)候, num就是當(dāng)前循環(huán)到的元素. 在這個(gè)例子中，所有的映射都是number類(lèi)型，所以if中的判斷 typeofnum==="number"結(jié)果都是 true.map函數(shù)創(chuàng)建了新數(shù)組并且將函數(shù)的返回值插入數(shù)組。
但是，沒(méi)有任何值返回。當(dāng)函數(shù)沒(méi)有返回任何值時(shí)，即默認(rèn)返回 undefined.對(duì)數(shù)組中的每一個(gè)元素來(lái)說(shuō)，函數(shù)塊都得到了這個(gè)返回值，所以結(jié)果中每一個(gè)元素都是 undefined.
8. 下面代碼輸出的是什么?
function getInfo(member, year) {
member.name = "Lydia";
year = "1998";
}
const person = { name: "Sarah" };
const birthYear = "1997";
getInfo(person, birthYear);
console.log(person, birthYear);
答案: A
普通參數(shù)都是 值 傳遞的，而對(duì)象則不同，是 引用 傳遞。所以說(shuō)， birthYear是值傳遞，因?yàn)樗莻€(gè)字符串而不是對(duì)象。當(dāng)我們對(duì)參數(shù)進(jìn)行值傳遞時(shí)，會(huì)創(chuàng)建一份該值的 復(fù)制 。（可以參考問(wèn)題46）
變量 birthYear有一個(gè)對(duì) "1997"的引用，而傳入的參數(shù)也有一個(gè)對(duì) "1997"的引用，但二者的引用并不相同。當(dāng)我們通過(guò)給 year賦值 "1998"來(lái)更新 year的值的時(shí)候我們只是更新了 year（的引用）。此時(shí) birthYear仍然是 "1997".
而 person是個(gè)對(duì)象。參數(shù) member引用與之 相同的 對(duì)象。當(dāng)我們修改 member所引用對(duì)象的屬性時(shí), person的相應(yīng)屬性也被修改了,因?yàn)樗麄円昧讼嗤膶?duì)象. person的 name屬性也變成了 "Lydia".
9. 下面代碼的輸出是什么?
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();
答案: D
通過(guò) throw語(yǔ)句，我么可以創(chuàng)建自定義錯(cuò)誤。而通過(guò)它，我們可以拋出異常。異常可以是一個(gè)字符串, 一個(gè) 數(shù)字, 一個(gè) 布爾類(lèi)型 或者是一個(gè) 對(duì)象。在本例中，我們的異常是字符串 'Hello world'.
通過(guò) catch語(yǔ)句，我們可以設(shè)定當(dāng) try語(yǔ)句塊中拋出異常后應(yīng)該做什么處理。在本例中拋出的異常是字符串 'Hello world'. e就是這個(gè)字符串，因此被輸出。最終結(jié)果就是 'Oh an error: Hello world'.
10. 下面代碼的輸出是什么?
function Car() {
this.make = "Lamborghini";
return { make: "Maserati" };
}
const myCar = new Car();
console.log(myCar.make);
答案: B
返回屬性的時(shí)候，屬性的值等于 返回的 值，而不是構(gòu)造函數(shù)中設(shè)定的值。我們返回了字符串"Maserati"，所以 myCar.make等于 "Maserati".
11. 下面代碼的輸出是什么?
(() => {
let x = (y = 10);
})();
console.log(typeof x);
console.log(typeof y);
答案: A
letx=y=10; 是下面這個(gè)表達(dá)式的縮寫(xiě):
y = 10; let x = y;
我們?cè)O(shè)定 y等于 10時(shí),我們實(shí)際上增加了一個(gè)屬性 y給全局對(duì)象(瀏覽器里的 window, Nodejs里的 global)。在瀏覽器中， window.y等于 10.
然后我們聲明了變量 x等于 y,也是 10.但變量是使用 let聲明的，它只作用于 塊級(jí)作用域, 僅在聲明它的塊中有效；就是案例中的立即調(diào)用表達(dá)式(IIFE)。使用 typeof操作符時(shí), 操作值 x沒(méi)有被定義：因?yàn)槲覀冊(cè)?x聲明塊的外部，無(wú)法調(diào)用它。這就意味著 x未定義。未分配或是未聲明的變量類(lèi)型為 "undefined". console.log(typeofx)返回 "undefined".
而我們創(chuàng)建了全局變量 y，并且設(shè)定 y等于 10.這個(gè)值在我們的代碼各處都訪問(wèn)的到。y已經(jīng)被定義了，而且有一個(gè) "number"類(lèi)型的值。console.log(typeofy)返回 "number".
12. 下面代碼的輸出是什么?
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
我們可以用 delete關(guān)鍵字刪除對(duì)象的屬性，對(duì)原型也是適用的。刪除了原型的屬性后，該屬性在原型鏈上就不可用了。在本例中，函數(shù) bark在執(zhí)行了 deleteDog.prototype.bark后不可用, 然而后面的代碼還在調(diào)用它。
當(dāng)我們嘗試調(diào)用一個(gè)不存在的函數(shù)時(shí) TypeError異常會(huì)被拋出。在本例中就是 TypeError:pet.barkisnotafunction，因?yàn)?pet.bark是 undefined.
13. 下面代碼的輸出是什么?
const set = new Set([1, 1, 2, 3, 4]); console.log(set);
答案: D
Set對(duì)象手機(jī) 獨(dú)一無(wú)二 的值：也就是說(shuō)同一個(gè)值在其中僅出現(xiàn)一次。
我們傳入了數(shù)組 [1,1,2,3,4]，他有一個(gè)重復(fù)值 1.以為一個(gè)集合里不能有兩個(gè)重復(fù)的值，其中一個(gè)就被移除了。所以結(jié)果是 {1,2,3,4}.
14. 下面代碼的輸出是什么?
// counter.js let counter = 10; export default counter;
// index.js import myCounter from "./counter"; myCounter += 1; console.log(myCounter);
答案: C
引入的模塊是 只讀 的: 你不能修改引入的模塊。只有導(dǎo)出他們的模塊才能修改其值。
當(dāng)我們給 myCounter增加一個(gè)值的時(shí)候會(huì)拋出一個(gè)異常：myCounter是只讀的，不能被修改。
15. 下面代碼的輸出是什么?
const name = "Lydia"; age = 21; console.log(delete name); console.log(delete age);
答案: A
delete操作符返回一個(gè)布爾值：true指刪除成功，否則返回 false. 但是通過(guò) var, const或let 關(guān)鍵字聲明的變量無(wú)法用 delete 操作符來(lái)刪除。
name變量由 const關(guān)鍵字聲明，所以刪除不成功:返回 false. 而我們?cè)O(shè)定 age等于 21時(shí),我們實(shí)際上添加了一個(gè)名為 age的屬性給全局對(duì)象。對(duì)象中的屬性是可以刪除的，全局對(duì)象也是如此，所以 deleteage返回 true.
16. 下面代碼的輸出是什么?
const numbers = [1, 2, 3, 4, 5]; const [y] = numbers; console.log(y);
答案: C
我們可以通過(guò)解構(gòu)賦值來(lái)解析來(lái)自對(duì)象的數(shù)組或?qū)傩缘闹担热缯f(shuō)：
[a, b] = [1, 2];
a的值現(xiàn)在是 1， b的值現(xiàn)在是 2.而在題目中，我們是這么做的:
[y] = [1, 2, 3, 4, 5];
也就是說(shuō)， y等于數(shù)組的第一個(gè)值就是數(shù)字 1.我們輸出 y， 返回 1.
17. 下面代碼的輸出是什么?
const user = { name: "Lydia", age: 21 };
const admin = { admin: true, ...user };
console.log(admin);
答案: B
擴(kuò)展運(yùn)算符 ...為對(duì)象的組合提供了可能。你可以復(fù)制對(duì)象中的鍵值對(duì)，然后把它們加到另一個(gè)對(duì)象里去。在本例中，我們復(fù)制了 user對(duì)象鍵值對(duì)，然后把它們加入到 admin對(duì)象中。admin對(duì)象就擁有了這些鍵值對(duì)，所以結(jié)果為 {admin:true,name:"Lydia",age:21}.
18. 下面代碼的輸出是什么?
const person = { name: "Lydia" };
Object.defineProperty(person, "age", { value: 21 });
console.log(person);
console.log(Object.keys(person));
答案: B
通過(guò) defineProperty方法，我們可以給對(duì)象添加一個(gè)新屬性，或者修改已經(jīng)存在的屬性。而我們使用 defineProperty方法給對(duì)象添加了一個(gè)屬性之后，屬性默認(rèn)為 不可枚舉(not enumerable). Object.keys方法僅返回對(duì)象中 可枚舉(enumerable) 的屬性，因此只剩下了 "name".
用 defineProperty方法添加的屬性默認(rèn)不可變。你可以通過(guò) writable, configurable 和 enumerable屬性來(lái)改變這一行為。這樣的話， 相比于自己添加的屬性， defineProperty方法添加的屬性有了更多的控制權(quán)。
19. 下面代碼的輸出是什么?
const settings = {
username: "lydiahallie",
level: 19,
health: 90
};
const data = JSON.stringify(settings, ["level", "health"]);
console.log(data);
答案: A
JSON.stringify的第二個(gè)參數(shù)是 替代者(replacer). 替代者(replacer)可以是個(gè)函數(shù)或數(shù)組，用以控制哪些值如何被轉(zhuǎn)換為字符串。
如果替代者(replacer)是個(gè) 數(shù)組 ，那么就只有包含在數(shù)組中的屬性將會(huì)被轉(zhuǎn)化為字符串。在本例中，只有名為 "level" 和 "health" 的屬性被包括進(jìn)來(lái)， "username"則被排除在外。data 就等于 "{"level":19, "health":90}".
而如果替代者(replacer)是個(gè) 函數(shù)，這個(gè)函數(shù)將被對(duì)象的每個(gè)屬性都調(diào)用一遍。函數(shù)返回的值會(huì)成為這個(gè)屬性的值，最終體現(xiàn)在轉(zhuǎn)化后的JSON字符串中（譯者注：Chrome下，經(jīng)過(guò)實(shí)驗(yàn)，如果所有屬性均返回同一個(gè)值的時(shí)候有異常，會(huì)直接將返回值作為結(jié)果輸出而不會(huì)輸出JSON字符串），而如果返回值為 undefined，則該屬性會(huì)被排除在外。
20. 下面代碼的輸出是什么?
let num = 10; const increaseNumber = () => num++; const increasePassedNumber = number => number++; const num1 = increaseNumber(); const num2 = increasePassedNumber(num1); console.log(num1); console.log(num2);
答案: A
一元操作符 ++ 先返回 操作值, 再累加 操作值。num1的值是 10, 因?yàn)?increaseNumber函數(shù)首先返回 num的值，也就是 10，隨后再進(jìn)行 num的累加。
num2是 10因?yàn)槲覀儗?num1傳入 increasePassedNumber. number等于 10（ num1的值。同樣道理， ++ 先返回 操作值, 再累加 操作值。） number是 10，所以 num2也是 10.
21. 下面代碼輸出什么?
const value = { number: 10 };
const multiply = (x = { ...value }) => {
console.log(x.number *= 2);
};
multiply();
multiply();
multiply(value);
multiply(value);
答案: C
在ES6中，我們可以使用默認(rèn)值初始化參數(shù)。如果沒(méi)有給函數(shù)傳參，或者傳的參值為 "undefined" ，那么參數(shù)的值將是默認(rèn)值。上述例子中，我們將 value 對(duì)象進(jìn)行了解構(gòu)并傳到一個(gè)新對(duì)象中，因此 x 的默認(rèn)值為 {number：10} 。
默認(rèn)參數(shù)在調(diào)用時(shí)才會(huì)進(jìn)行計(jì)算，每次調(diào)用函數(shù)時(shí)，都會(huì)創(chuàng)建一個(gè)新的對(duì)象。我們前兩次調(diào)用 multiply 函數(shù)且不傳遞值，那么每一次 x 的默認(rèn)值都為 {number：10} ，因此打印出該數(shù)字的乘積值為 20。
第三次調(diào)用 multiply 時(shí)，我們傳遞了一個(gè)參數(shù)，即對(duì)象 value。*=運(yùn)算符實(shí)際上是 x.number=x.number*2的簡(jiǎn)寫(xiě)，我們修改了 x.number的值，并打印出值 20。
第四次，我們?cè)俅蝹鬟f value對(duì)象。x.number之前被修改為 20，所以 x.number*=2打印為 40。
22. 下面代碼輸出什么?
[1, 2, 3, 4].reduce((x, y) => console.log(x, y));
答案: D
reducer 函數(shù)接收4個(gè)參數(shù):
reducer 函數(shù)的返回值將會(huì)分配給累計(jì)器，該返回值在數(shù)組的每個(gè)迭代中被記住，并最后成為最終的單個(gè)結(jié)果值。
reducer 函數(shù)還有一個(gè)可選參數(shù) initialValue, 該參數(shù)將作為第一次調(diào)用回調(diào)函數(shù)時(shí)的第一個(gè)參數(shù)的值。如果沒(méi)有提供 initialValue，則將使用數(shù)組中的第一個(gè)元素。
在上述例子， reduce方法接收的第一個(gè)參數(shù)(Accumulator)是 x, 第二個(gè)參數(shù)(Current Value)是 y。
在第一次調(diào)用時(shí)，累加器 x為 1，當(dāng)前值 “y”為 2，打印出累加器和當(dāng)前值：1和 2。
例子中我們的回調(diào)函數(shù)沒(méi)有返回任何值，只是打印累加器的值和當(dāng)前值。如果函數(shù)沒(méi)有返回值，則默認(rèn)返回 undefined。在下一次調(diào)用時(shí)，累加器為 undefined，當(dāng)前值為“3”, 因此 undefined和 3被打印出。
在第四次調(diào)用時(shí)，回調(diào)函數(shù)依然沒(méi)有返回值。累加器再次為 undefined ，當(dāng)前值為“4”。undefined和 4被打印出。
23. 使用哪個(gè)構(gòu)造函數(shù)可以成功繼承 Dog類(lèi)?
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;
}
};
答案: B
在子類(lèi)中，在調(diào)用 super之前不能訪問(wèn)到 this關(guān)鍵字。如果這樣做，它將拋出一個(gè) ReferenceError：1和4將引發(fā)一個(gè)引用錯(cuò)誤。
使用 super關(guān)鍵字，需要用給定的參數(shù)來(lái)調(diào)用父類(lèi)的構(gòu)造函數(shù)。父類(lèi)的構(gòu)造函數(shù)接收 name參數(shù)，因此我們需要將 name傳遞給 super。
Labrador類(lèi)接收兩個(gè)參數(shù)， name參數(shù)是由于它繼承了 Dog， size作為 Labrador類(lèi)的額外屬性，它們都需要傳遞給 Labrador的構(gòu)造函數(shù)，因此使用構(gòu)造函數(shù)2正確完成。
24. 下面代碼輸出什么?
// 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;
答案: 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ì)被依次打印。
25. 下面代碼輸出什么?
console.log(Number(2) === Number(2))
console.log(Boolean(false) === Boolean(false))
console.log(Symbol('foo') === Symbol('foo'))
答案: 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。
26. 下面代碼輸出什么?
const name = "Lydia Hallie" console.log(name.padStart(13)) console.log(name.padStart(2))
答案: C
使用 padStart方法，我們可以在字符串的開(kāi)頭添加填充。傳遞給此方法的參數(shù)是字符串的總長(zhǎng)度（包含填充）。字符串 LydiaHallie的長(zhǎng)度為 12, 因此 name.padStart（13）在字符串的開(kāi)頭只會(huì)插入1（ 13-12=1）個(gè)空格。
如果傳遞給 padStart方法的參數(shù)小于字符串的長(zhǎng)度，則不會(huì)添加填充。
27. 下面代碼輸出什么?
console.log("" + "");
答案: A
使用 +運(yùn)算符，您可以連接字符串。上述情況，我們將字符串 “”與字符串 ”“連接起來(lái)，產(chǎn)生 ”“。
28. 如何能打印出 console.log語(yǔ)句后注釋掉的值？
function* startGame() {
const answer = yield "Do you love JavaScript?";
if (answer !== "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 ??
答案: C
generator函數(shù)在遇到 yield關(guān)鍵字時(shí)會(huì)“暫停”其執(zhí)行。首先，我們需要讓函數(shù)產(chǎn)生字符串Doyou loveJavaScript?，這可以通過(guò)調(diào)用 game.next().value來(lái)完成。上述函數(shù)的第一行就有一個(gè) yield關(guān)鍵字，那么運(yùn)行立即停止了， yield表達(dá)式本身沒(méi)有返回值，或者說(shuō)總是返回 undefined, 這意味著此時(shí)變量 answer 為 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í)變量 answer 被賦值為 "Yes"， if語(yǔ)句返回 false，所以 JavaScriptloves you back??被打印。
29. 下面代碼輸出什么?
console.log(String.raw`Hello\nworld`);
world
world
答案: C
String.raw函數(shù)是用來(lái)獲取一個(gè)模板字符串的原始字符串的，它返回一個(gè)字符串，其中忽略了轉(zhuǎn)義符（ \n， \v， \t等）。但反斜杠可能造成問(wèn)題，因?yàn)槟憧赡軙?huì)遇到下面這種類(lèi)似情況：
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`
它會(huì)忽略轉(zhuǎn)義字符并打印：C:\Documents\Projects\table.html
上述情況，字符串是 Hello\nworld被打印出。
30.下面代碼輸出什么?
async function getData() {
return await Promise.resolve("I made it!");
}
const data = getData();
console.log(data);
答案: C
異步函數(shù)始終返回一個(gè)promise。 await仍然需要等待promise的解決：當(dāng)我們調(diào)用 getData()并將其賦值給 data，此時(shí) data為 getData方法返回的一個(gè)掛起的promise，該promise并沒(méi)有解決。
如果我們想要訪問(wèn)已解決的值 "I made it!"，可以在 data上使用 .then()方法：
data.then(res=>console.log(res))
這樣將打印 "I made it!"
31. 下面代碼輸出什么?
function addToList(item, list) {
return list.push(item);
}
const result = addToList("apple", ["banana"]);
console.log(result);
答案: B
push()方法返回新數(shù)組的長(zhǎng)度。一開(kāi)始，數(shù)組包含一個(gè)元素（字符串 "banana"），長(zhǎng)度為1。 在數(shù)組中添加字符串 "apple"后，長(zhǎng)度變?yōu)?，并將從 addToList函數(shù)返回。
push方法修改原始數(shù)組，如果你想從函數(shù)返回?cái)?shù)組而不是數(shù)組長(zhǎng)度，那么應(yīng)該在push item之后返回 list。
關(guān)注+私信《資料》獲取！
感謝您的朗讀。想學(xué)習(xí)前端的小伙伴們可以關(guān)注+私信回復(fù)：【資料】已經(jīng)為大家準(zhǔn)備好最新的前端資料。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
