10個(gè)JavaScript筆試題的問答是怎樣的，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十余年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如木屋等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致贊美。

作為JavaScript開發(fā)人員，我們可以挑戰(zhàn)自己成長(zhǎng)的一個(gè)方法就是用刷題來練習(xí)!下面的問題旨在具有挑戰(zhàn)性和啟發(fā)性。如果你確切地知道如何回答每一個(gè)問題，那很好，但如果你答錯(cuò)了，并知道為什么答錯(cuò)了，我認(rèn)為那就更好了!

問題1：數(shù)組排序比較

考慮以下數(shù)組。在不同的排序條件中會(huì)輸出什么?

const arr1 = ['a', 'b', 'c']; const arr2 = ['b', 'c', 'a'];  console.log(   arr1.sort() === arr1,   arr2.sort() == arr2,   arr1.sort() === arr2.sort() );

答案: true, true, false

這里有幾個(gè)概念在起作用。首先，數(shù)組 sort 方法對(duì)原始數(shù)組進(jìn)行排序，并返回對(duì)該數(shù)組的引用。這意味著在編寫 arr2.sort() 時(shí)，將對(duì) arr2  數(shù)組對(duì)象進(jìn)行排序。

事實(shí)證明，在比較對(duì)象時(shí)，數(shù)組的排序順序并不重要。由于 arr1.sort() 和 arr1 指向內(nèi)存中的同一對(duì)象，因此第一個(gè)相等測(cè)試返回  true。第二個(gè)比較也是如此：arr2.sort() 和 arr2 指向內(nèi)存中的同一對(duì)象。

在第三個(gè)測(cè)試中，arr1.sort() 和 arr2.sort() 的排序順序相同;但是，它們指向內(nèi)存中的不同對(duì)象。因此，第三項(xiàng)測(cè)試的結(jié)果為  false。

問題2：set 一組對(duì)象

考慮下面的對(duì)象 Set 集合，它們散布到一個(gè)新的數(shù)組中。會(huì)輸出什么?

const mySet = new Set([{ a: 1 }, { a: 1 }]);  const result = [...mySet];  console.log(result);

答案：[{a: 1}, {a: 1}]。

盡管 Set 對(duì)象確實(shí)會(huì)刪除重復(fù)項(xiàng)，但是盡管具有相同的鍵值對(duì)，但我們使用 Set 創(chuàng)建的兩個(gè)值是對(duì)內(nèi)存中不同對(duì)象的引用。這與 {a:1} ===  {a:1} 為 false 的原因相同。

應(yīng)該注意的是，如果集合是使用對(duì)象變量創(chuàng)建的，例如 obj = {a:1}，則 new Set([obj，obj])  將只有一個(gè)元素，因?yàn)閿?shù)組中的兩個(gè)元素都引用內(nèi)存中的同一對(duì)象。

問題3：深度對(duì)象可變性

考慮下面這個(gè)代表用戶Joe和他的狗Buttercup的對(duì)象。我們使用 Object.freeze  保存我們的對(duì)象，然后嘗試更改Buttercup的名稱。會(huì)輸出什么?

const user = {   name: 'Joe',   age: 25,   pet: {     type: 'dog',     name: 'Buttercup'   } };  Object.freeze(user);  user.pet.name = 'Daffodil';  console.log(user.pet.name);

答案：Daffodil。

Object.freeze 將對(duì)對(duì)象執(zhí)行淺層凍結(jié)，但不會(huì)保護(hù)深層屬性不被突變。在此示例中，我們將無法更改user.age，但對(duì) user.pet.name  進(jìn)行更改不會(huì)有問題。如果我們認(rèn)為需要保護(hù)某個(gè)對(duì)象以免其被“徹底破壞”，則可以遞歸應(yīng)用 Object.freeze 或使用現(xiàn)有的“deep  freeze”庫(kù)。

問題4：原型繼承

在這個(gè)問題中，我們有一個(gè) Dog 構(gòu)造函數(shù)，我們的 dog 顯然知道說話的命令。當(dāng)我們要求Pogo講話時(shí)，以下示例中將會(huì)輸出什么?

function Dog(name) {   this.name = name;   this.speak = function() {     return 'woof';   }; }  const dog = new Dog('Pogo');  Dog.prototype.speak = function() {   return 'arf'; };  console.log(dog.speak());

答案：woof。

每次創(chuàng)建一個(gè)新的 Dog 實(shí)例時(shí)，我們都會(huì)將該實(shí)例的 speak 屬性設(shè)置為一個(gè)返回字符串 woof 的函數(shù)。由于每次創(chuàng)建新的 Dog  實(shí)例時(shí)都會(huì)設(shè)置該字段，因此解釋器無需再向上尋找原型鏈來查找 speak 屬性。結(jié)果，永遠(yuǎn)不會(huì)使用 Dog.prototype.speak 上的 speak  方法。

