摘要:下面是我試圖解釋中三個點的作用。可以將這種傳播視為逐個提取所有單個屬性并將它們傳遞給新對象。這意味著下面的代碼將導(dǎo)致您擁有包含重復(fù)元素的數(shù)組。這應(yīng)該是您需要了解的所有內(nèi)容,以便在中使用運算符。
這篇文章的標(biāo)題來自我在Quora上被要求回答的一個問題。下面是我試圖解釋JavaScript中三個點的作用。希望這對于將來有相同問題的人來說可以消除圍繞這個概念的迷霧。
數(shù)組/對象擴展運算符假設(shè)您有以下對象:
</>復(fù)制代碼
const adrian = {
fullName: "Adrian Oprea",
occupation: "Software developer",
age: 31,
website: "https://oprea.rocks"
};
假設(shè)您要創(chuàng)建一個具有不同名稱和網(wǎng)站但具有相同職業(yè)和年齡的新對象(人)。
您可以通過僅指定所需的屬性來執(zhí)行此操作,并使用擴展運算符來完成其余操作,如下所示:
</>復(fù)制代碼
const bill = {
...adrian,
fullName: "Bill Gates",
website: "https://microsoft.com"
};
上面代碼的作用是遍布adrian對象并獲取其所有屬性,然后用我們傳遞的屬性覆蓋現(xiàn)有屬性。可以將這種傳播視為逐個提取所有單個屬性并將它們傳遞給新對象。
在這種情況下,由于我們在擴展運算符啟動后指定了fullName和網(wǎng)站屬性,因此JavaScript引擎知道我們要覆蓋來自原始對象的那些屬性的原始值。
除了傳播鍵和值之外,運算符不會傳播索引(index)和值。與對象傳播不同的是,你不會有重復(fù)的屬性,因為這是JavaScript對象的工作方式(你不能擁有一個具有兩個fullName屬性的對象),如果你計劃實現(xiàn)類似的東西,那么對于數(shù)組你最終可能會有重復(fù)的值到我們的對象示例。
這意味著下面的代碼將導(dǎo)致您擁有包含重復(fù)元素的數(shù)組。
</>復(fù)制代碼
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運算符使用函數(shù)的參數(shù)時,無論是完全替換參數(shù)還是與函數(shù)的參數(shù)一起替換參數(shù),這三個點也稱為rest運算符。
當(dāng)像這樣使用它時,rest操作符使開發(fā)人員能夠創(chuàng)建可以獲取無限數(shù)量的參數(shù)的函數(shù),也稱為變量arity或可變函數(shù)。
這是這種功能最簡單的例子。假設(shè)您要創(chuàng)建一個計算其所有參數(shù)之和的函數(shù)。請注意,它不是兩個,三個或四個數(shù)字的總和,而是函數(shù)作為參數(shù)接收的所有數(shù)字的總和。
這有一個簡單的實現(xiàn),使用rest運算符:
</>復(fù)制代碼
function sum(...numbers) {
return numbers.reduce((accumulator, current) => {
return accumulator += current
});
};
sum(1,2) // 3
sum(1,2,3,4,5) // 15
最簡單的解釋是,rest運算符接收函數(shù)接收的參數(shù)并將它們轉(zhuǎn)儲到以后可以使用的實數(shù)數(shù)組中。
你可能會覺得,你可以通過請求用戶傳遞一組數(shù)字來完成此操作。這在技術(shù)上是可行的,但是這樣的用戶體驗很差,因為用戶希望用普通數(shù)字而不是數(shù)字列表來調(diào)用sum函數(shù)。
您可能還認為可以使用arguments數(shù)組。這也是事實,但要小心,參數(shù)不是真正的數(shù)組,而是類似數(shù)組的對象(具有l(wèi)ength屬性的對象)。對于我們的sum函數(shù)的第一次調(diào)用,在前面的例子中,它實際上看起來像這樣:
</>復(fù)制代碼
{
"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運算符。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/97089.html
摘要:下面是我試圖解釋中三個點的作用。可以將這種傳播視為逐個提取所有單個屬性并將它們傳遞給新對象。這意味著下面的代碼將導(dǎo)致您擁有包含重復(fù)元素的數(shù)組。這應(yīng)該是您需要了解的所有內(nèi)容,以便在中使用運算符。 這篇文章的標(biāo)題來自我在Quora上被要求回答的一個問題。下面是我試圖解釋JavaScript中三個點的作用。希望這對于將來有相同問題的人來說可以消除圍繞這個概念的迷霧。 數(shù)組/對象擴展運算符 假...
摘要:下面是我試圖解釋中三個點的作用。可以將這種傳播視為逐個提取所有單個屬性并將它們傳遞給新對象。這意味著下面的代碼將導(dǎo)致您擁有包含重復(fù)元素的數(shù)組。這應(yīng)該是您需要了解的所有內(nèi)容,以便在中使用運算符。 這篇文章的標(biāo)題來自我在Quora上被要求回答的一個問題。下面是我試圖解釋JavaScript中三個點的作用。希望這對于將來有相同問題的人來說可以消除圍繞這個概念的迷霧。 數(shù)組/對象擴展運算符 假...
摘要:中變量可能包含兩種不同的數(shù)據(jù)類型的值基本類型和引用類型。本文主要介紹基本數(shù)據(jù)類型及其特點。操作符在介紹基本類型值之前,先說下操作符,操作符會返回數(shù)據(jù)類型的字符串表示。所有未初始化的變量均會保存該值。 前言JavaScript中的變量為松散類型,所謂松散類型就是指當(dāng)一個變量被申明出來就可以保存任意類型的值,就是不像SQL一樣申明某個鍵值為int就只能保存整型數(shù)值,申明varchar只能保...
摘要:微信端口的小游戲相信大家已經(jīng)做了很多類似于碰撞檢測這種也是數(shù)不勝數(shù)因為障礙物和主角都是圖片也就意味著碰撞檢測實際上是兩個矩形直接是否有交叉的判斷包括這樣的框架也是這樣子做的當(dāng)然這種方法也無可厚非然而唯一的問題是如果素材障礙物和主角并不能鋪滿 微信端口的小游戲相信大家已經(jīng)做了很多,類似于碰撞檢測這種也是數(shù)不勝數(shù).因為障礙物和主角都是圖片,也就意味著碰撞檢測實際上是兩個矩形直接是否有交叉...
閱讀 2329·2021-11-23 09:51
閱讀 3761·2021-11-11 10:57
閱讀 1407·2021-10-09 09:43
閱讀 2496·2021-09-29 09:35
閱讀 2026·2019-08-30 15:54
閱讀 1796·2019-08-30 15:44
閱讀 3191·2019-08-30 13:20
閱讀 1701·2019-08-30 11:19