擴充套件運算子

1.合併陣列

// 1.合併陣列
let arr1 = [1, 2, 3];
let arr2 = ["c"];
let arr3 = ["d", "e"];
// es5 合併
console.log(arr1.concat(arr2, arr3));//(6)[1, 2, 3, "c", "d", "e"]
// es6 合併
console.log([...arr1, ...arr2, ...arr3]);//(6)[1, 2, 3, "c", "d", "e"]

2.與陣列的解構賦值相結合

// 2.與陣列的解構賦值相結合
const [first, ...reset] = [1, 2, 34, 56];
console.log(first, reset);//1 , (3)[2, 34, 56]

const [f, ...r] = [];
console.log(f, r);//undefined []
 

3.替代陣列的 apply 方法

// 3.替代陣列的 apply 方法
// 3.1 求和函式傳參
function getSum(x, y, z) {
    return x + y + z;
}
let arr = [1, 2, 3];
// es5 引數傳遞
console.log(getSum.apply(null, arr));    //6
// es6 
console.log(getSum(...arr));    //6

// 3.2 求陣列的最大值
// es6
console.log(Math.max(...arr)); // 3
// es5 apply，reduce
console.log(Math.max.apply(null, arr));// 3

// 3.3 將一個數組新增到另一個數組的尾部
let ar1 = [1, 2, 3];
let ar2 = [4, 5, 6];
ar1.push(...ar2);   //es6
console.log(ar1);   //(6)[1, 2, 3, 4, 5, 6]
ar1.push.apply(ar1, ar2);    //es5
console.log(ar1);// (9)[1, 2, 3, 4, 5, 6, 4, 5, 6]
 

4.類陣列轉換為陣列

let divs = document.getElementsByTagName("div");
console.log(divs);//偽陣列
console.log([...divs]);//(3)[div.box, div.box, div.box]

5.合併物件

// 5.合併物件
let obj1 = { x: 1, y: 2 };
let obj2 = { z: 3 };
console.log({ ...obj1, ...obj2 });//{x: 1, y: 2, z: 3}
// 注意：不能單獨對物件解構，物件沒有對應的迭代器介面Symbol.iterator

6.筆試題

// 騰訊筆試題：
// 我們能否以某種方式為下面的語句使用展開運算而不導致型別錯誤?
// 錯誤程式碼示例
let obj = { x: 1, y: 2, z: 3 };
console.log(...obj);    //報錯

// 回答：
obj[Symbol.iterator] = function () {
    //...
    return {
        next: function () {
            // ...
            let objArr = Reflect.ownKeys(obj);
            if (this.index < objArr.length - 1) {
                let key = objArr[this.index];
                this.index++
                return {
                    value: obj[key]
                }
            } else {
                return {
                    done: true
                }
            }
        },
        index: 0
    }
}
console.log(...obj);//1 2 3

人生人山人海人來人往，自己自尊自愛自由自在。

本文來自部落格園，作者：青檸i，轉載請註明原文連結：https://www.cnblogs.com/fuct/p/15242260.html