JavaScript - 展开运算符

什么是展开运算符(即扩展运算符)?

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

我们来举个例子来展开数组的元素

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

使用扩展运算符连接数组

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>

它将产生以下结果 -

46

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