在 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 數組分配給 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];
登錄后復制
示例
在下面的示例中,我們創建了布爾數組,其中包含不同的布爾值。之后,我們使用擴展運算符創建了布爾數組的副本,并將該副本分配給 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>
登錄后復制
示例
在下面的示例中,尺寸數組包含不同的數值。我們使用展開運算符創建了 size 數組的副本,并使用賦值運算符將該數組存儲在sizedClone 變量中。
之后,我們將 60 推入 sizeClone 數組。
<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 中不使用賦值運算符以及為什么使用擴展運算符來克隆數組。
以上就是如何在 ES6 中克隆數組?的詳細內容,更多請關注www.92cms.cn其它相關文章!