ES6 扩展运算符

在 ES6 之前，我们需要使用一些方法来处理数组和对象。但是，ES6 扩展运算符为我们提供了一种更简单，更直观的方式来处理数组和对象的数据。本篇文章将介绍 ES6 扩展运算符的一些基本用法及其特性。

什么是 ES6 扩展运算符

ES6 扩展运算符是三个点（...），它可以将一个数组或对象展开成单独的元素。它可以应用于函数调用和数组和对象字面量等。

扩展运算符的基本用法

1. 打散数组

通过使用“...”操作符，我们可以轻松地展开数组。如：

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

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

2. 复制数组

扩展运算符还可以用于复制整个数组。如：

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // 复制 arr1 的值到 arr2

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

3. 将一个或多个元素添加到数组

我们可以使用扩展运算符将一个或多个元素添加到一个数组中。如：

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

console.log(arr2); // [1, 2, 3, 4, 5]

4. 将数组合并为对象

我们也可以将数组合并为对象，如：

const obj = { name: 'John', age: 30 };
const arr = [...Object.entries(obj)];

console.log(arr); // [['name', 'John'], ['age', 30]]

5. 将对象合并到新对象

我们可以将一个或多个对象合并为新对象，如：

const obj1 = { name: 'John' };
const obj2 = { age: 30 };
const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // { name: 'John', age: 30 }

扩展运算符的特性

1. 不会改变原数组或对象

使用扩展运算符不会改变原数组或对象，只会创建新的数组或对象。如：

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

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

2. 拷贝 Object

使用扩展运算符复制一个对象的值会得到单独的引用。它并不是深拷贝。这意味着当原始对象的属性值改变时，复制的对象属性值也会更改。如：

const obj1 = { name: 'John', age: 30 };
const obj2 = { ...obj1 };

obj2.age = 40;

console.log(obj1.age); // 30
console.log(obj2.age); // 40

如果需要深拷贝，需要使用其他方法。

3. 可以用于只传部分参数的函数调用

扩展运算符也可以用于只传部分参数的函数调用。如：

function myFunc(a, b, c) {
  console.log(a, b, c);
}

const arr1 = [1, 2, 3];
myFunc(...arr1); // 1, 2, 3

const arr2 = [1, 2];
myFunc(...arr2, 3); // 1, 2, 3

4. 可以用于 Destructuring

扩展运算符还可以与 Destructuring 组合使用。如：

const arr = [1, 2, 3, 4, 5];
const [first, second, ...rest] = arr;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

总结

ES6 扩展运算符可以让我们更加方便地处理数组和对象数据。通过使用扩展运算符，我们可以更容易地打散数组，复制数组，将一个或多个元素添加到数组，将数组合并为对象，将对象合并到新对象等。同时，扩展运算符还具有不改变原数组或对象、可以用于只传部分参数的函数调用、可以用于 Destructuring 等特性。