如何在JavaScript中使用擴充套件運算子連線兩個或多個數組？

陣列是一個變數，它可以使用適當的語法儲存多個值。每個值都用索引號引用，索引號從0開始。

Const ipl = [“Chennai”, “Mumbai”, Hyderabad”];

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

擴充套件運算子可以將一個物件或陣列的屬性和值複製到另一個物件或陣列。這將是原始物件的淺複製。

Const ipl = [“Chennai”, “Mumbai”, Hyderabad”];

擴充套件運算子可以將一個物件或陣列的屬性和值複製到另一個物件或陣列。這將是原始物件的淺複製。

如何使用擴充套件運算子連線兩個或多個數組

擴充套件運算子可以用於以不可變的方式將陣列的值合併到一個新陣列中。並且會以可變的方式合併到現有陣列的末尾。

const mergeArray = [...array1, ...array2];

示例1

連線兩個不可變陣列

在這種情況下，我們使用擴充套件運算子將兩個或多個數組合併到一個新陣列中。它執行不可變的合併方式。陣列的合併值將返回到另一個新陣列中。

<html>
<body>
   <script>
      //creating arrays
      const team = ['Chennai', 'Mumbai', 'Bangalore'];
      const captain = ['Dhoni', 'Rohit', 'Kohli'];
   
      //Merging arrays using (...) spread operator
      const join = [...team, ...captain];
   
      //New array after merging
      document.write(join); // ['Chennai', 'Mumbai', 'Bangalore', 'Dhoni', 'Rohit', 'Kohli']
   </script>
</body>
</html>

示例2

連線兩個以上的不可變陣列

在下面的情況下，我們使用擴充套件運算子將兩個以上陣列連線到一個新陣列中。這是一種不可變的合併方式。連線後的值將返回到一個新建立的陣列中。

<html>
<body>
   <script>
      //creating arrays
      const team = ['Chennai', 'Mumbai', 'Bangalore'];
      const captain = ['Dhoni', 'Rohit', 'Kohli'];
      const trophies = ['4', '5', '0'];
      
      //Merging arrays using (...) spread operator
      const join = [...team, ...captain, ...trophies];
      
      //New array after merging
      document.write(join); // ['Chennai', 'Mumbai', 'Bangalore', 'Dhoni', 'Rohit', 'Kohli']
   </script>
</body>
</html>

示例3

連線可變陣列

在這種情況下，我們使用`array.push(element)`方法將元素推送到陣列的末尾。`array.push(element)`接受完整的陣列，使用擴充套件運算子將其推送到另一個數組中。這將是**可變**的合併，在此合併中不會建立新陣列。它將合併到現有陣列中。

<html>
<body>
   <script>
      //Creating array
      const bikes = ['Royal Enfield', 'JAWA', 'Ather'];
      const cars = ['Jaguar', 'BMW', 'TATA'];
      
      //Pushing cars array into bikes
      bikes.push(...cars);
      document.write(bikes); // ['Royal Enfield', 'JAWA', 'Ather', 'Jaguar', 'BMW', 'TATA']
   </script>
</body>
</html>

示例4

連線兩個以上可變陣列

在下面的示例中，為了將元素推送到陣列的末尾，我們使用**`array.push(element)`**方法。當使用擴充套件運算子時，`array.push(element)`將整個陣列推送到另一個數組中。我們以**可變**的方式連線兩個以上的陣列。合併後不會建立任何新陣列。

<html>
<body>
   <script>
      //Creating array
      const bikes = ['Royal Enfield', 'JAWA', 'Ather'];
      const cars = ['Jaguar', 'BMW', 'TATA'];
      const airlines = ['AirIndia', 'Indigo', 'SpiceJet', 'Vistara'];
      
      //Pushing cars array into bikes
      bikes.push(...cars, ...airlines);
      document.write(bikes); // ['Royal Enfield', 'JAWA', 'Ather', 'Jaguar', 'BMW', 'TATA']
   </script>
</body>
</html>

注意

我們可以在JavaScript中透過多種方式進行合併。

要組合兩個或多個數組，可以使用函式方法`[].concat(arr1, arr2)`或擴充套件運算子`[...arr1,...arr2]`。合併結果儲存在一個新陣列中，使這些方法成為不可變的。

如果輸出應該在現有陣列中，而無需建立新陣列並執行可變合併，則可以使用`arr1.push(…arr2)`來獲得上述所需結果。

更新於：2022年9月16日

7K+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

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