前言
ECMAScript 2018 （简称 ES2018）是 JavaScript 的一个新版本，提供了许多新的特性和改进。展开和剩余操作符是其中之一，已经成为前端开发者日常开发中常用的工具之一。本文将详细解释 ES2018 中展开和剩余操作符的应用，帮助读者更好地了解如何应用这些操作符。
展开操作符
展开操作符通常使用在数组或对象中，用于展开一个数组或对象的元素或属性。展开操作符在某些情况下能够提高代码的可读性和性能。
展开数组
在 ES6 中，展开数组的操作符是三个点（...）符号。例如，可以使用展开操作符将一个数组展开成多个元素：
const arr1 = [1, 2, 3]; console.log(...arr1); // 1 2 3
我们也可以使用展开操作符来进行数组合并：
const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
展开对象
在 ES2018 中，可以使用展开语法来展开对象。例如：
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }在这个例子中，我们使用了展开操作符来将 obj1 对象中的属性展开到 obj2 中，并新增了一个属性 d。
剩余操作符
剩余操作符也是一个类似展开操作符的语言特性，它可以用来获取函数的参数或数组的剩余部分。
获取函数的参数
剩余操作符可以用于获取不定数量的函数参数，可以将这些参数放入一个数组中。
-- -------------------- ---- -------
-------- ------------------- -
--- ------ - --
--- ---- - - -- - - ------------ ---- -
------ -- --------
-
------ -------
-
------------------------- -- ---- -- -
------------------------- -- -- -- ---- -- --在这个例子中，我们将所有传入 addNumbers 函数的参数放入了一个名为 nums 的数组中。
获取数组的剩余部分
剩余操作符还可以用于获取数组的剩余部分，将其放入一个新的数组中。
const [a, b, ...c] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.log(b); // 2 console.log(c); // [3, 4, 5]
在这个例子中，我们使用了剩余操作符将数组中除了前两个元素以外的所有元素都挤进数组 c 中。
总结
展开和剩余操作符是个十分有用的工具，它可以帮助我们更方便地处理数组或对象，也可以用于获取不定数量的函数参数或数组的剩余部分。在日常的开发中，我们可以使用这两个操作符来提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7ef48f6b2d6eab335c9fa