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

启动你的职业生涯

完成课程获得认证

开始学习
广告