如何用 ES9 展开运算符将数组转化为参数

在前端开发中，我们经常需要将一个数组作为函数的参数传递，但是数组和函数的参数列表之间貌似缺了点什么。使用 ES9 中的展开运算符可以很好地解决这个问题，它可以将一个数组转换为参数列表，使得代码更加简洁、易读、易维护。

什么是展开运算符

展开运算符是 ES6 中新增的一种运算符，使用三个点（...）表示，可以将数组或类数组对象展开成多个独立的值。

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

const obj = {0: 'a', 1: 'b', 2: 'c', length: 3};
console.log(...obj); // "a" "b" "c"

为什么要使用展开运算符

展开运算符可以用于以下场景：

1. 将数组作为函数的参数传递

   function add(a, b, c) {
     return a + b + c;
   }
   const arr = [1, 2, 3];
   console.log(add(...arr)); // 6

2. 将一个数组合并到另一个数组中

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

3. 复制一个数组

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

使用展开运算符将数组转化为参数

展开运算符可以很方便地将一个数组转化为参数列表传递给函数。

function add(a, b, c) {
  return a + b + c;
}
const arr = [1, 2, 3];
console.log(add(...arr)); // 6

使用展开运算符时，需要注意以下几点：

1. 展开运算符只能用于传递参数列表，不能用于传递单个参数。

   function add(a, b, c) {
     return a + b + c;
   }
   console.log(add(...[1])); // 报错：Missing 2 required positional arguments

2. 传递参数列表时，数组的元素个数必须与函数参数个数匹配。

   function add(a, b, c) {
     return a + b + c;
   }
   console.log(add(...[1, 2, 3, 4])); // 报错：Too many positional arguments

3. 展开运算符可以与其他参数一起使用，但是必须放在参数列表的最后。

   function add(a, b, ...c) {
     let sum = a + b;
     c.forEach(val => sum += val);
     return sum;
   }
   console.log(add(1, 2, ...[3, 4, 5])); // 15

总结

ES9 中的展开运算符可以很方便地将一个数组转化为参数列表传递给函数，使得代码更加简洁、易读、易维护。同时，它还可以用于将一个数组合并到另一个数组中、复制一个数组等场景。使用展开运算符时需要注意参数列表的数量要匹配，而且展开运算符只能用于传递参数列表，不能用于传递单个参数。

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