扩展运算符理解
作者:互联网
扩展运算符
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