ECMAScript 2017 (ES8) 如何使用扩展运算符（Spread Operator）与剩余运算符（Rest Parameters）
引言
ECMAScript（简称 ES）是 JavaScript（JS）的标准之一。其每年都会发布新版本，其中包含更多的语法、API 和特性等等。ES6 和 ES7 都为 JavaScript 开发者提供了很多有用的新特性，而 ES8 则为 JavaScript 的进一步发展带来了新的希望。其中，扩展运算符和剩余运算符就是其中两个非常实用的特性。
什么是扩展运算符？
扩展运算符是在 ES6 中引入的，可以将一个数组、对象或字符串等可迭代对象展开，以便在函数调用时作为参数传递。扩展运算符语法为：...。
让我们先看一个基本的例子：如何将一个数组复制到另一个数组中。
var arr1 = [1, 2, 3]; var arr2 = [...arr1]; console.log(arr2); // [1, 2, 3]
在这个例子中，我们使用了扩展运算符来将 arr1 展开为一个新数组，并将其赋值给了 arr2。由于在 JavaScript 中，数组是引用类型，因此如果不使用扩展运算符，那么 arr2 将会成为 arr1 的引用，而不是一个新的数组。
扩展运算符不仅适用于数组，也适用于对象。让我们看一个在对象字面量中使用扩展运算符的例子：
var obj1 = { a: 1, b: 2 };
var obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }在这个例子中，我们将 obj1 展开，并将一个新的属性 c 添加到对象中。结果是一个新的对象，其中包含了 obj1 的所有属性，以及新的属性 c。
扩展运算符适用的场景不仅限于数组和对象，还可以将字符串、Set、Map 等可迭代对象展开。例如：
-- -------------------- ---- ------- --- --- - -------- --- --- - --------- ----------------- -- ----- ---- ---- ---- ---- --- ---- - --- ------- -- ---- --- ---- - ---------- ------------------ -- --- -- -- --- ---- - --- ---------- --- ----- ----- --- ---- - ---------- ------------------ -- ------ --- ----- ---
在这个例子中，我们分别将字符串、Set、Map 展开为了数组。
什么是剩余运算符？
剩余运算符是 ES6 中引入的另一个特性，与扩展运算符相反。剩余运算符允许我们将多个参数转换为一个参数数组，以在函数参数中使用。语法是同样的 ...，但它出现在函数参数列表的末尾。
让我们看一个示例：如何计算多个数字的平均数。
function average(...nums) {
var total = nums.reduce((sum, num) => sum + num, 0);
return total / nums.length;
}
console.log(average(2, 4, 6, 8)); // 5在这个例子中，我们定义了一个函数 average，使用剩余运算符将传递给该函数的所有数字转换为一个参数数组。然后对该数组求和并除以该数组的长度，即可计算平均值。
剩余运算符还可以用于解构赋值，示例如下：
var arr1 = [1, 2, 3, 4, 5];
var [a, b, ...c] = arr1;
console.log(a, b, c); // 1 2 [3, 4, 5]
var obj1 = { x: 1, y: 2, z: 3 };
var { x, ...others } = obj1;
console.log(x, others); // 1 { y: 2, z: 3 }在这个例子中，我们使用了剩余运算符，将数组和对象中的剩余元素赋值给了变量 c 和 others。
结论
扩展运算符和剩余运算符已成为现代 JavaScript 开发中必备的工具之一。当你感觉需要展开或收集多个参数或元素时，使用扩展运算符或剩余运算符。生活可以变得更简单！
致谢
感谢您的阅读！如果您对本文有任何疑问或意见，欢迎在下面的评论中留言。代码示例也可从我的代码仓库中获取：https://github.com/johndoe/es8-spread-rest。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6713f3eaad1e889fe21140f2