在 ECMAScript 2019 中，展开运算符（Spread Operator）是一个重要的新特性。它可以让我们方便地将数组、对象或函数参数展开成一个新的数组或对象，从而简化代码的编写和阅读。本文将详细介绍展开运算符的使用方法，包括数组、对象和函数参数的展开，以及一些常见的应用场景。
数组的展开
在 ECMAScript 2015 中，我们已经可以使用扩展运算符（Spread Operator）将一个数组展开成另一个数组，例如：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
在 ECMAScript 2019 中，展开运算符还可以用于数组的解构赋值，例如：
const arr = [1, 2, 3]; const [x, ...rest] = arr; console.log(x); // 1 console.log(rest); // [2, 3]
这里的 ...rest 就是一个展开运算符，它将剩余的数组元素展开成一个新的数组。
对象的展开
在 ECMAScript 2018 中，我们已经可以使用扩展运算符将一个对象展开成另一个对象，例如：
const obj1 = {a: 1, b: 2};
const obj2 = {c: 3, d: 4};
const obj3 = {...obj1, ...obj2};
console.log(obj3); // {a: 1, b: 2, c: 3, d: 4}在 ECMAScript 2019 中，展开运算符还可以用于对象的解构赋值，例如：
const obj = {a: 1, b: 2, c: 3};
const {a, ...rest} = obj;
console.log(a); // 1
console.log(rest); // {b: 2, c: 3}这里的 ...rest 也是一个展开运算符，它将剩余的对象属性展开成一个新的对象。
函数参数的展开
在 ECMAScript 2015 中，我们已经可以使用扩展运算符将一个数组展开成函数的参数列表，例如：
function sum(a, b, c) {
return a + b + c;
}
const arr = [1, 2, 3];
console.log(sum(...arr)); // 6在 ECMAScript 2019 中，展开运算符还可以用于函数参数的解构赋值，例如：
function sum({a, b, ...rest}) {
return a + b + rest.c;
}
const obj = {a: 1, b: 2, c: 3};
console.log(sum({...obj})); // 6这里的 {...obj} 就是一个展开运算符，它将对象属性展开成函数的参数列表。
应用场景
展开运算符在实际开发中有许多应用场景，下面列举一些常见的例子。
数组合并
展开运算符可以方便地将多个数组合并成一个新的数组，例如：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; const arr4 = [...arr1, ...arr2, ...arr3]; console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
对象复制
展开运算符可以方便地复制一个对象，例如：
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1};
console.log(obj2); // {a: 1, b: 2}函数参数传递
展开运算符可以方便地将数组或对象作为函数的参数传递，例如：
function sum(a, b, c) {
return a + b + c;
}
const arr = [1, 2, 3];
const obj = {a: 1, b: 2, c: 3};
console.log(sum(...arr)); // 6
console.log(sum({...obj})); // 6数组或对象的部分复制或部分合并
展开运算符可以方便地进行数组或对象的部分复制或部分合并，例如：
const arr1 = [1, 2, 3];
const arr2 = [...arr1.slice(0, 1), 4, ...arr1.slice(1)];
console.log(arr2); // [1, 4, 2, 3]
const obj1 = {a: 1, b: 2, c: 3};
const obj2 = {...obj1, b: 4};
console.log(obj2); // {a: 1, b: 4, c: 3}总结
展开运算符是 ECMAScript 2019 中的一个重要特性，它可以方便地将数组、对象或函数参数展开成一个新的数组或对象，从而简化代码的编写和阅读。本文介绍了展开运算符的使用方法，包括数组、对象和函数参数的展开，以及一些常见的应用场景。在实际开发中，我们可以根据具体情况灵活使用展开运算符，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656c20aad2f5e1655d487e46