如何在 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() 的参数传递。扩展运算符会扩展两个列表并创建一个新列表，该列表充当单个完整参数。
结论
扩展运算符对于一维数组或可迭代对象非常有用，但不适合多维可迭代对象。它也可以用于对象。
