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>

它將產生以下結果 -

46

您還可以使用展開運算子將字串擴充套件為字元陣列、克隆字串或連線字串。此外，Set、Map 等是 JavaScript 中的可迭代物件。因此，您可以將展開運算子與它們一起使用。

列印頁面
上一頁
下一頁
廣告