如何在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+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告