从 ES6 开始,JavaScript 引入了 Rest 和 Spread 操作符,用于便利地处理函数参数和数组/对象的元素。而在 ES9 (ECMAScript 2018) 中,Rest 和 Spread 操作符得到了进一步的增强,让我们来一起学习一下。
Rest 操作符
Rest 操作符使用三个点(...)来显示地声明一个函数的剩余参数。它将函数的剩余参数收集到一个数组中,可以轻松地处理不同数量的参数。
-------- ------------------- -------- - -------------------- -- ---------- -------------------- -- ------ - ------------------ -------- -------- --------- -- --- -- ------- ----- -- ------- --------- -------- --------
在上面的示例中,Rest 操作符 (...args) 收集了函数中除了第一个参数以外的其它参数,将它们放在一个数组中。
除了上面的使用方法, Rest 操作符还可以与解构一起使用。如下面示例所示,Rest 操作符和解构一起使用,对于传入的对象进行解构,并将剩余的其它属性放到 rest
变量中。
----- ------ - - ----- ----- ---- --- ------- ---- ------- ------ ----------- ------ -------- ------ -- ----- - ----- ---- ------- - - ------- ----------------- ---- ------ -- --- -- -- -- - ------- ---- ------- ------ ----------- ------ -------- ----- -
在上面的示例中,我们通过对象解构,将 person
对象的 name
和 age
属性分别赋值给 name
和 age
变量,并通过 Rest 操作符将其余的属性集中到 rest
变量中。
Spread 操作符
Spread(展开)操作符也是一个用于数组和对象的操作符,使用三个点号(...)进行声明。
对数组使用 Spread 操作符
对于数组来说,Spread 操作符允许我们展开一个数组,将数组的元素提取出来,并放入另一个数组中。
----- ---- - --- -- --- ----- ---- - --- -- --- ----- ---- - --------- --------- ------------------ -- ------ -- -- -- -- --
在上面的示例中,我们使用 Spread 操作符将 arr1
和 arr2
中的元素展开,并用 ...
连接起来,将它们放入了 arr3
中。
除了拓展数组,我们还可以在函数调用时使用 Spread 操作符,将数组中的元素作为函数的参数传递进去。
-------- ------ -- -- - ------ - - - - -- - ----- ---- - --- -- --- -------------------------- -- ----
在上面的示例中,我们定义了一个函数 sum
,接受三个参数,并将它们相加返回结果。然后我们使用 Spread 操作符 ...
解构出 args
数组中的元素,并将它们一一作为函数 sum
的参数传递进去,从而得到了结果。
对象中使用Spread
在对象中使用 Spread 操作符时,它可以允许我们创建一个新对象,并将旧对象的属性展开到新对象中。
----- ---- - - ----- ----- ---- --- ------- ---- -- ----- ---- - - ------- ------ ----------- ------ -------- ------ -- ----- ---- - - -------- ------- -- ------------------ -- --- -- - -- ----- ----- -- ---- --- -- ------- ---- -- ------- ------ -- ----------- ------ -- -------- ----- -- -
在上面的示例中,我们使用 Spread 操作符将 obj1
和 obj2
中的属性展开,并将它们拼接到一个新的对象上,形成了 obj3
对象。
总结
通过本文的学习,你应该学会了如何在 JavaScript 中使用 ES9 中的 Rest 和 Spread 操作符。这些操作符在处理函数参数和数组、对象时非常有用,可以大大地提高代码的可读性和可维护性。希望本文对你在日常开发中有所帮助!
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645767f0968c7c53b0a1efe7