迭代范围的功能方式(ES6/7)

Question

以更多功能方式执行以下操作的最佳方法是什么(使用ES6/ES7)

let cols = [];
for (let i =0; i <= 7; i++) {
   cols.push(i * i);
}
return cols;

我试过,

return [ ...7 ].map(i => {
  return i * i;
});

但那转化为

[].concat(7).map(function (n) {
  return n * n;
});

这不是我的预期.

编辑:

@pavlo.的确,这是一个错误.我正在使用JSX,例如,我想要7个div,(未经测试)

let cols = [];
    for (let i =0; i <= 7; i++) {
       cols.push(<div id={i}> ...  </div>)
    }
    return cols;

所以这个想法确实是为了减少临时变量和程序感觉的数量.

Answer 1

可以创建一个空数组,填充它(否则map会跳过它),然后将索引映射到值:

Array(8).fill().map((_, i) => i * i);

Answer 2

ES7提案

警告:不幸的是,我相信大多数流行的平台已经放弃了对理解的支持.请参阅下面的支持良好的ES6方法

您总是可以使用以下内容:

[for (i of Array(7).keys()) i*i];

在Firefox上运行此代码:

[0,1,4,9,16,25,36]

这适用于Firefox(它是一个提议的ES7功能),但它已从规范中删除.IIRC,启用"实验"的Babel 5支持此功能.

这是你最好的选择,因为数组理解仅用于此目的.你甚至可以编写一个范围函数来配合:

var range = (u, l = 0) => [ for( i of Array(u - l).keys() ) i + l ]

然后你可以这样做:

[for (i of range(5)) i*i] // 0, 1, 4, 9, 16, 25
[for (i of range(5,3)) i*i] // 9, 16, 25

ES6

一个很好的方法来做到这一点:

[...Array(7).keys()].map(i => i * i);
Array(7).fill().map((_,i) => i*i);
[...Array(7)].map((_,i) => i*i);

这将输出:

[0,1,4,9,16,25,36]

Answer 3

这是使用生成器的方法:

function* square(n) {
    for (var i = 0; i < n; i++ ) yield i*i;
}

然后你就可以写了

console.log(...square(7));

另一个想法是:

[...Array(5)].map((_, i) => i*i)

Array(5)创建一个未填充的五元素数组.Array当给出单个参数时,这是如何工作的.我们使用spread运算符创建一个包含五个未定义元素的数组.然后我们可以映射.见http://ariya.ofilabs.com/2013/07/sequences-using-javascript-array.html.

或者,我们可以写

Array.from(Array(5)).map((_, i) => i*i)

或者,我们可以利用第二个参数Array#from来跳过map和写

Array.from(Array(5), (_, i) => i*i)

我最近看到的一个可怕的黑客,我不推荐你使用,是

[...1e4+''].map((_, i) => i*i)