数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在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()**的参数传递。扩展运算符展开两个列表，并创建一个充当单个完整参数的新列表。
结论
扩展运算符对于一维数组或可迭代对象非常有用，但不适用于多维可迭代对象。它也可以与对象一起使用。
2K+ 次浏览
