亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.430618.com 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

在 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其它相關文章!

分享到:
標簽:ES6 克隆 如何在 數組
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定