ES6—扩展运算符详解

概念：用‘…’，三个点表示，将迭代对象展开到其单独的元素中，简化代码。用于展开数组、对象或者函数参数。
1.数组：
（1）展开数组：将一个数组展开为多个独立的元素

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

（2）合并数组：合并多个数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

（3）复制数组：

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // [1, 2, 3]

2.对象：
（1）展开对象：展开对象的属性

const obj1 = { name: 'Alice', age: 20 };
const obj2 = { ...obj1, city: 'New York' };
console.log(obj2); // { name: 'Alice', age: 20, city: 'New York' }

（2）合并对象

const obj1 = { name: 'Alice', age: 20 };
const obj2 = { city: 'New York', country: 'USA' };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { name: 'Alice', age: 20, city: 'New York', country: 'USA' }

（3）复制对象：取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // baz 现在等于 { a: 1, b: 2 }

（4）对象的解构赋值：从一个对象取值，并将目标对象自身的所有可遍历但尚未被读取的属性分配到指定的对象上

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 输出：1
console.log(y); // 输出：2
console.log(z); // 输出：{ a: 3, b: 4 }

3.函数：
（1）传递函数的参数，将数组展开为多个参数

const numbers = [1, 2, 3, 4, 5];
const sum = (a, b, c, d, e) => a + b + c + d + e;
console.log(sum(...numbers)); // 15

代码007普通

打赏 收藏 海报 链接