在前端开发中，ES7 中的扩展操作符和剩余操作符是非常常用的语法。它们可以让我们更方便地处理数组和对象，提高代码的可读性和可维护性。本文将详细介绍 ES7 中的扩展操作符和剩余操作符，并提供示例代码，帮助读者更好地理解和应用这两个操作符。
扩展操作符
扩展操作符用于展开数组或对象，将其拆分为单个元素。在 ES7 中，扩展操作符使用三个点（...）表示。下面是使用扩展操作符展开数组和对象的示例代码：
// javascriptcn.com 代码示例
// 展开数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]
// 展开对象
const obj1 = { name: 'Tom', age: 18 };
const obj2 = { ...obj1, gender: 'male' };
console.log(obj2); // { name: 'Tom', age: 18, gender: 'male' }从示例代码可以看出，使用扩展操作符展开数组和对象非常简单。在展开数组时，我们可以在新数组中使用 [...原数组] 来将原数组的元素展开到新数组中；在展开对象时，我们可以在新对象中使用 {...原对象} 来将原对象的属性展开到新对象中。需要注意的是，展开操作符只能用于数组和对象，不能用于字符串和数字等其他类型的数据。
扩展操作符不仅可以用于创建新数组和新对象，还可以用于函数参数和函数返回值。下面是使用扩展操作符处理函数参数和函数返回值的示例代码：
// javascriptcn.com 代码示例
// 处理函数参数
function sum(a, b, c) {
return a + b + c;
}
const arr = [1, 2, 3];
console.log(sum(...arr)); // 6
// 处理函数返回值
function getInfo() {
return { name: 'Tom', age: 18 };
}
const { name, age } = getInfo();
console.log(name, age); // Tom 18从示例代码可以看出，使用扩展操作符处理函数参数和函数返回值非常方便。在处理函数参数时，我们可以使用 ...数组 将数组的元素作为函数参数传入；在处理函数返回值时，我们可以使用 {...对象} 将对象的属性解构为单独的变量。
剩余操作符
剩余操作符用于将不确定数量的参数收集到一个数组中。在 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