Javascript 迭代范围的函数方式（ES6/7）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30650961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
functional way to iterate over range (ES6/7)
提问by bsr
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)
@帕夫洛。确实，这是一个错误。我正在使用 JSX，例如，我想要 7 个 div，（未经测试）
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.
所以这个想法确实是为了减少临时变量的数量和程序感觉。
回答by Pavlo
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);
回答by Downgoat
ES7 Proposal
ES7 提案
Warning:Unfortunately I believe most popular platforms have dropped support for comprehensions. See below for the well-supported ES6 method
警告：不幸的是，我相信大多数流行的平台都放弃了对理解的支持。请参阅下面的支持良好的 ES6 方法
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 支持这一点。
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:
这是您最好的选择，因为数组理解仅用于此目的。你甚至可以写一个范围函数来配合这个：
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
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 ]
回答by Downgoat
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 Arrayworks 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.
Array(5)创建一个未填充的五元素数组。这就是Array给定单个参数时的工作方式。我们使用扩展运算符创建一个包含五个未定义元素的数组。然后我们就可以映射了。请参阅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#fromto skip the mapand write
或者，我们可以利用第二个参数Array#from来跳过map并写入
Array.from(Array(5), (_, i) => i*i)
A horrible hack which I saw recently, which I do notrecommend you use, is
我最近看到的一个可怕的黑客，我不建议你使用，是
[...1e4+''].map((_, i) => i*i)
