ES6/7 相当于下划线的范围函数答案

【问题标题】：ES6/7 equivalent to underscore’s range functionES6/7 相当于下划线的范围函数
【发布时间】：2018-04-21 17:56:53
【问题描述】：

有没有等价于下划线的range 函数的ECMAScript 6/7？

下划线：

_.range(startPage, endPage + 1);

在 ES2015 中：

Array.from(Array(n), (_, i) => x + i)

不确定 ES2015 版本是如何工作的。我想知道javascript的ecmascript中的范围是如何工作的

【问题讨论】：

您的问题到底是什么？您是否正在寻找 range 的 ES6 版本？您是否要求澄清第二个 sn-p 的工作原理？如果是这样，你到底不明白什么？至少试着自己解释一下。
我想知道javascript的ecmascript中的范围是如何工作的

标签： javascript arrays ecmascript-6 underscore.js ecmascript-2016

【解决方案1】：

这个想法是创建一个长度为end - start + 1的数组，然后使用Array#from填充相关数字。

Array.from() 方法从一个类数组或可迭代对象。

在这种情况下，Array#from 需要一个具有长度属性的对象。使用Array(n) 创建这样一个对象（数组）。您也可以直接使用{ length: n }。在这种情况下n = Math.abs(end - start) + 1。

Array#from 接受一个mapFn 回调，一个可以转换迭代值的函数。该函数接收 2 个参数 - 值（在这种情况下我们可以忽略）和索引（基于 0）。将start 添加到当前索引将创建范围内的数字。

const range = (start, end) => Array.from(
  Array(Math.abs(end - start) + 1), 
  (_, i) => start + i
);

console.log(range(5, 10));
console.log(range(-10, -5));
console.log(range(-5, 10));

此版本也将处理反向范围（从大到小）：

const range = (start, end) => {
  const inc = (end - start) / Math.abs(end - start);
  
  return Array.from(
    Array(Math.abs(end - start) + 1), 
    (_, i) => start + i * inc
  );
};

console.log(range(5, 10));
console.log(range(-5, -10));
console.log(range(10, -5));

【讨论】：

另一种方法是(start, end) => new Array(end-start+1).fill().map((_, i) => start + i)。不确定哪一个会胜出。
一个可疑的microbenchmark 建议Array.fill 更好（在我的浏览器上，在星期三，当它是 7C 时等）

【解决方案2】：

请注意，以下实现不允许延迟生成列表：

Array.from(Array(n), (_, i) => x + i)

假设您需要一个包含 100 万个数字的列表：

range(1, 1000000);

你打算把它们都吃掉吗？也许不是，但所有数字都已经生成，它们可能在您的记忆中留下了不平凡的足迹。

如果我们能根据需要一一获取就好了。

事实证明，我们可以使用生成器完全做到这一点：

function* range(start, end, step = 1) {
  for (let value = start; value < end; value += step) {
    yield value;
  }
}

for (let x of range(1, Infinity)) {
  if (x > 10) {
    break;
  }
  console.log(x);
}

您注意到range(1, Infinity) 位了吗？

在所有数字都是预先生成的经典实现中，此代码甚至无法运行，因为您会陷入无限的数字生成循环。

【讨论】：