ES6 复制一个数组

在ES5中，我们使用concat方法来制作一个数组的副本。另外，一些开发者使用slice()方法，通过传递0作为参数，对引用数组的所有元素进行切片，并创建一个新数组。

示例

用户可以按照下面的例子使用slice()方法来克隆数组。我们已经创建了array1，它包含了不同数据类型的值。之后，我们使用slice()方法对array1进行了复制，并将其存储在’clone’变量中。

<html>
<body>
   <h2>Using the <i>slice()</i> method to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array1 = [10, "hello", 30, true];
      output.innerHTML += "The original array: " + array1 + " <br>";
      let clone = array1.slice(0);
      output.innerHTML += "The cloned array: " + clone + " <br>";
   </script>
</body>
</html>

用户已经了解到我们是如何在ES5中克隆阵列的。

另外，用户可以考虑使用赋值运算符像复制普通变量一样复制数组，如字符串、数字和布尔值。

用户在使用赋值运算符复制数组时可能面临一个问题。让我们通过下面的例子来理解它。

使用赋值操作符复制数组

在下面的例子中，strings数组包含各种字符串。我们将strings数组分配给了strings2数组。之后，我们将新的字符串值推送到strings2数组中。

示例

<html>
<body>
   <h2>Using the <i>assignment</i> operator to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array1 = ["Hi", " users", "Welcome"];
      let array2 = array1;
      array2.push("New value");
      output.innerHTML += "The value of array2: " + array2 + " <br>";
      output.innerHTML += "The value of array1: " + array1 + " <br>";
   </script>
</body>
</html>

在上述输出中，用户可以观察到，当我们将字符串值推送到strings2数组时，它也推送到了strings数组。为什么会出现这种情况？

在这里，可变和不可变的对象的概念开始发挥作用。

可变与不可变的对象

在JavaScript中，数组和对象是可变的，这意味着一旦我们在创建它们之后初始化它们，我们就可以改变它们的值。所以，在上面的例子中，strings2数组是不存在的。当我们把字符串数组分配给strings2数组时，它就会产生对字符串数组的引用。所以，只要我们改变strings2数组，它也会改变strings数组。

所以，我们需要创建一个实际的数组副本，而不需要引用其他数组

现在，我们来学习在ES6中克隆数组。

在ES6中使用传播操作符(…)来克隆一个数组

传播操作符的语法是三个点（…）。我们可以用它来传播像数组一样的可迭代对象。传播操作符会创建一个新的数组或对象的副本。

语法

用户可以按照下面的语法，使用传播操作符复制数组。

let booleansCopy = [...booleans];

示例

在下面的例子中，我们已经创建了布尔数组，它包含了不同的布尔值。之后，我们使用spread操作符创建了布尔数组的副本，并将该副本分配给booleanCopy变量。

在输出中，用户可以观察到booleanCopy数组包含的值与boolean数组包含的值相同。

<html>
<body>
   <h2>Using the <i> spread operator </i> to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let booleans = [true, false, false, true, true];
      let booleansCopy = [...booleans];
      output.innerHTML += "The values of the booleansCopy array: " + booleansCopy + "<br>";
   </script>
</body>
</html>

示例

在下面的例子中， sizes数组包含不同的数字值。我们使用传播操作符创建了大小数组的副本，并使用赋值操作符将该数组存储在 sizesClone 变量中。

之后，我们把60个推送到 sizesClone数组。

<html>
<body>
   <h2>Using the <i>spread</i> operator to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let sizes = [34, 43, 45, 47, 49, 50];
      output.innerHTML += "-------Before Push-------" + "<br>";
      output.innerHTML += "The values of the sizes array: " + sizes + "<br>";
      let sizesClone = [...sizes];
      output.innerHTML += "The values of the sizesClone array: " + sizesClone + "<br>";
      sizesClone.push(60);
      output.innerHTML += "------After Push------" + "<br>";
      output.innerHTML += "The values of the sizes array: " + sizes + "<br>";
      output.innerHTML += "The values of the sizesClone array:" + sizesClone + "<br>";
   </script>
</body>
</html>