ぺんぎんらぼ

お笑いとマンガ好きなしょぼしょぼWeb系エンジニアの日記です。たまに絵を描きます。

お笑いとマンガ好きなしょぼしょぼWeb系エンジニアの日記です

JavaScriptで1から100までの数値配列を生成する(JavaのIntStream.rangeをやりたい)

JavaScriptで1から100までの数値からなる配列を生成しましょう。

Javaの場合はIntStream.range(1, 101)やrangeClosed(1, 100)で一発ですが、JavaScriptの場合は少し面倒です。

完成版は以下になります。

完成版

const range = (start, end) => [...new Array(end-start).keys()].map(n => n + start);
console.log(range(1,101));
// Array [1, 2, 3,(略)98, 99, 100]

考え方

const iterator1 = new Array(101-1).keys();
const iterator2 = [new Array(101-1).keys()];
const iterator3 = [...new Array(101-1).keys()];

console.log(iterator1);
// Object {  }
console.log(iterator2);
// Array [Object {  }]
console.log(iterator3);
// Array [0, 1, 2, 3, (略)97, 98, 99]

iterator1では、Arrayのkey()が配列のインデックス数値からなるイテレーターオブジェクトを生成しています。

Javaイテレーターと使い勝手は異なりますが、JavaScriptではES6から追加されました。

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

console.log(iterator.next().value); // 0
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2

iterator2では、イテレーターを [ ] で括ることによってArrayオブジェクトになりました。

さらにiterator3で [...new Array(101-1).keys()]; とすることで、イテレーターの要素をそのままもったArrayオブジェクトに。 ...new Array... は、JavaScriptにおける残余引数構文というもので、以下のように受け取った引数から配列を生成してくれます。

const a = [1,2];
const b = 3;
console.log([...a,b]); // Array [1, 2, 3]

0から99までの配列が得られたので、あとはこれに map() で1から100までの配列にしてあげれば終わりです。