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

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

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

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

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

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

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

問題2：set 一組對象

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

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

const result = [...mySet];

console.log(result);

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

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

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

問題3：深度對象可變性

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

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

問題4：原型繼承

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

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

問題5：Promise.all Resolve Order

在這個問題中，我們有一個 timer 函數(shù)，該函數(shù)返回一個 Promise，該Promise將在隨機時間后解析。我們使用 Promise.all 解析 timers 數(shù)組。會輸出什么，還是隨機的？

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 時，聚合器的初始值（在這里稱為 agg）在第二個參數(shù)中給出。在這種情況下，就是 1。然后，我們可以如下迭代函數(shù)：

• 1 +1 * 1 = 2（下一次迭代中聚合器的值）
• 2 + 2 * 2 = 6（下一次迭代中聚合器的值）
• 6 + 6 * 3 = 24（下一次迭代中聚合器的值）
• 24 + 24 * 4 = 120（最終值）

因此，它是120！

問題7：短路通知

讓我們向用戶顯示一些通知！以下代碼段會輸出什么？

const notifications = 1;

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

答案：“You have 1 notificationfalse”。

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

問題8：Spread并重命名

考慮以下具有單個對象的數(shù)組。當我們擴展該數(shù)組并更改0索引對象上的 firstName 屬性時會發(fā)生什么？

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

console.log(arr1);

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

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

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

在以下情況下會輸出什么？

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

答案：1 2 3。

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

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

問題10：Set 唯一性和順序

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

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

答案：4 2。

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

如果對你有所啟發(fā)和幫助，可以點個關(guān)注、收藏、轉(zhuǎn)發(fā)，也可以留言討論，這是對作者的最大鼓勵。

作者簡介：Web前端工程師，全棧開發(fā)工程師、持續(xù)學(xué)習(xí)者。