在前端开发中，我们常常需要处理数组和对象。ES6 以前，我们处理数组和对象的方式比较繁琐。但随着 ES6 引入 spread 操作符，我们的代码变得更加优雅和自由。而 ES9 引入 rest/spread 操作符，则是对之前的进一步扩展，使得我们的代码更加简洁和易读。
Rest 操作符
Rest 操作符可以将一个不定数量的参数表示为一个数组。在函数调用时使用这个操作符，可以将所有参数传入一个数组中。
Rest 操作符的语法如下：
function foo(...params) {
console.log(params);
}
foo(1, 2, 3, 4, 5);执行上面的代码，输出结果如下：
[1, 2, 3, 4, 5]
顾名思义，Rest 操作符会把所有剩余的参数表示为一个数组。在上面的例子中，我们调用函数 foo 的时候，传入了 5 个参数，Rest 操作符将这 5 个参数表示为一个数组，打印出来。
除了在函数传递参数的时候使用 Rest 操作符，在解构赋值中也可以使用 Rest 操作符。例如：
const arr = [1, 2, 3, 4, 5]; const [a, b, ...rest] = arr; console.log(a, b, rest);
执行上面的代码，输出结果如下：
1 2 [3, 4, 5]
在上面的例子中，我们使用了解构赋值来将数组中的前两个元素分别赋值给变量 a, b，后面的元素使用 Rest 操作符来表示。
Spread 操作符
Spread 操作符可以在函数调用/数组构造时，将数组或者对象展开为多个参数。它可以在函数调用时将数组作为参数传递进去；也可以在构造数组时将多个数组合并成一个。
Spread 操作符的语法如下：
function foo(a, b, c, d, e) {
console.log(a, b, c, d, e);
}
const arr = [1, 2, 3, 4, 5];
foo(...arr);执行上面的代码，输出结果如下：
1 2 3 4 5
在上面的例子中，我们使用了 Spread 操作符将数组 arr 展开为函数 foo 的参数。
除了在函数调用的时候使用 Spread 操作符，我们还可以在数组构造时使用 Spread 操作符。例如：
const arr1 = [1, 2]; const arr2 = [3, 4, 5]; const arr3 = [...arr1, ...arr2]; console.log(arr3);
执行上面的代码，输出结果如下：
[1, 2, 3, 4, 5]
在上面的例子中，我们使用了 Spread 操作符将两个数组合并成一个新的数组。
总结
Rest/Spread 操作符是 ES9 新增的语法糖，可以让我们更加优雅和自由地处理数组和对象。使用 Rest 操作符可以将一个不定数量的参数表示为一个数组；使用 Spread 操作符可以在函数调用/数组构造时，将数组或者对象展开为多个参数。这两个操作符可以帮助我们更好地组织我们的代码，使得代码更加简洁易读。在实际开发中，我们可以灵活运用这两个操作符，使得我们的代码更加容易维护和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6456e6cb968c7c53b09cf5a7