在范围内迭代的功能方式（ES6/7）

javascript ecmascript-6 functional-programming ecmascript-harmony

2022-08-30 02:13:23

以更实用的方式完成以下操作的最佳方法是什么（使用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;

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

答案 1

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

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

答案 2

警告：不幸的是，我相信大多数流行的平台已经放弃了对理解的支持。有关支持良好的 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

这是一个很好的方法，可以做到这一点：

[...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 ]