ES6 - 生成一个数字数组

Question

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

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

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

我需要它来对数字进行一些迭代(Euler项目的一部分).

以前我在Python中做了很多Euler挑战.现在我决定重新访问它并尽可能多地使用JS(尽可能多的ES6语法)来帮助我发展我的js技能.

Answer 1

这是一个在codepen中运行的简单解决方案:

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

要清楚,Array.from()并且Array.keys()需要ES6 polyfill才能在所有浏览器中使用.

Answer 2

通过实际例子参观Array.from

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"]
}

Answer 3

似乎问题是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:松散模式.

Answer 4

这里的所有其他答案都创建了一个临时的中间数组,这是不必要的.

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

这本质上是一个map函数,您可以从数组索引映射到任意数量的元素.

Answer 5

这里是一个range函数，它接受start，end和step参数。它返回一个数组，从startup 到（但不包括）以endsize 为增量的数字开始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]

Answer 6

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

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