Javascript 简明教程

JavaScript - Spread Operator

What is a Spread Operator?

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

我们用一个示例来展开数组元素：

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

Spread Operator to Concatenate Arrays

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

Example

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

<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

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

Spread Operator to Clone an Array

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

Example: Without Using Spread Operator

在此示例中，我们定义了一个名为 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

Example: Using Spread Operator to Clone Arrays

使用展开运算符克隆数组会创建数组的实际副本，并且当您对原始数组进行更改时，克隆的数组不会更改。此处，您可以看到，即使您更改 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

Spread Operator to Concatenate Objects

您可以使用展开运算符将对象属性复制到另一个对象。此处，将“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"}

Function Rest Parameters

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

在这里，你可以看到，我们传递了多个数字作为函数参数，并使用扩展运算符（除了第一个参数）收集了 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 中的可迭代对象。因此，你可以在它们中使用扩展运算符。