极客教程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>
在上面的输出中，用户可以观察到60反映在_sizesClone数组中，但没有反映在size数组中，因为我们已经创建了数组的实际副本，而不是像例子2中那样引用数组。
现在，用户清楚地了解了为什么在ES6中不使用赋值运算符，以及为什么要使用spread运算符来克隆数组。