JavaScript 是一种强大的编程语言，其不断更新和发展也是其成功的关键之一。ES9（ECMAScript 2018）引入了一些新特性，其中最引人注目和最有用的新特性之一是展开运算符和剩余运算符。这两个操作符可用于更简洁和优雅地编写代码，本文将对其进行详细讲解。
什么是展开操作符？
展开操作符是三个点符号（...），它可以将数组或对象“展开”成单独的元素。展开运算符可以应用于以下情况：
1. 展开数组
展开操作符可以将一个数组展开成单独的元素，这使得我们可以更方便地将两个或多个数组合并在一起或复制一个数组并在其基础上进行更改。
// 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 = [...arr1]; console.log(arr4); // [1, 2, 3]
2. 展开对象
展开运算符可以将一个对象展开成一个新对象。这使我们可以更方便地将两个对象合并在一起或者复制一个对象并在其基础上进行更改。
// javascriptcn.com 代码示例
const obj1 = { x: 1, y: 2 };
const obj2 = { y: 3, z: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { x: 1, y: 3, z: 4 }
const obj4 = { ...obj1 };
console.log(obj4); // { x: 1, y: 2 }3. 函数调用
展开操作符可以用于函数调用中传递数组或者对象作为参数，这使我们可以更方便地传递多个参数而不必手动一个个传递。
// javascriptcn.com 代码示例
function fn(x, y, z) {
console.log(x, y, z);
}
const arr = [1, 2, 3];
fn(...arr); // 1 2 3
const obj = { x: 1, y: 2, z: 3 };
fn(...obj); // 1 2 3什么是剩余操作符？
剩余操作符也是三个点符号（...），但它在不同的上下文中执行不同的任务。它的作用是将不定数量的参数转换成一个数组或者一个对象。
1. 组合剩余参数为数组
剩余操作符可以将不定数量的参数组成一个数组。
function getSum(...args) {
return args.reduce((acc, current) => acc + current, 0);
}
console.log(getSum(1, 2, 3, 4)); // 10
console.log(getSum(1, 2)); // 32. 剩余参数对象的组合
剩余操作符也可以在对象字面量定义函数时捕获剩余参数对象。
const user = { name: 'John', age: 25, address: 'USA'};
const {name, ...rest} = user;
console.log(name); // John
console.log(rest); // {age: 25, address: "USA"}3. 剩余参数的组合
剩余操作符还可以在函数的传参中使用。在函数传递的参数中，可以存在不定数量的参数，剩余参数则可以将这些参数组成一个数组。
function displayUser(user, ...props) {
console.log(user);
console.log(props);
}
displayUser('John', 25, 'USA'); // John [25, "USA"]总结与建议
在本文中，我们已经学习了 ES9 引入的两个新操作符——展开和剩余操作符。通过它们，我们可以更方便地处理数组和对象，并且在不定数量的参数传递中也更加灵活。
在实际的开发过程中，建议我们合理应用这两个操作符。它们可以减少代码的冗余并且增加代码的可读性，提高代码效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653782327d4982a6eb009608