問題5：Promise.all Resolve Order

在這個(gè)問題中，我們有一個(gè) timer 函數(shù)，該函數(shù)返回一個(gè) Promise，該P(yáng)romise將在隨機(jī)時(shí)間后解析。我們使用 Promise.all 解析  timers 數(shù)組。會(huì)輸出什么，還是隨機(jī)的?

const timer = a => {   return new Promise(res =>     setTimeout(() => {       res(a);     }, Math.random() * 100)   ); };  const all = Promise.all([   timer('first'),   timer('second') ]).then(data => console.log(data));

答案： ["first", "second"]。

Promise解決的順序與 Promise.all 無關(guān)。我們可以可靠地指望它們以數(shù)組參數(shù)中提供的相同順序返回。

問題6：Reduce Math

下面的代碼輸出什么?

const arr = [   x => x * 1,   x => x * 2,   x => x * 3,   x => x * 4 ];  console.log(arr.reduce((agg, el) => agg + el(agg), 1));

答案：120。

使用 Array#reduce 時(shí)，聚合器的初始值(在這里稱為 agg)在第二個(gè)參數(shù)中給出。在這種情況下，就是 1。然后，我們可以如下迭代函數(shù)：

• 1 +1 * 1 = 2(下一次迭代中聚合器的值)

• 2 + 2 * 2 = 6(下一次迭代中聚合器的值)

• 6 + 6 * 3 = 24(下一次迭代中聚合器的值)

• 24 + 24 * 4 = 120(最終值)

因此，它是120!

問題7：短路通知

讓我們向用戶顯示一些通知!以下代碼段會(huì)輸出什么?

const notifications = 1;  console.log(   `You have ${notifications} notification${notifications !==     1 && 's'}` );

答案：“You have 1 notificationfalse”。

不幸的是，我們的短路評(píng)估將無法按此處的預(yù)期進(jìn)行：notifications!== 1 && 's' 評(píng)估為  false，這意味著我們實(shí)際上將輸出 You have 1  notificationfalse。如果我們希望代碼段正常工作，則可以考慮條件運(yùn)算符：${notifications === 1 ? '' :  's'}。

問題8：Spread并重命名

考慮以下具有單個(gè)對(duì)象的數(shù)組。當(dāng)我們擴(kuò)展該數(shù)組并更改0索引對(duì)象上的 firstName 屬性時(shí)會(huì)發(fā)生什么?

const arr1 = [{ firstName: 'James' }]; const arr2 = [...arr1]; arr2[0].firstName = 'Jonah';  console.log(arr1);

答案：[{ firstName: "Jonah" }]。

Spread創(chuàng)建一個(gè)數(shù)組的淺層副本，這意味著 arr2 中包含的對(duì)象仍指向 arr1 對(duì)象指向的內(nèi)存中的同一對(duì)象。因此，在一個(gè)數(shù)組中更改對(duì)象的  firstName 屬性將通過另一個(gè)數(shù)組中的對(duì)象更改而反映出來。

問題9：數(shù)組方法綁定

在以下情況下會(huì)輸出什么?

const map = ['a', 'b', 'c'].map.bind([1, 2, 3]); map(el => console.log(el));

答案：1 2 3。

['a', 'b', 'c'].map，當(dāng)調(diào)用時(shí)，將調(diào)用 Array.prototype.map，其 this 值為 ['a', 'b',  'c']。但是，當(dāng)作為引用使用時(shí)，['a', 'b', 'c'].map 只是對(duì) Array.prototype.map 的引用，而不是調(diào)用。

Function.prototype.bind 將把函數(shù)的 this 綁定到第一個(gè)參數(shù)(在本例中是 [1, 2, 3])，用這樣的this 調(diào)用  Array.prototype.map 會(huì)導(dǎo)致這些項(xiàng)被迭代并記錄下來。

問題10：Set 唯一性和順序

在以下問題中，我們使用 Set 對(duì)象和spread語法創(chuàng)建一個(gè)新數(shù)組。輸出的內(nèi)容(考慮：項(xiàng)目被強(qiáng)制為唯一的嗎?它們是否已排序?)

const arr = [...new Set([3, 1, 2, 3, 4])]; console.log(arr.length, arr[2]);

答案：4 2。

Set 對(duì)象將強(qiáng)制唯一元素(集合中已經(jīng)存在的重復(fù)元素將被忽略)，但不會(huì)更改順序。所得的 arr 數(shù)組將為[3，1，2，4]，表示 arr.length 為  4 ，而 arr [2] (數(shù)組的第三個(gè)元素)為 2。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。