Javascript 简明教程

JavaScript - Spread Operator

What is a Spread Operator?

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

The JavaScript spread operator (…) allows us to spread out elements of an iterable such as an array. The spread operator is represented with three dots (…). This is operator is introduced in ES6. The main use cases of the spread operator are to copy array elements, concatenate arrays or objects with rest parameters, etc.

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

Let’s take an example to expand the elements of an array –

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

Spread Operator to Concatenate Arrays

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

The JavaScript spread operator can be used to concatenate the arrays.

Example

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

In the below example, we have defined two different arrays. After that, we used the spread operator to concatenate these arrays.

<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>

它将产生以下结果 −

It will produce the following result −

10,20,30,40,50,60

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

You can also change the concatenation order of the array.

Spread Operator to Clone an Array

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

In JavaScript, when we assign one array (object) to another array, it assigns the reference rather than cloning the array. So, whenever you update the original array, it also updates the cloned array. The assignement operator creates a deep copy of the array.

Example: Without Using Spread Operator

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

In this example, we defined an array named nums1. We defiend another array named nums2 and assigned the array nums1 to array nums2. Here, you can see that when you change nums1, it also updates the 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>

它将产生以下结果 −

It will produce the following result −

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

Example: Using Spread Operator to Clone Arrays

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

Using the spread operator to clone the array creates an actual copy of the array, and the cloned array doesn’t change when you make changes to the original array. Here, you can see that nums3 doesn’t get updated even if you change the nums1.

<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>

它将产生以下结果 −

It will produce the following result −

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

Spread Operator to Concatenate Objects

您可以使用展开运算符将对象属性复制到另一个对象。此处，将“car”对象视为一个父对象，包含所有汽车的相似属性。之后，创建了代表特定汽车的“BMW”对象，并将“car”对象的所有属性与“BMW”对象属性连接在一起。

You can use the spread operator to copy object properties into another object. Here, consider the 'car' object as a parent object containing similar properties to all cars. After that, created the 'BMW' object, representing the particular car, and concatenated all properties of the 'car' object with the 'BMW' object’s property.

<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>

它将产生以下结果 −

It will produce the following result −

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

Function Rest Parameters

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

When you need to pass an unknown number of arguments to the function, you can use the spread operator with the function parameters, called the rest parameter.

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

Here, you can see that we have passed multiple numbers as a function argument and collected all arguments in the nums[] array using the spread operator except the first argument.

<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>

它将产生以下结果 −

It will produce the following result −

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

You can also use the spread operator to expand the string into the array of characters, clone the string, or concatenate the string. Also, set, map, etc., are iterable objects in JavaScript. So, you can use the spread operator with them.