50% !700+课程，评估和书籍
浏览标题
JavaScript

快速提示:如何在JavaScript中使用扩散操作符

    Dianne佩纳
    分享

    在本教程中，您将学习在JavaScript中使用展开操作符的不同方式，以及展开操作符和rest操作符之间的主要区别。

    以三个点表示(.．.)， JavaScript扩展操作符是在ES6中引入的。它可用于将集合和数组中的元素展开为单个元素。

    展开操作符可用于创建和克隆数组和对象，将数组作为函数参数传递，从数组中删除重复项，等等。

    语法

    展开运算符只能用于可迭代对象。它必须在可迭代对象之前使用，没有任何分隔。例如:

    控制台．日志（.．.加勒比海盗）；

    函数参数

    以……为例Math.min ()方法。该方法接受至少一个数字作为参数，并返回传递的参数中最小的数字。

    如果你有一个数字数组，你想要找到这些数字的最小值，如果没有展开运算符，你需要使用它们的下标逐个传递元素，或者使用应用()方法将数组元素作为参数传递。例如:

    常量数字＝［15，13，One hundred.，20.］；常量minNumber＝数学．最小值．应用（零，数字）；控制台．日志（minNumber）；/ / 13

    请注意，第一个参数是零的值，因为第一个参数用于更改的值这调用函数的。

    展开运算符是将数组元素作为参数传递给函数的一种更方便、更易读的解决方案。例如:

    常量数字＝［15，13，One hundred.，20.］；常量minNumber＝数学．最小值（.．.数字）；控制台．日志（数字）；/ / 13

    你可以在下面的例子中看到:

    看钢笔
    在函数JS中使用展开运算符    由Si必威西盟体育网页登录tePoint (@必威西盟体育网页登录SitePoint）
    在CodePen．

    创建数组

    对象的现有数组或其他可迭代对象中创建新数组Symbol.iterator ()方法。类迭代的对象的……循环。

    例如，它可以用于克隆数组。如果你简单地将一个现有数组的值赋给一个新数组，对新数组进行更改将更新现有数组:

    常量数字＝［15，13，One hundred.，20.］；常量clonedNumbers＝数字；clonedNumbers．推（24）；控制台．日志（clonedNumbers）；// [15,13,100,20,24]控制台．日志（数字）；// [15,13,100,20,24]

    通过使用扩散操作符，现有数组可以克隆到一个新数组中，对新数组所做的任何更改都不会影响现有数组:

    常量数字＝［15，13，One hundred.，20.］；常量clonedNumbers＝［.．.数字］；clonedNumbers．推（24）；控制台．日志（clonedNumbers）；// [15,13,100,20,24]控制台．日志（数字）；// [15,13,100,20]

    需要注意的是，这只会克隆一维数组。它不适用于多维数组。

    展开运算符还可用于将多个数组连接为一个数组。例如:

    常量evenNumbers＝［2，4，6，8］；常量oddNumbers＝［1，3.，5，7］；常量allNumbers＝［.．.evenNumbers，.．.oddNumbers］；控制台．日志（.．.allNumbers）；//[2,4,6,8,1,3,5,7]

    你也可以在字符串上使用展开操作符来创建一个数组，其中每个项都是字符串中的一个字符:

    常量str＝“Hello, World !”；常量strArr＝［.．.str］；控制台．日志（strArr）；/ / [' H ', ' e ', ' l ', ' l ', ' o ', ',', ' ', ' W”、“o”、“r”、“l”、“d”、“!']

    创建对象

    展开运算符可以以不同的方式来创建对象。

    它可以用来浅克隆另一个对象。例如:

    常量obj＝｛的名字：“马克”，年龄：20.｝；常量clonedObj＝｛.．.obj｝；控制台．日志（clonedObj）；// {name: 'Mark'，年龄:20}

    它还可以用于将多个对象合并为一个对象。例如:

    常量其中obj1＝｛的名字：“马克”，年龄：20.｝；常量methoda＝｛占领：“学生”｝；常量clonedObj＝｛.．.其中obj1，.．.methoda｝；控制台．日志（clonedObj）；//{名字:“马克”，年龄:20岁，职业:“学生”}

    应该注意的是，如果对象共享相同的属性名，则将使用最后一个对象分布的值。例如:

    常量其中obj1＝｛的名字：“马克”，年龄：20.｝；常量methoda＝｛年龄：30.｝；常量clonedObj＝｛.．.其中obj1，.．.methoda｝；控制台．日志（clonedObj）；//{名字:'Mark'，年龄:30}

    展开操作符可用于从数组创建对象，其中数组中的下标成为属性，下标处的值成为属性的值。例如:

    常量数字＝［15，13，One hundred.，20.］；常量obj＝｛.．.数字｝；控制台．日志（obj）；// {0: 15, 1:13, 2:100, 3:20}

    它还可以用于从字符串创建对象，类似地，字符串中的下标成为属性，下标处的字符成为属性的值。例如:

    常量str＝“Hello, World !”；常量obj＝｛.．.str｝；控制台．日志（obj）；/ /{0:“H”,1:' e ', 2: ' l ', 3:‘l’,4:“o ', 5: ', ', 6: ' ', 7: ' W ', 8:“o ', 9:“r”,10:“l”,11:' d ', 12:”!'}

    将节点列表转换为数组

    一个节点列表是节点的集合，节点是文档中的元素。通过集合中的方法访问元素，例如项或条目，与数组不同。

    您可以使用展开运算符将节点列表转换为数组。例如:

    常量节点列表＝文档．querySelectorAll（“div”）；控制台．日志（节点列表．项（0））；/ / < div >…< / div >常量nodeArray＝［.．.节点列表］；控制台．日志（节点列表［0］）；/ / < div >…< / div >

    从数组中删除重复项

    一个集对象是仅存储惟一值的集合。与NodeList类似，可以使用展开操作符将Set转换为数组。

    由于Set只存储唯一的值，因此可以将它与展开操作符配对以从数组中删除重复的值。例如:

    常量duplicatesArr＝［1，2，3.，2，1，3.］；常量uniqueArr＝［.．.新集（duplicatesArr）］；控制台．日志（duplicatesArr）；// [1,2,3,2,1,3]控制台．日志（uniqueArr）；// [1,2,3]

    展开运算符与休息运算符

    rest操作符也是一个三点操作符(.．.)，但它的用途不同。rest操作符可以在函数的形参列表中使用，表示该函数接受未定义数量的形参。这些参数可以作为数组处理。

    例如:

    函数calculateSum（.．.funcArgs）｛让总和＝0；为（常量参数的funcArgs）｛总和+ =参数；｝返回总和；｝

    方法的参数，使用rest操作符作为calculateSum函数。然后，循环遍历数组中的项并将它们相加以计算它们的和。

    然后，您可以将变量一个一个地传递给calculateSum函数作为参数，或使用展开运算符将数组的元素作为参数传递:

    控制台．日志（calculateSum（1，2，3.））；/ / 6常量数字＝［1，2，3.］；控制台．日志（calculateSum（.．.数字））；/ / 6

    结论

    展开操作符允许您用更少的代码行做更多的事情，同时保持代码的可读性。它可用于可迭代对象，将参数传递给函数，或从其他可迭代对象创建数组和对象。

    相关阅读:

    Baidu