資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 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 陣列並不存在。當我們將 strings 陣列賦值給 strings2 陣列時，它會生成對 strings 陣列的引用。因此，每當我們更改 strings2 陣列時，它也會更改 strings 陣列。
所以，我們需要建立一個數組的實際副本，而無需引用另一個數組。
現在，讓我們學習如何在 ES6 中克隆陣列。
在 ES6 中使用擴充套件運算子 (…) 克隆陣列
擴充套件運算子的語法是三個點 (…)。我們可以使用它來展開可迭代物件，例如陣列。擴充套件運算子會建立一個數組或物件的新的副本。
語法
使用者可以按照以下語法使用擴充套件運算子複製陣列。
let booleansCopy = [...booleans];
示例
在下面的示例中，我們建立了一個 boolean 陣列，其中包含不同的布林值。之後，我們使用擴充套件運算子建立了 boolean 陣列的副本，並將該副本賦值給 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 陣列包含不同的數字值。我們使用擴充套件運算子建立了 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 陣列* 中，但不在 sizes 陣列中，因為我們建立了陣列的實際副本，而不是像示例 2 中那樣引用陣列。
現在，使用者清楚地瞭解了為什麼不應在 ES6 中使用賦值運算子，以及為什麼應使用 *擴充套件運算子* 來克隆陣列。
瀏覽量：551
