ES6 ...扩展（spread）/收集（rest）运算符详解

1. 简介

ES6中引入了...扩展/收集（spread/rest）运算符，它是一种方便且强大的语法，可以简化代码的编写，提高开发效率。它主要应用于数组和对象的操作。

2. ...扩展运算符

2.1 扩展数组

使用...扩展运算符，可以将一个数组展开为多个独立的值。例如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

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

上述代码中，通过使用...扩展运算符，我们将arr1和arr2合并成一个新的数组combinedArr。

2.2 克隆数组

使用...扩展运算符，还可以快速、简洁地克隆一个数组。例如：

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

上述代码中，通过将原数组arr展开，我们创建了一个与arr相同的新数组clonedArr。

2.3 扩展对象

除了数组，...扩展运算符还可以用于对象。它可以将一个对象展开为多个独立的键值对。例如：

const obj1 = { name: 'Alice' };
const obj2 = { age: 20 };

const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // { name: 'Alice', age: 20 }

上述代码中，我们通过...扩展运算符将obj1和obj2合并成一个新的对象combinedObj。

2.4 克隆对象

同样地，通过...扩展运算符，我们还可以快速、简洁地克隆一个对象。例如：

const obj = { name: 'Alice', age: 20 };
const clonedObj = { ...obj };
console.log(clonedObj); // { name: 'Alice', age: 20 }

上述代码中，通过将原对象obj展开，我们创建了一个与obj相同的新对象clonedObj。

3. ...收集运算符

3.1 收集数组

除了扩展运算符，...收集运算符也非常有用。它可以将多个参数收集为一个数组。例如：

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6)); // 15

上述代码中，我们定义了一个sum函数，使用...收集运算符将传入的参数收集为一个数组numbers，然后对数组中的所有值进行求和。

3.2 收集对象

同样地，...收集运算符也可以用于收集对象中的多个属性。例如：

function concatenate(...strings) {
  let result = '';
  for (let str of strings) {
    result += str;
  }
  return result;
}

console.log(concatenate('Hello', ' ', 'World')); // 'Hello World'
console.log(concatenate('I', ' ', 'love', ' ', 'JavaScript')); // 'I love JavaScript'

上述代码中，我们定义了一个concatenate函数，通过...收集运算符将传入的参数收集为一个数组strings，然后将数组中的所有值进行字符串连接。

4. 总结

...扩展/收集运算符是ES6中非常有用的语法，在处理数组和对象时，可以大大简化代码的编写，提高开发效率。它的灵活性使得它适用于各种场景，同时也方便了代码的维护和阅读。希望本篇文章对你理解和运用...扩展/收集运算符有所帮助。