功能性的方式来迭代范围(ES6 / 7)[重复]功能性的方式来迭代范围(ES6 / 7)[重复](f

2019-05-13 06:14发布

这个问题已经在这里有一个答案:

  • 有没有可变的变量的机制循环x次在ES6(ECMAScript中6)? 15个回答

什么是做下面的更多功能性的方式最好的方式(与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:

可以创建一个空数组,填充它(否则地图将跳过它)并且然后地图索引值:

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]

这适用于火狐(这是一个建议ES7功能),但它已经从规范下降。 IIRC,巴贝尔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)创建一个未填充的5个元素的数组。 那怎么Array给出一个参数时有效。 我们使用的传播运算符来创建具有五个不确定的元素的数组。 那我们就可以映射。 见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)


文章来源: functional way to iterate over range (ES6/7) [duplicate]