關於es6 擴充套件運算子的小結

_雙眸

於 2021-06-12 18:59:05 釋出

50
收藏
分類專欄： 前端 文章標籤： javascript
版權

前端
專欄收錄該內容
35 篇文章0 訂閱
訂閱專欄
參考：es6 擴充套件運算子 三個點（…）

基礎用法一
1.由於擴充套件運算子可以展開陣列，所以不再需要apply方法，將陣列轉為函式的引數了。
function f(x, y, z) { // …}
var args = [0, 1, 2];
f(…args);

2.陣列是複合的資料型別，直接複製的話，只是複製了指向底層資料結構的指標，而不是克隆一個全新的陣列。擴充套件運算子提供了複製陣列的簡便寫法。
const a1 = [1, 2];
// 寫法一
const a2 = […a1];
// 寫法二
const […a2] = a1;

3.合併陣列
// ES5
[1, 2].concat(more)
// ES6
[1, 2, …more]

4.擴充套件運算子可以與解構賦值結合起來，用於生成陣列。如果將擴充套件運算子用於陣列賦值，只能放在引數的最後一位，否則會報錯。
const [first, …rest] = [1, 2, 3, 4, 5]; first = 1， rest = [2, 3, 4, 5]
const […butLast, last] = [1, 2, 3, 4, 5];// 報錯

5.擴充套件運算子還可以將字串轉為真正的陣列。
[…‘hello’] // [ “h”, “e”, “l”, “l”, “o” ]

6，擴充套件運算子（ … ）用於取出引數物件的所有可遍歷屬性，拷貝到當前物件之中。等同於使用 Object.assign 方法。
let aClone = { …a };
// 等同於
let aClone = Object.assign({}, a);

擴充套件運算子內部呼叫的是資料結構的 Iterator 介面，因此只要具有 Iterator 介面的物件，都可以使用擴充套件運算子，如果對沒有
Iterator 介面的物件，使用擴充套件運算子，將會報錯。可以改為使用Array.from方法將arrayLike轉為真正的陣列。

例如：
next({ ...to, replace: true }) 寫法
…把to裡面的屬性序列化出來，和replace加在一起變成一個新物件，傳給next；相當於之前的複雜寫法：

next(Object.assign({},to,{replace:true}))
1
基礎用法二

————————————————
版權宣告：本文為CSDN博主「_雙眸」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/u010633266/article/details/117853975