迭代范围(ES6/7)[重复]的函数方法

This question already has an answer here:

这个问题已经有了答案:

• Is there a mechanism to loop x times in ES6 (ECMAScript 6) without mutable variables? 15 answers
• 有没有一种机制可以在ES6 (ECMAScript 6)中不带可变变量地循环x次?15个答案

What is the best way to do the below in more functional way (with ES6/ES7)

以更有效的方式(使用ES6/ES7)完成以下任务的最佳方式是什么?

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

I tried like,

我试着像,

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

but that translated to

但翻译

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

which is not what I expected.

这不是我所期望的。

EDIT:

@pavlo. Indeed, that was a mistake. I was using JSX, and for example, I want 7 divs, (untested)

@pavlo。的确，这是一个错误。我使用的是JSX，例如，我想要7 divs(未经测试)

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

so the idea was indeed to reduce the number of temp variables and procedural feel.

所以这个想法实际上是为了减少临时变量的数量和过程的感觉。

3 个解决方案

#1

One can create an empty array, fill it (otherwise map will skip it) and then map indexes to values:

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

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

#2

ES7 Proposal

You can always use something like:

你可以使用以下内容:

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

Running this code on Firefox:

在Firefox上运行此代码:

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

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

This works on Firefox (it was a proposed ES7 feature), but it has been dropped from the spec. IIRC, Babel 5 with "experimental" enabled supports this.

这适用于Firefox(它是一个提议的ES7特性)，但是它已经从规范中删除了。IIRC, Babel 5支持“experimental”。

This is your best bet as array-comprehension are used for just this purpose. You can even write a range function to go along with this:

这是你最好的选择，因为array-comprehension被用于此目的。你甚至可以写一个范围函数来处理这个:

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

Then you can do:

然后你可以做:

[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

A nice way to do this any of:

这样做的一个好方法是:

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

This will output:

这将输出:

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

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

#3

Here's an approach using generators:

这里有一个使用生成器的方法:

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

Then you can write

然后你可以写

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

Another idea is:

另一个想法是:

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

Array(5) creates an unfilled five-element array. That's how Array works when given a single argument. We use the spread operator to create an array with five undefined elements. That we can then map. See http://ariya.ofilabs.com/2013/07/sequences-using-javascript-array.html.

数组(5)创建一个未填充的5元素数组。当给定一个参数时，数组就是这样工作的。我们使用扩展操作符创建一个包含五个未定义元素的数组。然后我们可以绘制地图。见http://ariya.ofilabs.com/2013/07/sequences-using-javascript-array.html。

Alternatively, we could write

或者,我们可以写

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

or, we could take advantage of the second argument to Array#from to skip the map and write

或者，我们可以利用第二个参数，将数组#from改为跳过映射并写入

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

A horrible hack which I saw recently, which I do not recommend you use, is

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

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