扩展运算符理解

2021-09-08 13:01:49 阅读：163 来源： 互联网

标签：... console log ar1 扩展运算符理解 let 数组

扩展运算符

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

标签：...,console,log,ar1,扩展,运算符,理解,let,数组
来源： https://www.cnblogs.com/fuct/p/15242260.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9