ES2018（ES9）的新特性： iterable rest&spread 参数-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断进步，ECMAScript也在不断地更新和升级。其中，ES2018（即ES9）作为其中的一部分，引入了一些新的特性，其中 iterable rest&spread 参数就是其中之一。

什么是 iterable？

在讲 iterable rest&spread 参数之前，我们需要先了解一下 iterable。简单来说，iterable就是一个具备迭代器功能的对象。它可以通过 for...of 循环进行迭代操作，也可以通过解构赋值等方式对其进行操作。

具备 iterable 功能的对象包括 Array（数组）、Set、Map等等。这些对象都具有 Symbol.iterator 属性，通过它可以返回一个迭代器。通过迭代器，我们就可以按照特定的顺序逐个访问内部的元素，也可以使用一些内置的方法进行操作。

什么是 rest&spread 参数？

在讲 iterable rest&spread 参数之前，我们还需要了解一下 rest&spread 参数。rest&spread 参数是 ES6 引入的一种语法，可以让我们更方便地处理函数参数。

其中，rest 参数用于收集一个函数中的多余参数，返回一个数组。而 spread 参数则可以用于展开一个数组或者对象等内容，将其展开为单独的元素。这两种参数的写法都是使用三个点（...）。

iterable rest 参数

使用 iterable rest 参数，我们可以将一个可迭代对象的元素全部收集到一个数组中。这样，我们就可以更方便地对其进行操作。语法如下：

function foo(...args) {
  // 函数体
}

在函数 foo 的参数列表中，我们使用 rest 参数 ...args 来收集参数。当我们调用这个函数时，如果传入的参数是一个可迭代对象（如数组、Set、Map等），那么这些参数的每一个元素都会被收集到 args 数组中。

下面是一个简单的示例，我们将一个 Set 对象的所有元素作为参数传递给一个函数：

const mySet = new Set([1, 2, 3]);
function foo(...args) {
    console.log(args);
}
foo(...mySet); // 输出 [1, 2, 3]

iterable spread 参数

使用 iterable spread 参数，我们可以将一个数组或者可迭代对象的所有元素展开，作为单独的参数。这样，我们就可以更方便地将一个对象或数组等内容进行操作。语法如下：

function foo(a, b, c) {
  // 函数体
}

foo(...args);

在使用函数 foo 的参数列表中，我们通过 ...args 的方式将数组或可迭代对象展开为单独的参数。这样，我们就可以直接使用变量 a、b、c 来表示数组或对象中的每个元素了。

下面是一个简单的示例，我们将一个数组的所有元素作为参数传递给一个函数：

const arr = [1, 2, 3];
function foo(a, b, c) {
    console.log(a, b, c);
}
foo(...arr); // 输出 1 2 3

iterable rest&spread 参数的实际应用

由于 iterable rest&spread 参数的使用可以让我们更方便地处理可迭代对象，因此在实际开发中也会有很多应用场景。

比如，在处理 React 组件的 props 时，我们经常需要对传入的 props 进行筛选和处理。使用 iterable rest 参数，我们可以很方便地将 props 作为参数传递给组件，使用 iterable spread 参数，我们可以将需要传递的 props 展开到组件中。

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

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

在上面的代码中，我们使用 iterable rest 参数，将传入 MyComponent 组件的 props 收集到变量 others 中。在组件中，我们使用 iterable spread 参数，将需要传递的 props 在 JSX 中展开。

总结

通过本文的介绍，我们了解了 iterable rest&spread 参数的使用方法和实际应用场景。这些特性的引入，让我们在处理可迭代对象时更加方便和自然，也提高了代码的可读性和可维护性。

对于前端开发者来说，学习和掌握这些新特性，不仅可以提高我们的技术水平，还可以使我们更好地应对日常开发工作中的各种需求。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64b3ff2e48841e989402beca