摘要:下面是我試圖解釋中三個點的作用。可以將這種傳播視為逐個提取所有單個屬性并將它們傳遞給新對象。這意味著下面的代碼將導致您擁有包含重復元素的數組。這應該是您需要了解的所有內容,以便在中使用運算符。
這篇文章的標題來自我在Quora上被要求回答的一個問題。下面是我試圖解釋JavaScript中三個點的作用。希望這對于將來有相同問題的人來說可以消除圍繞這個概念的迷霧。
數組/對象擴展運算符假設您有以下對象:
const adrian = { fullName: "Adrian Oprea", occupation: "Software developer", age: 31, website: "https://oprea.rocks" };
假設您要創建一個具有不同名稱和網站但具有相同職業和年齡的新對象(人)。
您可以通過僅指定所需的屬性來執行此操作,并使用擴展運算符來完成其余操作,如下所示:
const bill = { ...adrian, fullName: "Bill Gates", website: "https://microsoft.com" };
上面代碼的作用是遍布adrian對象并獲取其所有屬性,然后用我們傳遞的屬性覆蓋現有屬性。可以將這種傳播視為逐個提取所有單個屬性并將它們傳遞給新對象。
在這種情況下,由于我們在擴展運算符啟動后指定了fullName和網站屬性,因此JavaScript引擎知道我們要覆蓋來自原始對象的那些屬性的原始值。
除了傳播鍵和值之外,運算符不會傳播索引(index)和值。與對象傳播不同的是,你不會有重復的屬性,因為這是JavaScript對象的工作方式(你不能擁有一個具有兩個fullName屬性的對象),如果你計劃實現類似的東西,那么對于數組你最終可能會有重復的值到我們的對象示例。
這意味著下面的代碼將導致您擁有包含重復元素的數組。
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運算符使用函數的參數時,無論是完全替換參數還是與函數的參數一起替換參數,這三個點也稱為rest運算符。
當像這樣使用它時,rest操作符使開發人員能夠創建可以獲取無限數量的參數的函數,也稱為變量arity或可變函數。
這是這種功能最簡單的例子。假設您要創建一個計算其所有參數之和的函數。請注意,它不是兩個,三個或四個數字的總和,而是函數作為參數接收的所有數字的總和。
這有一個簡單的實現,使用rest運算符:
function sum(...numbers) { return numbers.reduce((accumulator, current) => { return accumulator += current }); }; sum(1,2) // 3 sum(1,2,3,4,5) // 15
最簡單的解釋是,rest運算符接收函數接收的參數并將它們轉儲到以后可以使用的實數數組中。
你可能會覺得,你可以通過請求用戶傳遞一組數字來完成此操作。這在技術上是可行的,但是這樣的用戶體驗很差,因為用戶希望用普通數字而不是數字列表來調用sum函數。
您可能還認為可以使用arguments數組。這也是事實,但要小心,參數不是真正的數組,而是類似數組的對象(具有length屬性的對象)。對于我們的sum函數的第一次調用,在前面的例子中,它實際上看起來像這樣:
{ "0": 1, "1": 2, "length": 2 }
要操作此對象并在其上使用數組方法,例如reduce,從我之前的示例中,您必須執行Array.prototype.slice.call(arguments,0)操作。就速度和內存使用而言,這表現不佳并且不優雅。這樣的代碼,容易讓你的初級水平的同事感到困惑。
這應該是您需要了解的所有內容,以便在JavaScript中使用rest / spread運算符。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113796.html
摘要:下面是我試圖解釋中三個點的作用。可以將這種傳播視為逐個提取所有單個屬性并將它們傳遞給新對象。這意味著下面的代碼將導致您擁有包含重復元素的數組。這應該是您需要了解的所有內容,以便在中使用運算符。 這篇文章的標題來自我在Quora上被要求回答的一個問題。下面是我試圖解釋JavaScript中三個點的作用。希望這對于將來有相同問題的人來說可以消除圍繞這個概念的迷霧。 數組/對象擴展運算符 假...
摘要:下面是我試圖解釋中三個點的作用。可以將這種傳播視為逐個提取所有單個屬性并將它們傳遞給新對象。這意味著下面的代碼將導致您擁有包含重復元素的數組。這應該是您需要了解的所有內容,以便在中使用運算符。 這篇文章的標題來自我在Quora上被要求回答的一個問題。下面是我試圖解釋JavaScript中三個點的作用。希望這對于將來有相同問題的人來說可以消除圍繞這個概念的迷霧。 數組/對象擴展運算符 假...
摘要:中變量可能包含兩種不同的數據類型的值基本類型和引用類型。本文主要介紹基本數據類型及其特點。操作符在介紹基本類型值之前,先說下操作符,操作符會返回數據類型的字符串表示。所有未初始化的變量均會保存該值。 前言JavaScript中的變量為松散類型,所謂松散類型就是指當一個變量被申明出來就可以保存任意類型的值,就是不像SQL一樣申明某個鍵值為int就只能保存整型數值,申明varchar只能保...
閱讀 2883·2021-11-24 09:39
閱讀 2454·2019-08-30 15:53
閱讀 3024·2019-08-30 13:47
閱讀 1296·2019-08-30 12:50
閱讀 1481·2019-08-29 16:31
閱讀 2641·2019-08-29 13:14
閱讀 1559·2019-08-29 10:55
閱讀 789·2019-08-26 13:32