ES2020：数组展开操作符与扩展操作符的新功能-JavaScript中文网-JavaScript教程资源分享门户

在ES6中，我们已经看到了数组展开操作符（spread operator）的引入，它可以将数组展开成一个序列，方便我们进行数组的合并和拆分。在ES2020中，数组展开操作符和扩展操作符（rest operator）又有了新的功能，本文将详细介绍这些新功能并提供示例代码。

数组展开操作符的新功能

数组展开操作符在对象字面量中的使用

在ES6中，我们可以使用展开操作符将一个数组展开成一个序列，如下所示：

const arr = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr, ...arr2]; // [1, 2, 3, 4, 5, 6]

在ES2020中，我们可以在对象字面量中使用数组展开操作符，将一个对象的属性和值展开到另一个对象中，如下所示：

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

数组展开操作符在函数调用中的使用

在ES6中，我们可以使用展开操作符将一个数组展开成一个序列，方便将数组元素作为函数的参数传递，如下所示：

function sum(a, b, c) {
  return a + b + c;
}
const arr = [1, 2, 3];
console.log(sum(...arr)); // 6

在ES2020中，我们可以在函数调用中使用展开操作符，将一个数组的部分元素展开成函数的参数，如下所示：

function sum(a, b, ...rest) {
  let result = a + b;
  for (let i = 0; i < rest.length; i++) {
    result += rest[i];
  }
  return result;
}
const arr = [1, 2, 3, 4, 5];
console.log(sum(...arr)); // 15

扩展操作符的新功能

扩展操作符在对象字面量中的使用

在ES6中，我们可以使用扩展操作符将一个对象的属性和值展开到另一个对象中，如下所示：

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

在ES2020中，我们可以在对象字面量中使用扩展操作符，将一个对象的属性和值展开到另一个对象中，但是只保留符合条件的属性，如下所示：

const obj1 = { a: 1, b: 2, c: 3 };
const { a, ...obj2 } = obj1;
console.log(obj2); // { b: 2, c: 3 }

扩展操作符在函数调用中的使用

在ES6中，我们可以使用扩展操作符将一个数组的部分元素作为函数的参数，如下所示：

function sum(a, b, c) {
  return a + b + c;
}
const arr = [1, 2, 3];
console.log(sum(...arr)); // 6

在ES2020中，我们可以在函数调用中使用扩展操作符，将一个对象的属性和值展开成函数的参数，如下所示：

function sum({ a, b, c }) {
  return a + b + c;
}
const obj = { a: 1, b: 2, c: 3 };
console.log(sum({ ...obj })); // 6

总结

ES2020中的数组展开操作符和扩展操作符为我们提供了更多的编程方式，使得我们能够更方便地操作数组和对象。在实际的开发中，我们可以根据具体的场景选择合适的操作符，提高开发效率和代码可读性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c31667add4f0e0ffd238f4