如何在JavaScript中使用擴充套件運算子克隆陣列？

在本文中，我們將討論如何使用擴充套件運算子在JavaScript中克隆陣列。

克隆只是將一個數組複製到另一個數組的過程。以前，`slice()` 方法用於克隆陣列，但是ES6現在提供擴充套件運算子(...)來簡單地克隆陣列。

在繼續之前，讓我們看一下陣列和擴充套件運算子的定義。

陣列

陣列通常是一種資料結構，在JavaScript中它是一個可以一次儲存多個值的 物件。例如，下面的“Arr”就是一個數組。

Const Arr = [‘Tutorials’, ‘Point’, ‘India’];

為了避免建立已經存在的物件，JavaScript克隆涉及將物件的屬性複製到另一個物件。這個過程稱為克隆。

擴充套件運算子(...)

這個稱為擴充套件運算子(...)的JavaScript運算子將快速地將現有物件或陣列中的內容複製到新的物件或陣列中。

const arrValue = ['Welcome', 'to', 'Tutorials', 'Point'];
document.write(arrValue); // ["Welcome", "to", "tutorials", "point"]
document.write(...arrValue); // Welcome to tutorials point

使用擴充套件運算子(...)進行克隆

ES6中的擴充套件運算子將用於克隆陣列。此運算子將生成現有陣列的淺複製。使用擴充套件運算子將建立一個新陣列，用於放入從現有陣列複製的元素。

示例1

讓我們看一個使用擴充套件運算子克隆陣列的例子。

<!DOCTYPE html>
<html>
<head>
   <script>
   
      // Cloning an array using slice() operator
      const existingArray = ["Dhoni", "Kohli", "Rohit", "KL Rahul"];
      const newArray= [...existingArray];
      document.write(newArray); // ["Dhoni", "Kohli", "Rohit", "KL Rahul"]
   </script>
</head>
</html>

示例2

在下面的指令碼中，我們向現有陣列中添加了一個元素。由於它將進行淺複製，因此它不會反映在複製的陣列中。

<!DOCTYPE html>
<html>
<head>
   <script>
      let array1 = ["INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"];
      let array2 = [...array1];
      document.write(array1); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"]
      document.write(array2); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"]

      // append an item to the array
      array1.push("SRI LANKA");
      document.write(array1); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND", "SRI LANKA]
      document.write(array2); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND", "SRI LANKA]
   </script>
</head>
</html>

示例3

在下面的指令碼中，我們向現有陣列中添加了一個元素。由於它將進行深複製，因此它不會反映在複製的陣列中。物件不是按值賦值，而是按引用賦值。

<!DOCTYPE html>
<html>
<head>
   <script>
      let array1 = ["INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"];
      let array2 = array1;
      document.write(array1); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"]
      document.write(array2); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"]
      
      // append an item to the array
      array1.push("SRI LANKA");
      document.write(array1); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND", "SRI LANKA]
      document.write(array2); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND", "SRI LANKA]
   </script>
</head>
</html>

使用擴充套件運算子進行淺複製和深複製

淺複製只在儲存原始物件或陣列的副本後複製引用地址。

深複製將複製原始物件的元素和重複的副本。複製的物件將與原始元素完全相同。

示例1

<!DOCTYPE html>
<html>
<head>
   <script>
      // Shallow copy and deep copy of array
      const existingArray = ["Dhoni", "Kohli", "Rohit", “KL Rahul”];
      const newArray = [...existingArray];
      const dupArray = existingArray;
      
      // Will print FALSE, because it is a shallow copy
      document.write(newArray === existingArray)
      document.write("<br>")
      
      // Will print TRUE, because it is a deep copy
      document.write(dupArray === existingArray)
   </script>
</head>
</html>

注意

`=` 運算子，此運算子將建立一個新的變數，該變數僅指向現有陣列，而不是將元素從現有元素複製到新建立的變數。

`(...)` 運算子，擴充套件語法運算子將建立一個具有與原始陣列不同引用但相同值的克隆陣列。複製陣列的值與原始陣列相同，但與原始陣列並不相同。

更新於：2022年9月16日

2K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.