JS中的扩展操作符...(点点点)

前言

---

大家应该都在代码中用过或者看到…方法，我每次用到这个方法的时候都会想到第一次见到这个方法一头雾水的样子，心想为什么会有这样子的写法以及方法，后面也是因为在工作中需求太多没有深入去了解这个方法，今天就深入的分析一下。

概述

在 ES6 中，…（点点点）被称为扩展操作符（Spread Operator）或剩余操作符（Rest Operator），它使用三个连续的点来展开一个可迭代对象（例如数组、字符串、对象等），将其拆分成独立的元素。

拓展操作符（Spread Operator）

扩展操作符用于将一个可迭代对象（如数组或类数组对象）拆分为单独的元素，在函数调用、数组字面量或对象字面量中使用。以下是一些使用扩展操作符的示例：

• 数组拆分：

const array = [1, 2, 3];
const newArray = [...array]; // 拆分为独立的元素
console.log(newArray); // 输出 [1, 2, 3]

• 函数调用：

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

const args = [1, 2, 3];
myFunction(...args); // 将数组元素作为独立的参数传递给函数

• 数组合并：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2]; // 合并两个数组
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]

看到这里大家可能会想到一个点：
当我定义一个array之后，将array赋值给array1，例如：

const array = [1,2,3]
array1 = array
console.log(array1)	//输出[1,2,3]

与我下面用拓展操作符：

const array = [1,2,3]
array1 = [...array]
console.log(array1)	//输出[1,2,3]

这两个方法值都是一样的那么他们是否又相等呢？

赋值与扩展操作符的区别

这里我们看到他们的值的确是一样的，但是在 JavaScript 中，将 array1 设置为 array 或 […array ] 是有细微差别的。
这里就涉及到深拷贝与浅拷贝的内容了

1. array1 = array
   这种方式将array1 变量指向了 array数组的引用，它们实际上指向了同一个数组。如果你修改 array 或 array1 中的元素，另一个数组也会受到影响。这是因为它们引用的是同一个数组对象。
2. array1 = […array]
   这种方式使用扩展操作符创建了一个 array数组的浅拷贝副本，并将其赋值给 array1 变量。array1 指向的是一个新的数组，而不是原始的 array 数组对象。修改 array1不会影响到 array。

总结一下，使用 array1 = array 会让 array1和 array 引用同一个数组对象，而使用 array1= […array ] 则会创建一个新的数组副本给 array1，二者对原始数组的修改的影响是不同的。

如果你想要创建一个数组的独立副本，以便对其进行独立的操作，建议使用 array1 = […array ] 或其他深拷贝方法，而不是将其指向同一个引用。

剩余操作符（Rest Operator）

剩余操作符用于将剩余的参数收集为一个数组，在函数参数中使用。以下是一个使用剩余操作符的示例：

function myFunction(a, b, ...rest) {
  console.log(a); // 第一个参数
  console.log(b); // 第二个参数
  console.log(rest); // 剩余的参数作为数组
}

myFunction(1, 2, 3, 4, 5); // 输出：1 2 [3, 4, 5]

通过使用 ... 运算符，你可以更方便地操作数组和函数参数。