JavaScript - 展开运算符

什么是展开运算符？

JavaScript 的展开运算符 (… ) 允许我们将可迭代对象（例如数组）的元素展开。展开运算符用三个点 (… ) 表示。此运算符是在 ES6 中引入的。展开运算符的主要用例是复制数组元素、使用剩余参数连接数组或对象等。

让我们举一个展开数组元素的例子 -

let x = ["Tutorials", "Point"];
console.log(x); // [ 'Tutorials', 'Point' ]
console.log(...x); // Tutorials Point

展开运算符连接数组

JavaScript 展开运算符可以用于连接数组。

示例

在下面的示例中，我们定义了两个不同的数组。之后，我们使用展开运算符连接这些数组。

<html>
<body>
   <div id = "output"></div>
   <script>
      const nums1 = [10, 20, 30];
      const nums2 = [40, 50, 60];
      const res = [...nums1, ...nums2];
      document.getElementById("output").innerHTML = res;
   </script>
</body>
</html>

它将产生以下结果 -

10,20,30,40,50,60

您还可以更改数组的连接顺序。

展开运算符克隆数组

在 JavaScript 中，当我们将一个数组（对象）赋值给另一个数组时，它会分配引用而不是克隆数组。因此，每当您更新原始数组时，它也会更新克隆的数组。赋值运算符创建数组的深拷贝。

示例：不使用展开运算符

在此示例中，我们定义了一个名为 nums1 的数组。我们定义了另一个名为 nums2 的数组并将数组 nums1 赋值给数组 nums2。在这里，您可以看到，当您更改 nums1 时，它也会更新 nums2。

<html>
<body>
   <div id = "result1"></div>
   <div id = "result2"></div>
   <script>
      const nums1 = [10, 20, 30];
      const nums2 = nums1;
      document.getElementById("result1").innerHTML = nums2;
      nums1.push(40);
      document.getElementById("result2").innerHTML = nums2;
   </script>
</body>
</html>

它将产生以下结果 -

10,20,30
10,20,30,40

示例：使用展开运算符克隆数组

使用展开运算符克隆数组会创建数组的实际副本，并且当您对原始数组进行更改时，克隆的数组不会更改。在这里，您可以看到即使您更改 nums1，nums3 也不会更新。

<html>
<body>
   <div id = "result1"></div>
   <div id = "result2"></div>
   <script>
      const nums1 = [10, 20, 30];
      const nums3 = [...nums1];
      document.getElementById("result1").innerHTML = nums3;
      nums1.push(50);
      document.getElementById("result2").innerHTML = nums1 + "<br>";
      document.getElementById("result2").innerHTML += nums3;
   </script>
</body>
</html>

它将产生以下结果 -

10,20,30
10,20,30,50
10,20,30

展开运算符连接对象

您可以使用展开运算符将对象属性复制到另一个对象中。这里，将 'car' 对象视为包含所有汽车类似属性的父对象。之后，创建了表示特定汽车的 'BMW' 对象，并将 'car' 对象的所有属性与 'BMW' 对象的属性连接起来。

<html>
<body>
   <div id = "result1"></div>
   <div id = "result2"></div>
   <script>
      const car = {
         gears: 6,
         color: "Black"
      }
      document.getElementById("result1").innerHTML = JSON.stringify(car);
    
      const BMW = {
         model: "X5",
         year: 2019,
         ...car,
      }
      document.getElementById("result2").innerHTML = JSON.stringify(BMW);
   </script>
</body>
</html>

它将产生以下结果 -

{"gears":6,"color":"Black"}
{"model":"X5","year":2019,"gears":6,"color":"Black"}

函数剩余参数

当您需要将未知数量的参数传递给函数时，您可以将展开运算符与函数参数一起使用，这称为剩余参数。

在这里，您可以看到我们已将多个数字作为函数参数传递，并使用展开运算符将所有参数收集到 nums[] 数组中，除了第一个参数。

<html>
<body>
   <div id = "result"></div>
   <script>
  
      function sum(a, ...nums) {
         let sum = a;
         for (let i = 0; i < nums.length; i++) {
            sum += nums[i];
         }
         document.getElementById("result").innerHTML = sum;
      }

      sum(3, 6, 9, 8, 6, 5, 3, 3, 2, 1);

   </script>
</body>
</html>

它将产生以下结果 -

您还可以使用展开运算符将字符串扩展为字符数组、克隆字符串或连接字符串。此外，Set、Map 等是 JavaScript 中的可迭代对象。因此，您可以将展开运算符与它们一起使用。

打印页面