ES6 中的扩展运算符与剩余参数详解及使用示例-JavaScript中文网-JavaScript教程资源分享门户

随着前端开发的不断发展，ES6 作为一种新的 JavaScript 标准，已经被广泛应用到前端开发中。其中，扩展运算符和剩余参数是 ES6 中比较重要的特性之一，也是前端开发中经常用到的语法。本文将详细介绍这两个特性的概念、用法和示例，帮助读者更好地理解和掌握它们。

扩展运算符

扩展运算符是 ES6 中引入的一种新的语法，它用三个点（...）表示，可以将一个数组或类数组对象（比如 arguments 对象）拆分成独立的值，或者将多个值组合成一个数组。下面是一些扩展运算符的使用示例。

将数组拆分成独立的值

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

上面的代码中，扩展运算符将数组 arr 拆分成了独立的值，输出结果为 1 2 3。

将多个值组合成一个数组

const a = 1;
const b = 2;
const c = 3;
const arr = [...a, ...b, ...c];
console.log(arr); // [1, 2, 3]

上面的代码中，扩展运算符将多个值组合成了一个数组 arr，输出结果为 [1, 2, 3]。

复制数组

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // [1, 2, 3]

上面的代码中，扩展运算符将数组 arr1 复制到了数组 arr2 中，输出结果为 [1, 2, 3]。

合并数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

上面的代码中，扩展运算符将数组 arr1 和 arr2 合并到了数组 arr3 中，输出结果为 [1, 2, 3, 4, 5, 6]。

剩余参数

剩余参数也是 ES6 中引入的一种新的语法，它用三个点（...）表示，可以将函数的参数列表中的剩余参数收集成一个数组。下面是一些剩余参数的使用示例。

收集参数

function sum(...args) {
  let total = 0;
  for (let i = 0; i < args.length; i++) {
    total += args[i];
  }
  return total;
}
console.log(sum(1, 2, 3)); // 6

上面的代码中，剩余参数将函数的参数列表中的所有参数收集成了一个数组 args，然后通过循环计算它们的总和，输出结果为 6。

忽略参数

function sum(a, b, ...args) {
  let total = a + b;
  for (let i = 0; i < args.length; i++) {
    total += args[i];
  }
  return total;
}
console.log(sum(1, 2, 3, 4, 5)); // 15

上面的代码中，剩余参数将函数的第三个参数及其后面的所有参数收集成了一个数组 args，然后通过循环计算它们的总和，输出结果为 15。

总结

扩展运算符和剩余参数是 ES6 中比较重要的特性，可以极大地简化前端开发中的代码编写。本文详细介绍了它们的概念、用法和示例，希望读者能够更好地理解和掌握它们，并在实际开发中灵活应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655851c4d2f5e1655d283b8d