迭代范围的功能方法（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;
});

这不是我所期望的。

编辑：

@帕夫洛。确实，那是一个错误。我使用的是 JSX，例如，我想要 7 个 div，（未测试）

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

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

Answer 1

ES7 提案

警告：不幸的是，我相信大多数流行的平台都放弃了对理解的支持。请参阅下文，了解得到良好支持的 ES6 方法

您可以随时使用类似的东西：

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

运行 Firefox 上的代码：

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

这适用于 Firefox（这是提议的 ES7 功能），但已从规范中删除。 IIRC，启用 "experimental" 的 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 2

可以创建一个空数组，填充它（否则 map 会跳过它），然后将索引映射到值：

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

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 的工作方式。我们使用扩展运算符创建一个包含五个未定义元素的数组。那我们就可以映射了。参见 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)

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

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

迭代范围的功能方法（ES6/7）

functional way to iterate over range (ES6/7)

javascript

functional-programming

ecmascript-6

ecmascript-harmony

编辑：

ES7 提案

ES6