web-dev-qa-db-ja.com

範囲を反復する機能的な方法（ES6 / 7）

より機能的な方法で以下を行う最良の方法は何ですか（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;

そのため、実際には、一時変数の数と手順の感触を減らすことが目的でした。

javascriptfunctional-programmingecmascript-6ecmascript-harmony
97
bsr

空の配列を作成し、それを入力して（それ以外の場合はマップはスキップします）、インデックスを値にマップできます。

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

ES7の提案

警告：残念ながら、ほとんどの人気のあるプラットフォームは理解のサポートをやめたと思います。よくサポートされている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

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]

59
Downgoat

ジェネレーターを使用したアプローチは次のとおりです。

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がどのように機能するかです。スプレッド演算子を使用して、5つの未定義の要素を持つ配列を作成します。マッピングできること。 http://ariya.ofilabs.com/2013/07/sequences-using-javascript-array.html を参照してください。

または、次のように書くこともできます

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

または、Array#fromの2番目の引数を利用して、mapをスキップして、

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

私が最近見た恐ろしいハック、私はそれを使用することをお勧めしますnot

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