ES6 中的扩展运算符是一个非常有用的语法，可以让我们更方便的处理数据和函数。在本文中，我们将介绍扩展运算符的应用和注意事项。
什么是扩展运算符？
扩展运算符使用 ... 语法，可以将一个数组、字符串、Map、Set 等可迭代对象展开成多个参数。例如：
const arr = [1, 2, 3]; console.log(...arr); // 1 2 3 const str = 'hello'; console.log(...str); // h e l l o const map = new Map([['name', 'Tom'], ['age', 18]]); console.log(...map); // ['name', 'Tom'] ['age', 18]
数组的应用
合并数组
使用扩展运算符可以很方便地合并多个数组：
const arr1 = [1, 2]; const arr2 = [3, 4]; const arr3 = [5, 6]; const arr4 = [...arr1, ...arr2, ...arr3]; console.log(arr4); // [1, 2, 3, 4, 5, 6]
复制数组
使用扩展运算符可以很方便地复制一个数组：
const arr1 = [1, 2]; const arr2 = [...arr1]; console.log(arr2); // [1, 2]
注意，使用扩展运算符复制数组只是浅拷贝，如果数组中存在引用类型的数据，复制后的数组中的引用仍然指向原数组中的对象。
数组转换为参数序列
function sum(x, y, z) {
return x + y + z;
}
const arr = [1, 2, 3];
console.log(sum(...arr)); // 6数组拼接
使用扩展运算符可以很方便地将一个数组插入另一个数组中：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; arr1.push(...arr2); console.log(arr1); // [1, 2, 3, 4, 5, 6]
对象的应用
使用扩展运算符可以完成对象的浅拷贝：
const obj1 = {name: 'Tom', age: 18};
const obj2 = {...obj1};
console.log(obj2); // {name: 'Tom', age: 18}使用扩展运算符也可以将多个对象合并：
const obj1 = {name: 'Tom', age: 18};
const obj2 = {gender: 'male'};
const obj3 = {...obj1, ...obj2};
console.log(obj3); // {name: 'Tom', age: 18, gender: 'male'}需要注意的是，如果多个对象中包含同名属性，后面的属性会覆盖前面的属性。
函数的应用
使用扩展运算符可以方便地将多个参数传入函数，并批量拷贝数组和对象。
函数传参
-- -------------------- ---- ------- -------- ------ -- -- - ------ - - - - -- - ----- --- - --- -- --- ------------------------- -- - ----- --- - --- -- -- -- -- --- ---------------------------------------- -- -
批量拷贝对象属性
const obj1 = {a: 1, b: 2};
const obj2 = {c: 3, d: 4};
function test({...obj}) {
console.log(obj);
}
test({...obj1, ...obj2}); // {a: 1, b: 2, c: 3, d: 4}注意事项
- 使用扩展运算符时，数组和对象中的元素不能是 null 或 undefined，否则会报错。
- 使用扩展运算符复制数组时只是浅拷贝，需要注意数组中是否包含引用类型数据。
- 使用扩展运算符合并对象时需要注意属性重复的问题。
总结
ES6 中的扩展运算符是一个非常有用的语法，能够方便地处理数据和函数参数。在使用时需要注意数组和对象的元素类型以及属性重复的问题。通过本文的介绍和示例代码，相信读者已经掌握了扩展运算符的基本用法，并能够灵活地运用到实际开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e857a48841e9894b09aa7