了解 ES9 中新增的 Rest/Spread 属性-JavaScript中文网-JavaScript教程资源分享门户

ES9 中新增了 Rest/Spread 属性，它们使得开发者们能够更灵活和高效地编写代码。Rest 属性可以将一个对象或数组拆分为单独的元素，而 Spread 属性则可以将一个对象或数组合并到另一个对象或数组中去。

Rest 属性

Rest 属性使用三个点...，它可以用在函数参数或解构赋值中。下面我们看一下 Rest 属性在函数参数中的应用。

function sum(...nums) {
  return nums.reduce((total, num) => total + num);
}

console.log(sum(1, 2, 3)); // 输出 6

在上面的代码中，...nums将所有传入的参数都打包到一个数组中，我们可以方便地对这个数组进行操作。

我们再看一下 Rest 属性在解构赋值中的应用。

const [first, ...rest] = [1, 2, 3, 4];

console.log(first); // 输出 1
console.log(rest); // 输出 [2, 3, 4]

在上面的代码中，...rest将数组中剩余的元素都放到了一个新数组中。

Spread 属性同样使用三个点...，它可以将数组、对象或字符串打散成分别的元素，并将它们扩展到另一个对象、数组或字符串中。下面我们来看一下 Spread 属性在数组和对象中的应用。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];

console.log(arr3); // 输出 [1, 2, 3, 4, 5, 6]

在上面的代码中，...arr1将数组 arr1 中的元素打散一一插入到 arr3 中，...arr2同理。

我们再来看一下 Spread 属性在对象中的应用。

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}

在上面的代码中，...obj1将对象 obj1 中的键值对打散插入到 obj3 中，...obj2同理。

Rest/Spread 属性的出现使得我们在进行对象或数组操作时变得更加高效和灵活。我们可以将多个数组或对象直接合并，也可以只取其一部分操作。这种操作可以在多个项目中协同工作，或者在从后端获取的数据中进行筛选、结构化输出等场景中使用。

需要注意的是，Rest/Spread 属性只能在支持 ES9 规范的 JavaScript 环境下使用，如 node.js 10.0+ 版本或 Chrome 64+ 版本。

在本文中，我们介绍了 ES9 中新增的 Rest/Spread 属性的用法和指导意义，并提供了相关示例代码。对于对 JavaScript 有兴趣的开发者们，我们希望这篇文章能够帮助你更加深入地了解这个新功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67b81e21306f20b3a65a1007