聊一聊 ES6 中的 rest parameter 和 spread operator

ES6 是一种为 JavaScript 添加了丰富新功能的版本。在 ES6 中,引入了一些新的概念,其中 rest parameter(剩余参数)和 spread operator(扩展操作符)是相当有用的。

这两个操作符都用到了三个点(...),但它们是不同的,rest parameter 用在函数定义中,获取函数的不定数量的参数;而 spread operator 则是被用于展开数组和对象,可以将数组或对象转换成分隔的数据。

Rest Parameter

Rest parameter 允许您在不知道函数将接收多少参数的情况下,将不定数量的参数表示为一个数组。我们来看一个例子:

-------- ----------------- ---------- -
  --------------------
-

--------------- ---- ---- -----

输出结果为["b", "c", "d"],剩下的参数被存储在了一个数组中。在这个例子中,我们传递了四个参数,但仅仅有第一个会赋值给 first,剩下的三个则被存储在 params 数组中。

这个特性非常适合处理可变数量的参数,并可以避免使用 arguments 对象。接下来,我们来看一些更实际的用例。

可变数量的参数

Rest parameter 经常用于需要可变数量参数的函数,例如合并函数。合并函数通常用于将两个或多个数组合并成一个。我们可以这样实现:

-------- ---------------------- -
  --- ------ - ---
  --- ---- ----- -- ------- -
    ----------------------
  -
  ------ -------
-

--- - - --- -- ---
--- - - --- -- ---
--- - - --- -- ---

-------------------------- -- ----

输出结果为 [1, 2, 3, 4, 5, 6, 7, 8, 9]。通过 rest parameter 参数,我们可以接受任意数量的数组(包括零个),然后将它们挨个展开并合并到一个数组中。

带有固定数量的参数

当我们想要在传递一些默认参数之后,仍然可以接受不定数量的参数时,Rest parameter 也很实用。查看如下例子:

-------- ------------- -- ----- -
  ----------------- ---
  ----------------- ---
  ----------------- ---
-

------------------- -- -- -- -- ---

输出结果为:

-- -----
-- -
-- --- -- -- --

这里,我们在函数参数中定义的 ab 是我们的默认参数,而 c 可以是任意数量的参数,在这个例子中是一个数组。

Spread Operator

Spread operator 允许我们在函数调用和数组构造时展开参数。展开数组时,可以将数组分隔的值复制到新数组中。

让我们看看一些示例。

展开数组

--- --- - --- -- ---
--- ---- - --- -- ---
--- ---- - -------- ---------

------------------

输出结果为 [1, 2, 3, 4, 5, 6]。在这个例子中,我们展开了 arrarr2,并将它们连在一起赋值给了 arr3

传递参数

-------- ------------- -- -- -
  ----------------- ---
  ----------------- ---
  ----------------- ---
-

--- ---- - --- -- ---

--------------------

输出结果为:

-- -
-- -
-- -

在这个例子中,我们先定义一个包含 3 个元素的数组 args,然后将其作为参数传递给 myFunction。由于我们使用注入,所以传入的数组 args 在传递给函数时被展开。这使得我们不必担心有多少个参数,就可以将一个数组传递给函数。

spread operator 还可以用于将对象的属性复制到另一个对象中。查看如下例子:

--- ---- - - -- -- -- - --
--- ---- - - -- -- -- - --
--- ---- - - -------- ------- --

------------------

输出结果为 { a: 1, b: 2, c: 3, d: 4 }。我们将 obj1 和 obj2 展开并合并到 obj3 中。

结论

Rest parameter 和 spread operator 是 ES6 中非常有用的功能。在处理可变数量的参数和合并数组时,rest parameter 可以让我们避免对堆栈参数使用 arguments 对象,而 spread operator 则可以在展开数组时为我们提供方便。这两个操作符可以提高代码的可读性且协助我们以声明性的方式来处理数组和对象。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67219c8c2e7021665e0832ad