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

fjcgreat 發(fā)布于2019-08-02 16:31 / 2429人閱讀

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

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

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

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

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

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

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

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

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

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

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

這意味著下面的代碼將導(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í)，無論是完全替換參數(shù)還是與函數(shù)的參數(shù)一起替換參數(shù)，這三個(gè)點(diǎn)也稱為rest運(yùn)算符。

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

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

這有一個(gè)簡單的實(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

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

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

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

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

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

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

云服務(wù)器 GPU云服務(wù)器 cdn加速意味什么 java中三個(gè)3e 阿里云服務(wù)器中有三個(gè)網(wǎng)站 javascript中

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/55078.html

發(fā)表評論

登陸后可評論

0條評論

fjcgreat

男|高級講師

我要關(guān)注我要私信

TA的文章

2.準(zhǔn)備—本地工具

閱讀 670·2021-10-09 09:41
瀏覽器滾動(dòng)條樣式還可以改變，你知道嗎？

閱讀 654·2019-08-30 15:53
完整的學(xué)習(xí)和使用CSS動(dòng)畫【譯】

閱讀 1082·2019-08-30 15:53
CSS網(wǎng)格布局（Grid）教程

閱讀 1217·2019-08-30 11:01
實(shí)現(xiàn)一個(gè)簡單的chrome插件

閱讀 1575·2019-08-29 17:31
用css實(shí)現(xiàn)thead隨著滑動(dòng)條滾動(dòng)的table

閱讀 994·2019-08-29 14:05
【譯】統(tǒng)一樣式語言

閱讀 1722·2019-08-29 12:49
CSS進(jìn)階篇--div中的內(nèi)容垂直居中的五種方法

閱讀 417·2019-08-28 18:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章