如何在JavaScript函式中使用擴充套件語法（Spread Syntax）處理引數？

我們使用JavaScript的**擴充套件語法**(Spread Syntax)來**展開**陣列、字串或物件。這些型別的數值被稱為**可迭代的**(iterable)。這類似於就地解構可迭代物件。它在函式呼叫中的實用性允許我們從可迭代物件中提取函式引數。在本教程中，我們將學習如何在JavaScript函式中使用擴充套件語法處理引數。

JavaScript中的擴充套件運算子

擴充套件運算子，用三個點(...)表示，後跟可迭代物件的名稱，它將可迭代物件展開成其組成元素。

例如：

const [x, y, ...z] = [1, 2, 3, 4, 5]

這將建立三個變數x、y和z。前兩個值儲存在相應的變數中。因此，x = 1，y = 2，z = [3, 4, 5]。

擴充套件運算子將可迭代物件的其餘部分儲存到z變數中。

它最常用於函式呼叫，以便在引數初始化時展開可迭代物件。

示例1

在這裡，我們將展示擴充套件運算子在函式呼叫中的用法。我們將建立一個字串陣列，並將其作為函式引數傳遞給列印函式。讓我們看看相應的程式碼。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <p>Spread operator in javascript:<br>
      <div id="result"> </div>
   </p>
   <script>
      function print(a, b, c) {
         document.getElementById("result").innerHTML = a + "<br>" + b + "<br>" + c
      }
      var arr = ["first", "second", "third"]
      print(...arr)
   </script>
</body>
</html>

在上面的程式碼中，變數從陣列中獲取相應的值。這是按順序發生的。因此，a = arr[0]，b = arr[1]，c = arr[2]。

擴充套件運算子可以用於處理只有一些可迭代列表的部分有用，而其餘部分可以忽略的情況。開頭的例子強調了這種用例。

讓我們來看一個例子來說明這個用例。

示例2

在這裡，我們將展示擴充套件運算子在函式呼叫中的用法。我們將建立一個字串陣列，並將其作為函式引數傳遞給列印函式。但是，在這個例子中，我們將只強調列表中的第一個元素。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <p>Spread operator in javascript:<br>
      <div id="result"> </div>
   </p>
   <script>
      function print(f, ...rest) {
         document.getElementById("result").innerHTML = f + "<br>" + rest
      }
      var arr = ["first", "second", "third", "fourth"]
      print(...arr)
   </script>
</body>
</html>

只使用第一個元素，其餘元素可以使用擴充套件運算子放入不同的變數中。這同時也為我們提供了處理這種情況的實用程式：我們不知道可迭代物件大小的上限，但知道下限。

擴充套件運算子也可以與物件一起使用。**注意**，擴充套件運算子提供了一種輕鬆複製可迭代物件的方法。此副本與原始可迭代物件是分開的，新副本中的任何更改都不會反映在原始副本中。

擴充套件運算子也可以在函式呼叫中連線可迭代物件。

這是一個例子：

示例3

在這裡，我們將建立兩個單獨的字串列表，並使用擴充套件運算子在呼叫函式時連線這兩個列表。

<html>
<head>
</head>
<body>
   <p>Spread operator in javascript:<br>
      <div id="result"> </div>
   </p>
   <script>
      function print(arr) {
         var text = "";
         for(var i = 0 ; i < arr.length ; i++) text += arr[i] + ",";
         document.getElementById("result").innerHTML = text
      }
      var arr = ["first", "second", "third", "fourth"]
      var rest = ["fifth", "sixth", "seventh"]
      print([...arr, ...rest])
   </script>
</body>
</html>

在這裡，我們將兩個陣列的連線列表作為函式呼叫**print()**的引數傳遞。擴充套件運算子展開兩個列表，並建立一個充當單個完整引數的新列表。

結論

擴充套件運算子對於一維陣列或可迭代物件非常有用，但不適用於多維可迭代物件。它也可以與物件一起使用。

更新於：2022年11月10日

2K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告