JavaScript で Immutable.Range() のようなことがしたかったので調べました (ECMAScript 2015)

広告

for とか使わずに連番を持つ配列を作ってみました。 でも、 Immutable.jsImmutable.Range() のような無限の配列ではありません。

環境

  • Microsoft EdgeHTML 17.17134
  • Firefox 59.0.3

Array.from() メソッド

Array.from() メソッドは、配列型 (array-like) オブジェクトや反復可能 (iterable) オブジェクトから新しい Array インスタンスを生成します。

Array.from() - JavaScript | MDN

Array.from() メソッドを使うと、新しい Array インスタンスを生成してくれるようです。

次のように記述したらできました。

console.log(Array.from(Array(10).keys()));
// 0,1,2,3,4,5,6,7,8,9

Array(10) で 10 個の空の配列を作って、 Array.prototype.keys() メソッドで配列のイテレーターを取ってきています。 この配列のイテレーターに 0 から 9 までの連番があります。 その配列のイテレーターを Array.from() メソッドに渡しました。

1~5 までの数値が欲しいときは Array.prototype.slice() メソッドを使って、次のように記述すればよさそうです。

console.log(Array.from(Array(10).keys()).slice(1, 6));
// 1,2,3,4,5

あるいは、 Array.prototype.filter() メソッドを使って、次のように記述すればよさそうです。

console.log(Array.from(Array(10).keys()).filter(e => 1 <= e && e <= 5));
// 1,2,3,4,5

こちらの方が 1~5 までであることが認識しやすいかもしれません。

スプレッド構文

スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。

スプレッド構文 - JavaScript | MDN

スプレッド構文でもできるようです。

console.log([...Array(10).keys()]);
// 0,1,2,3,4,5,6,7,8,9

配列のリテラル ([]) に Array(10).keys() の配列のイテレーターを渡しました。 スプレッド構文は、配列のイテレーターをその場で展開してくれるようなので、 [...Array(3).keys()] と記述すると、 [ 0, 1, 2 ] と記述したのと同じ意味になるようです。

終わり

Ruby の Range クラスや Python の range 関数はあるのに、 ECMAScript には言語仕様の range はないみたいでした。 いずれ取り入れられるかな。

広告
広告