ES6 擴充套件運算子 三點( )

2021-10-07 08:48:07 字數 2069 閱讀 1900

擴充套件運算子( spread )是三個點(...)

物件中的擴充套件運算子(...)用於取出引數物件中的所有可遍歷屬性,拷貝到當前物件之中

let bar = ;

let baz = ; //

上述方法實際上等價於:

let bar = ;

let baz = object.assign({}, bar); //

object.assign方法用於物件的合併,將源物件(source)的所有可列舉屬性,複製到目標物件(target)。

object.assign方法的第乙個引數是目標物件,後面的引數都是源物件。(如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則後面的屬性會覆蓋前面的屬性)

如果使用者自定義的屬性,放在擴充套件運算子後面,則擴充套件運算子內部的同名屬性會被覆蓋掉

let bar = ;

let baz = }; //

綜上所述:特性就可以很方便的修改物件的部分屬性。

redux中的reducer函式規定必須是乙個純函式reducer中的state物件要求不能直接修改,可以通過擴充套件運算子把修改路徑的物件都複製一遍,然後產生乙個新的物件返回;

陣列的擴充套件運算子

擴充套件運算子同樣可以運用在對陣列的操作中。可以將陣列轉換為引數序列

function add(x, y) 

const numbers = [4, 38];

add(...numbers) // 42

可以複製陣列

如果直接通過下列的方式進行陣列複製是不可取的:

const arr1 = [1, 2];

const arr2 = arr1;

arr2[0] = 2;

arr1 // [2, 2]

原因上面已經介紹過,用擴充套件運算子就很方便:

const arr1 = [1, 2];

const arr2 = [...arr1];

還是記住那句話:擴充套件運算子(…)用於取出引數物件中的所有可遍歷屬性,拷貝到當前物件之中,這裡引數物件是個陣列,陣列裡面的所有物件都是基礎資料型別,將所有基礎資料型別重新拷貝到新的陣列中。

擴充套件運算子可以與解構賦值結合起來,用於生成陣列

const [first, ...rest] = [1, 2, 3, 4, 5];

first // 1

rest  // [2, 3, 4, 5]

需要注意的一點是:

如果將擴充套件運算子用於陣列賦值,只能放在引數的最後一位,否則會報錯。

const [...rest, last] = [1, 2, 3, 4, 5];  // 報錯

const [first, ...rest, last] = [1, 2, 3, 4, 5];  // 報錯

擴充套件運算子還可以將字串轉為真正的陣列

[...'hello']

// [ "h", "e", "l", "l", "o" ]

任何 iterator 介面的物件(參閱 iterator 一章),都可以用擴充套件運算子轉為真正的陣列

這點說的比較官方,大家具體可以參考阮一峰老師的ecmascript 6入門教程。

比較常見的應用是可以將某些資料結構轉為陣列,比如:

// arguments物件

function foo()

用於替換es5中的array.prototype.slice.call(arguments)寫法。

ES6三點擴充套件運算子

擴充套件運算子將乙個陣列轉為用逗號分隔的引數序列 將乙個陣列,變為引數序列 3 使用push將乙個陣列新增到另乙個陣列的尾部 合併陣列 將字串轉換為陣列 轉換偽陣列為真陣列 var nodelist document.queryselectorall p var array nodelist 具有i...

ES6 擴充套件運算子

擴充套件運算子用3個點表示,功能是把陣列或者類陣列物件展開成一系列用逗號隔開的值 1,陣列 let arr red green blue console.log arr red,green,blue拷貝陣列 和object.assign一樣都是淺拷貝 let arr red green blue l...

ES6擴充套件運算子

首先,我們要讀仔細下面這句話,就很容易知道擴充套件運算子的使用了,可以在心裡反覆讀三遍 接下來,我們看下究竟怎麼個情況 宣告乙個方法 var foo function a,b,c console.log a console.log b console.log c 宣告乙個陣列 var arr 1,2...