資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 函式中使用擴充套件語法與引數？
我們使用 JavaScript 的**擴充套件語法**來**展開**現有的**陣列**、字串或物件。這些型別的數值被稱為**可迭代的**。這類似於在原位解構可迭代物件。它在函式呼叫中的實用性允許我們從可迭代物件中提取函式引數。在本教程中，我們將學習如何在 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()**的引數傳遞。擴充套件運算子展開這兩個列表，並建立一個充當單個完整引數的新列表。
結論
擴充套件運算子對於一維陣列或可迭代物件非常有用，但不適用於多維可迭代物件。它也可以與物件一起使用。
2K+ 瀏覽量
