数据结构
网络
关系数据库管理系统
操作系统
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+ 浏览量
