ES6 - 生成一个数字数组答案

【问题标题】：ES6 - generate an array of numbersES6 - 生成一个数字数组
【发布时间】：2017-02-16 21:21:32
【问题描述】：

用谷歌搜索后，我找到了两个解决方案：

    var data = [...Array(10).keys()];
console.log(data);
    var data1 = Array(8).fill().map((_, i) => i);
console.log(data1);

data1 显示 [0, 1, ..., 7] 但是 data 只显示 [[object Array Iterator]] 我如何实际看到数字。

我需要它来对数字进行一些迭代（欧拉项目的一部分）。

以前我在 Python 中做过很多欧拉挑战。现在我决定重新审视它，并尽可能多地使用 JS（尽可能多的 ES6 语法）来帮助我发展我的 js 技能。

【问题讨论】：

如果我在浏览器（最新的稳定版 Chrome）中运行 var data = [...Array(10).keys()];，我会看到列出的数字。如果我只做Array(10).keys()，我会看到ArrayIterator。
是不是和codepen有关？ codepen.io/wasteland/pen/QKQGNo/?editors=1111
@Wasteland 它与 Babel 有关，该特定代码笔正在使用它
这与 CodePen 对 Babel 的使用有关。我不确定他们运行的是什么版本，但如果你禁用 Babel 预处理器，一切都会正确。你可以运行这段代码on the Babel website，你仍然会看到你期望的结果。
谢谢。 ES6 特性不需要 babel 吗？

标签： javascript ecmascript-6

【解决方案1】：

这是一个range 函数，它接受start、end 和一个step 参数。它返回一个从start 开始到（但不包括）end 数字的数组，其大小增量为step。

const range = (start, end, step) => {
  return Array.from(Array.from(Array(Math.ceil((end-start)/step)).keys()), x => start+ x*step);
}

console.log(range(1, 10, 1));
//[1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(range(0, 9, 3));
//[0, 3, 6]

console.log(range(10, 30, 5));
//[10, 15, 20, 25]

更进一步，如果您想要一个包含 end 的范围。

const inclusiveRange = (start, end, step) => {
  return Array.from(Array.from(Array(Math.ceil((end-start+1)/step)).keys()), x => start+ x*step);
}

console.log(inclusiveRange(1, 10, 1));
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(inclusiveRange(0, 9, 3));
// [0, 3, 6, 9]

console.log(inclusiveRange(10, 30, 5));
//[10, 15, 20, 25, 30]

【讨论】：

【解决方案2】：

这里的所有其他答案都会创建一个临时中间数组，这不是必需的。

Array.from({ length: 10 }, (_, i) => i)

这本质上是一个映射函数，您可以在其中从数组索引映射到您想要的任意数量的元素。

【讨论】：

这是迄今为止最优雅的方法，也可能是最高效的方法，它使用具有长度属性的对象作为可迭代对象并将地图 fn 集成在同一个“循环”中

【解决方案3】：

进一步细化，产生一个值从1开始的数组：

Array.from(Array(10).keys(), n => n + 1)

【讨论】：

【解决方案4】：

通过实际示例了解 Array.

Array.from 还接受第二个参数，用作映射函数

let out = Array.from(Array(10), (_,x) => x);
console.log(out);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

很高兴知道这一点，因为您可能想要生成有时比 0 到 N 更复杂的数组。

const sq = x => x * x;
let out = Array.from(Array(10), (_,x) => sq(x));
console.log(out);
// [0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

或者你也可以用生成器制作数组

function* range(start, end, step) {
  while (start < end) {
    yield start;
    start += step;
  }
}

let out = Array.from(range(10,20,2));

console.log(out); // [10, 12, 14, 16, 18]

Array.from 非常强大。人们甚至还没有意识到它的全部潜力。

const ord = x => x.charCodeAt(0);
const dec2hex = x => `0${x.toString(16)}`.substr(-2);

// common noob code
{
  let input = "hello world";
  let output = input.split('').map(x => dec2hex(ord(x)));
  
  console.log(output);
  // ["68", "65", "6c", "6c", "6f", "20", "77", "6f", "72", "6c", "64"]
}

// Array.from
{
  let input = "hello world";
  let output = Array.from(input, x => dec2hex(ord(x)));
  
  console.log(output);
  // ["68", "65", "6c", "6c", "6f", "20", "77", "6f", "72", "6c", "64"]
}

【讨论】：

那个“菜鸟代码”有什么问题？我认为它更具可读性。

【解决方案5】：

问题似乎在于 codepen 使用 babel es2015-loose 预编译了您的代码。

在那种模式下，你的

[...Array(10).keys()];

变成

[].concat(Array(10).keys());

这就是为什么你会看到一个包含迭代器的数组。

使用 es2015 模式你会得到

function _toConsumableArray(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
      arr2[i] = arr[i];
    }
    return arr2;
  } else {
    return Array.from(arr);
  }
}
[].concat(_toConsumableArray(Array(10).keys()));

这将按预期运行。

有关这些模式的更多信息，请参阅②ality - Babel 6: loose mode。

【讨论】：

【解决方案6】：

这是一个适用于 codepen 的简单解决方案：

Array.from(Array(10).keys())

需要明确的是，Array.from() 和 Array.keys() 需要 ES6 polyfill 才能在所有浏览器中工作。

【讨论】：

? 更好：[...Array(10).keys()]