（...）這三個(gè)點(diǎn)在JavaScript中意味著什么？

Travis 發(fā)布于2019-08-23 11:31 / 753人閱讀

摘要：下面是我試圖解釋中三個(gè)點(diǎn)的作用。可以將這種傳播視為逐個(gè)提取所有單個(gè)屬性并將它們傳遞給新對(duì)象。這意味著下面的代碼將導(dǎo)致您擁有包含重復(fù)元素的數(shù)組。這應(yīng)該是您需要了解的所有內(nèi)容，以便在中使用運(yùn)算符。

這篇文章的標(biāo)題來(lái)自我在Quora上被要求回答的一個(gè)問(wèn)題。下面是我試圖解釋JavaScript中三個(gè)點(diǎn)的作用。希望這對(duì)于將來(lái)有相同問(wèn)題的人來(lái)說(shuō)可以消除圍繞這個(gè)概念的迷霧。

數(shù)組/對(duì)象擴(kuò)展運(yùn)算符

假設(shè)您有以下對(duì)象：

const adrian = {
  fullName: "Adrian Oprea",
  occupation: "Software developer",
  age: 31,
  website: "https://oprea.rocks"
};

假設(shè)您要?jiǎng)?chuàng)建一個(gè)具有不同名稱和網(wǎng)站但具有相同職業(yè)和年齡的新對(duì)象（人）。

您可以通過(guò)僅指定所需的屬性來(lái)執(zhí)行此操作，并使用擴(kuò)展運(yùn)算符來(lái)完成其余操作，如下所示：

const bill = {
  ...adrian,
  fullName: "Bill Gates",
 website: "https://microsoft.com"
};

上面代碼的作用是遍布adrian對(duì)象并獲取其所有屬性，然后用我們傳遞的屬性覆蓋現(xiàn)有屬性。可以將這種傳播視為逐個(gè)提取所有單個(gè)屬性并將它們傳遞給新對(duì)象。

在這種情況下，由于我們?cè)跀U(kuò)展運(yùn)算符啟動(dòng)后指定了fullName和網(wǎng)站屬性，因此JavaScript引擎知道我們要覆蓋來(lái)自原始對(duì)象的那些屬性的原始值。

除了傳播鍵和值之外，運(yùn)算符不會(huì)傳播索引(index)和值。與對(duì)象傳播不同的是，你不會(huì)有重復(fù)的屬性，因?yàn)檫@是JavaScript對(duì)象的工作方式（你不能擁有一個(gè)具有兩個(gè)fullName屬性的對(duì)象），如果你計(jì)劃實(shí)現(xiàn)類似的東西，那么對(duì)于數(shù)組你最終可能會(huì)有重復(fù)的值到我們的對(duì)象示例。

這意味著下面的代碼將導(dǎo)致您擁有包含重復(fù)元素的數(shù)組。

const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [ ...numbers1, 1, 2, 6,7,8]; // this will be [1, 2, 3, 4, 5, 1, 2, 6, 7, 8]

可以把它想象成Array.prototype.concat的替代品.

rest運(yùn)算符

使用函數(shù)的參數(shù)時(shí)，無(wú)論是完全替換參數(shù)還是與函數(shù)的參數(shù)一起替換參數(shù)，這三個(gè)點(diǎn)也稱為rest運(yùn)算符。

當(dāng)像這樣使用它時(shí)，rest操作符使開(kāi)發(fā)人員能夠創(chuàng)建可以獲取無(wú)限數(shù)量的參數(shù)的函數(shù)，也稱為變量arity或可變函數(shù)。

這是這種功能最簡(jiǎn)單的例子。假設(shè)您要?jiǎng)?chuàng)建一個(gè)計(jì)算其所有參數(shù)之和的函數(shù)。請(qǐng)注意，它不是兩個(gè)，三個(gè)或四個(gè)數(shù)字的總和，而是函數(shù)作為參數(shù)接收的所有數(shù)字的總和。

這有一個(gè)簡(jiǎn)單的實(shí)現(xiàn)，使用rest運(yùn)算符：

function sum(...numbers) {
    return numbers.reduce((accumulator, current) => {
        return accumulator += current
    });
};

sum(1,2) // 3
sum(1,2,3,4,5) // 15

最簡(jiǎn)單的解釋是，rest運(yùn)算符接收函數(shù)接收的參數(shù)并將它們轉(zhuǎn)儲(chǔ)到以后可以使用的實(shí)數(shù)數(shù)組中。

你可能會(huì)覺(jué)得，你可以通過(guò)請(qǐng)求用戶傳遞一組數(shù)字來(lái)完成此操作。這在技術(shù)上是可行的，但是這樣的用戶體驗(yàn)很差，因?yàn)橛脩粝Ｍ闷胀〝?shù)字而不是數(shù)字列表來(lái)調(diào)用sum函數(shù)。

您可能還認(rèn)為可以使用arguments數(shù)組。這也是事實(shí)，但要小心，參數(shù)不是真正的數(shù)組，而是類似數(shù)組的對(duì)象（具有l(wèi)ength屬性的對(duì)象）。對(duì)于我們的sum函數(shù)的第一次調(diào)用，在前面的例子中，它實(shí)際上看起來(lái)像這樣：

{
  "0": 1,
  "1": 2,
  "length": 2
}

要操作此對(duì)象并在其上使用數(shù)組方法，例如reduce，從我之前的示例中，您必須執(zhí)行Array.prototype.slice.call（arguments，0）操作。就速度和內(nèi)存使用而言，這表現(xiàn)不佳并且不優(yōu)雅。這樣的代碼，容易讓你的初級(jí)水平的同事感到困惑。

這應(yīng)該是您需要了解的所有內(nèi)容，以便在JavaScript中使用rest / spread運(yùn)算符。