在 ES5 中，我們使用 concat 方法來復(fù)制數(shù)組。此外，一些開發(fā)人員使用 slice() 方法，通過傳遞 0 作為參數(shù)來對引用數(shù)組的所有元素進(jìn)行切片并創(chuàng)建一個(gè)新數(shù)組。
示例
用戶可以按照下面的示例使用 slice() 方法克隆數(shù)組。我們創(chuàng)建了 array1，其中包含不同數(shù)據(jù)類型的值。之后，我們使用 slice() 方法復(fù)制 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>
登錄后復(fù)制
用戶已經(jīng)了解了我們?nèi)绾卧?ES5 中克隆數(shù)組。
此外，用戶可以考慮復(fù)制數(shù)組，就像使用賦值運(yùn)算符復(fù)制字符串、數(shù)字和布爾值等普通變量一樣。
用戶在使用賦值運(yùn)算符復(fù)制數(shù)組時(shí)可能會遇到問題。讓我們通過下面的例子來理解它。
使用賦值運(yùn)算符復(fù)制數(shù)組
在下面的示例中，字符串?dāng)?shù)組包含各種字符串。我們已將 strings 數(shù)組分配給 strings2 數(shù)組。之后，我們將新的字符串值推送到 strings2 數(shù)組中。
示例
<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>
登錄后復(fù)制
在上面的輸出中，用戶可以觀察到，當(dāng)我們將字符串值推送到 strings2 數(shù)組時(shí)，它也推送到 strings 數(shù)組。為什么會發(fā)生這種情況？
在這里，可變和不可變對象的概念發(fā)揮了作用。
可變對象與不可變對象
在 JavaScript 中，數(shù)組和對象是可變的，這意味著我們可以在創(chuàng)建它們后初始化它們后更改它們的值。因此，上例中不存在 strings2 數(shù)組。當(dāng)我們將 strings 數(shù)組分配給 strings2 數(shù)組時(shí)，它會生成對 strings 數(shù)組的引用。因此，每當(dāng)我們更改 strings2 數(shù)組時(shí)，它也會更改 strings 數(shù)組。
因此，我們需要創(chuàng)建數(shù)組的實(shí)際副本，而不引用其他數(shù)組
現(xiàn)在，讓我們學(xué)習(xí)如何在 ES6 中克隆數(shù)組。
在 ES6 中使用擴(kuò)展運(yùn)算符 (…) 克隆數(shù)組
展開運(yùn)算符的語法是三個(gè)點(diǎn) (…)。我們可以用它來像數(shù)組一樣傳播可迭代對象。擴(kuò)展運(yùn)算符創(chuàng)建數(shù)組或?qū)ο蟮男赂北尽?/p>
語法
用戶可以按照以下語法使用擴(kuò)展運(yùn)算符復(fù)制數(shù)組。
let booleansCopy = [...booleans];
登錄后復(fù)制
示例
在下面的示例中，我們創(chuàng)建了布爾數(shù)組，其中包含不同的布爾值。之后，我們使用擴(kuò)展運(yùn)算符創(chuàng)建了布爾數(shù)組的副本，并將該副本分配給 booleanCopy 變量。
在輸出中，用戶可以觀察到 booleanCopy 數(shù)組包含與 boolean 數(shù)組包含的值相同的值。
<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>
登錄后復(fù)制
示例
在下面的示例中，尺寸數(shù)組包含不同的數(shù)值。我們使用展開運(yùn)算符創(chuàng)建了 size 數(shù)組的副本，并使用賦值運(yùn)算符將該數(shù)組存儲在sizedClone 變量中。
之后，我們將 60 推入 sizeClone 數(shù)組。
<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>
登錄后復(fù)制
在上面的輸出中，用戶可以觀察到 60 反映在 sizesClone 數(shù)組中，但沒有反映在 Sizes 數(shù)組中，因?yàn)槲覀儎?chuàng)建了數(shù)組的實(shí)際副本，而不是像示例 2 中那樣引用數(shù)組.
現(xiàn)在，用戶清楚地明白為什么在 ES6 中不使用賦值運(yùn)算符以及為什么使用擴(kuò)展運(yùn)算符來克隆數(shù)組。
以上就是如何在 ES6 中克隆數(shù)組？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
