在前端开发中，ES7 中的扩展操作符和剩余操作符是非常常用的语法。它们可以让我们更方便地处理数组和对象，提高代码的可读性和可维护性。本文将详细介绍 ES7 中的扩展操作符和剩余操作符，并提供示例代码，帮助读者更好地理解和应用这两个操作符。
扩展操作符
扩展操作符用于展开数组或对象，将其拆分为单个元素。在 ES7 中，扩展操作符使用三个点（...）表示。下面是使用扩展操作符展开数组和对象的示例代码：
-- -------------------- ---- ------- -- ---- ----- ---- - --- -- --- ----- ---- - --------- -- -- --- ------------------ -- --- -- -- -- -- -- -- ---- ----- ---- - - ----- ------ ---- -- -- ----- ---- - - -------- ------- ------ -- ------------------ -- - ----- ------ ---- --- ------- ------ -
从示例代码可以看出，使用扩展操作符展开数组和对象非常简单。在展开数组时，我们可以在新数组中使用 [...原数组] 来将原数组的元素展开到新数组中；在展开对象时，我们可以在新对象中使用 {...原对象} 来将原对象的属性展开到新对象中。需要注意的是，展开操作符只能用于数组和对象，不能用于字符串和数字等其他类型的数据。
扩展操作符不仅可以用于创建新数组和新对象，还可以用于函数参数和函数返回值。下面是使用扩展操作符处理函数参数和函数返回值的示例代码：
-- -------------------- ---- ------- -- ------ -------- ------ -- -- - ------ - - - - -- - ----- --- - --- -- --- ------------------------- -- - -- ------- -------- --------- - ------ - ----- ------ ---- -- -- - ----- - ----- --- - - ---------- ----------------- ----- -- --- --
从示例代码可以看出，使用扩展操作符处理函数参数和函数返回值非常方便。在处理函数参数时，我们可以使用 ...数组 将数组的元素作为函数参数传入；在处理函数返回值时，我们可以使用 {...对象} 将对象的属性解构为单独的变量。
剩余操作符
剩余操作符用于将不确定数量的参数收集到一个数组中。在 ES7 中，剩余操作符同样使用三个点（...）表示。下面是使用剩余操作符收集函数参数的示例代码：
function sum(...args) {
return args.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15从示例代码可以看出，使用剩余操作符收集函数参数非常方便。在函数定义时，我们可以使用 ...参数名 将所有参数收集到一个数组中；在函数内部，我们可以像操作普通数组一样操作这个数组。
需要注意的是，剩余操作符必须放在参数列表的最后一个位置，否则会报错。另外，剩余操作符只能用于函数参数，不能用于其他地方。
总结
本文详细介绍了 ES7 中的扩展操作符和剩余操作符，并提供了示例代码。扩展操作符用于展开数组或对象，将其拆分为单个元素；剩余操作符用于将不确定数量的参数收集到一个数组中。这两个操作符可以大大提高代码的可读性和可维护性，是开发中不可或缺的语法。希望本文能够帮助读者更好地理解和应用这两个操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657af5a3d2f5e1655d576790