扩展运算符理解

扩展运算符

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