ES9 中新增的 Rest 和 Spread 属性的注意事项

ES9 中新增的 Rest 和 Spread 属性的注意事项

前言

ECMAScript9 (简称 ES9) 是 JavaScript 语言的第九个版本标准，于 2018 年发布。 ES9 带来了一些新的语言特性，其中包括 Rest 和 Spread 属性。这两个属性是函数操作的语法糖，可以让我们更方便地操作函数参数。本文将会详细讲解 Rest 和 Spread 属性的注意事项。

一、Rest 属性

Rest 属性可以将函数的剩余参数包装成一个数组。我们可以使用 ... (三个点) 来指定 Rest 参数。例如：

function sum(...args) {
  return args.reduce((total, current) => total + current);
}

console.log(sum(1,2,3,4,5));  // 15

上面的代码中，...args 将函数中的所有参数包装成一个数组。数组中的所有项可以用 reduce 方法求和。

1. Rest 参数必须是函数参数列表的最后一项

为什么 Rest 参数必须是函数参数列表的最后一项呢？因为 Rest 参数会将函数参数列表中的部分参数转化成一个数组，如果 Rest 参数不在最后一项，它将会把这些参数全部包装成数组，这将导致函数的参数传递与我们的预期不符。例如：

function test(first, second, ...rest, last) {
  console.log(first, second, rest, last);
}

test(1, 2, 3, 4); // 抛出语法错误，因为 Rest 参数不在函数参数列表的最后一项

1. Rest 参数默认值

Rest 参数也支持默认值语法。例如：

function sum(a, b = 10, ...rest) {
  console.log('a:', a);      // 1
  console.log('b:', b);      // 10
  console.log('rest:', rest);  // [2,3,4,5]
}

sum(1, 2, 3, 4, 5);

上面代码中，Rest 参数被设置为数组 [3, 4, 5]。

二、Spread 属性

Spread 属性可以将数组或对象展开成独立的元素。我们同样可以使用 ... 操作符来指定 Spread 参数。例如：

function sum(a, b, c) {
  return a + b + c;
}

const nums = [1, 2, 3];

console.log(sum(...nums));  //  6

1. Spread 属性用于数组

Spread 属性和 Rest 属性一样，都需要使用 ... 操作符。但它们的作用恰恰相反。Rest 属性将函数的参数转换成数组，而 Spread 属性将数组转化成一个个独立的元素。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr);   // [1,2,3,4,5,6]

上面代码中，...arr1 将 arr1 数组展开为独立的元素，并将其添加到 newArr 数组后面。

1. Spread 属性用于对象

Spread 属性不仅可以用于数组，也可以用于对象。通过使用 Spread 操作符，我们可以快速地复制对象，添加/删除属性，以及为对象创建浅拷贝。例如：

const obj1 = {name: 'Tom', age: 18};
const obj2 = {...obj1, gender: 'male'};
console.log(obj2);  // {name: 'Tom', age: 18, gender: 'male'}

上面代码中，我们使用 Spread 属性复制了 obj1，并为其添加了新的属性 gender。

总结

Rest 和 Spread 是 ES9 版本新增的两个语言特性，通过它们我们可以更方便地操作函数参数以及数组和对象。在使用 Rest 和 Spread 特性时，我们需要注意它们的使用限制。希望本文能为大家学习 ES9 以及优化前端代码提供帮助。

参考资料

1. ES9：新特性概述
2. ES9：Rest 和 Spread 属性

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