如何使用 ES2015 生成从0到n的数字范围？

在 JavaScript 中，我们通常会需要生成一个数字范围。在早期的版本中，我们可以使用循环来完成这个任务。但是在 ES2015 中，引入了一些新特性，使得生成数字范围更加简单和高效。接下来，我们将介绍如何使用 ES2015 生成从0到n的数字范围。

传统方法

在 ES2015 出现之前，生成数字范围的一种常见方法是使用 for 循环，例如：

function range(n) {
  const arr = [];
  for (let i = 0; i <= n; i++) {
    arr.push(i);
  }
  return arr;
}

这个函数通过一个 for 循环来遍历0到n的每个数字，并将它们存储在一个数组中。然后返回这个数组。

虽然这个方法易于理解和实现，但它有一些缺点。例如，它在生成大量数字的情况下会变得十分慢，因为它必须迭代每个数字并将其存储在数组中。此外，如果我们只想要表示一个数字范围，而不是真正地创建一个数组，则此方法将占用过多的内存。

使用 Array.from

ES2015 引入了一个新方法 Array.from，该方法允许我们使用类数组对象（如 set 或字符串）或可迭代对象（如 Map 或 NodeList）创建一个新数组。我们可以使用这个方法来生成数字范围。

function range(n) {
  return Array.from({ length: n + 1 }, (_, i) => i);
}

在这个函数中，我们使用 Array.from 方法创建一个具有n + 1个元素的数组。该数组的每个元素都被初始化为 undefined，并且该数组的长度与 n + 1 相同。然后，使用第二个参数传递给 Array.from 的 map 函数，我们将每个元素替换为它的索引。

这种方法比传统方法更快，因为它不需要存储大量的数字，而只是惰性地计算它们。

使用 generator

另一种方法是使用 generator 函数。

function* range(n) {
  for (let i = 0; i <= n; i++) {
    yield i;
  }
}

这个函数是一个 generator 函数，使用 for 循环遍历0到n的每个数字，并使用 yield 暂停函数执行并返回该数字。这种方法非常节省内存，因为它只生成需要的数字，并且在生成下一个数字之前不会存储任何东西。此外，这个函数允许我们以任意顺序消耗数字，而不是强制我们将它们存储在数组中。

总结

在这篇文章中，我们介绍了三种方法来生成从0到n的数字范围。传统方法使用 for 循环遍历每个数字，并将它们存储在数组中。Array.from 方法使用惰性计算生成数字范围，而且更快且占用更少内存。使用 generator 函数是一种非常节省内存的方法，它允许我们以任意顺序消耗数字。

无论哪种方法，都可以根据需要选择使用。

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