ECMAScript 2019 的扩展运算符：一种简化数组和对象操作的快速方法
在日常的前端开发中，我们经常需要对数组和对象进行操作，例如添加、删除、合并等。这些操作有时候会比较繁琐，需要使用多个方法或者写很多代码。而在 ECMAScript 2019 中，我们可以使用扩展运算符来简化这些操作，让代码更加简洁和易于阅读。
扩展运算符的语法是三个点号 “...” ，它可以将一个数组或者对象展开，从而方便地进行操作。下面我们分别介绍一下其在数组和对象中的使用方法。
一、数组中的扩展运算符
在数组中，扩展运算符可以用于以下几种场景：
- 合并数组
我们可以使用扩展运算符将两个数组合并为一个数组。例如：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
- 拷贝数组
我们通过将一个数组展开到另一个数组中，快速地创建一个新的数组副本。例如：
const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); // [1, 2, 3] // 修改 arr2 不会影响 arr1 arr2.push(4); console.log(arr1); // [1, 2, 3] console.log(arr2); // [1, 2, 3, 4]
- 转换为参数列表
有时候我们需要将数组中的元素作为参数传递给一个函数，我们可以使用扩展运算符将数组展开为一个参数列表。例如：
function sum(x, y, z) {
return x + y + z;
}
const arr = [1, 2, 3];
console.log(sum(...arr)); // 6二、对象中的扩展运算符
在对象中，扩展运算符可以用于以下几种场景：
- 合并对象
我们可以使用扩展运算符将多个对象合并为一个新的对象。如果有相同的属性，则后面的对象会覆盖前面的对象。例如：
const obj1 = { name: 'Tom', age: 18 };
const obj2 = { gender: 'male', age: 20 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: 'Tom', gender: 'male', age: 20 }- 拷贝对象
和数组一样，我们通过将一个对象展开到另一个新的对象中，快速地创建一个新的对象副本。例如：
const obj1 = { name: 'Tom', age: 18 };
const obj2 = { ...obj1 };
console.log(obj2); // { name: 'Tom', age: 18 }
// 修改 obj2 不会影响 obj1
obj2.age = 20;
console.log(obj1); // { name: 'Tom', age: 18 }
console.log(obj2); // { name: 'Tom', age: 20 }- 添加新的属性
我们可以使用扩展运算符添加新的属性或者修改已有的属性。例如：
const obj1 = { name: 'Tom', age: 18 };
const obj2 = { ...obj1, gender: 'male' };
console.log(obj2); // { name: 'Tom', age: 18, gender: 'male' }
// 修改已有的属性
const obj3 = { ...obj1, age: 20 };
console.log(obj3); // { name: 'Tom', age: 20 }总结：
扩展运算符是 ECMAScript 2019 中的新特性，可以帮助我们简化数组和对象的操作。在数组中，扩展运算符可以用于合并数组、拷贝数组、转换为参数列表等场景；在对象中，扩展运算符可以用于合并对象、拷贝对象、添加新的属性等场景。这种简单而有效的方法可以提高我们的代码效率，减少冗余代码，提高代码的可读性。如果你还没有使用扩展运算符，建议你学习并掌握这个重要的技能。
示例代码：（在实际使用过程中，可以根据不同的场景进行使用）
// javascriptcn.com 代码示例
// 合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]
// 拷贝数组
const arr4 = [...arr3];
console.log(arr4); // [1, 2, 3, 4, 5, 6]
// 转换为参数列表
function sum(x, y, z) {
return x + y + z;
}
console.log(sum(...arr4)); // 21
// 合并对象
const obj1 = { name: 'Tom', age: 18 };
const obj2 = { gender: 'male', age: 20 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: 'Tom', gender: 'male', age: 20 }
// 拷贝对象
const obj4 = { ...obj3 };
console.log(obj4); // { name: 'Tom', gender: 'male', age: 20 }
// 添加新的属性
const obj5 = { ...obj4, job: 'programmer' };
console.log(obj5); // { name: 'Tom', gender: 'male', age: 20, job: 'programmer' }
// 修改已有的属性
const obj6 = { ...obj5, age: 25 };
console.log(obj6); // { name: 'Tom', gender: 'male', age: 25, job: 'programmer' }来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65216f3c95b1f8cacd8edcbc