【JavaScript】オブジェクトの値を使って数値をループし、結果を配列に格納する方法

オブジェクトの値をもとに数値をループして配列を生成する

JavaScriptでは、「オブジェクトが持つキーと値を利用しながら、指定した長さの配列を作りたい」というケースがあります。例えば、次のようなオブジェクトがあったとしましょう。

var numberObject = { 2: 90, 6: 98 }

このオブジェクトは、キー「2」に値「90」、キー「6」に値「98」が格納されています。ここで、長さ15の配列を作成し、オブジェクトのキーに一致する位置にはその値を、一致しない位置には"novalue"という文字列を格納する処理を実装してみます。

解決策：Array.from()メソッドを使う

このような処理には、Array.from()メソッドが便利です。Array.from()は第2引数にマッピング関数（コールバック）を渡せるため、インデックス番号をもとに各要素の値を動的に決定できます。

var fillThePositionValue = Array.from({length: 15}, (value, index) => numberObject[index + 1] || "novalue")

コードのポイントは以下の通りです。

• {length: 15}：長さ15の配列風（array-like）オブジェクトを指定することで、15個の要素を持つ新しい配列を生成します。
• (value, index) => ...：各要素に対して呼び出されるコールバック関数です。indexは0から始まるため、オブジェクトのキー（1始まり）と照合するためにindex + 1としています。
• numberObject[index + 1] || "novalue"：論理OR演算子（||）により、該当するキーの値が存在すればその値を返し、存在しなければ右側の"novalue"を返します。

サンプルコード

実際に動作を確認できる完全なコードは以下の通りです。

var numberObject = { 2: 90, 6: 98 }
console.log("元のオブジェクト=");
console.log(numberObject);
var fillThePositionValue = Array.from({length: 15}, (value, index) => numberObject[index + 1] || "novalue")
console.log("値を格納した後の配列=");
console.log(fillThePositionValue)

このプログラムを実行するには、Node.js環境で次のコマンドを使用します。

node fileName.js

ここでは、ファイル名をdemo215.jsとして保存しています。

実行結果

上記プログラムの出力は次のようになります。

PS C:\Users\Amit\JavaScript-code> node demo215.js
元のオブジェクト=
{ '2': 90, '6': 98 }
値を格納した後の配列=
[
   'novalue', 90,
   'novalue', 'novalue',
   'novalue', 98,
   'novalue', 'novalue',
   'novalue', 'novalue',
   'novalue', 'novalue',
   'novalue', 'novalue',
   'novalue'
]

出力の読み方

結果を見ると、生成された配列の仕組みがよく分かります。

• 配列の先頭（インデックス0＝1番目の位置）には"novalue"が入り、2番目の位置（インデックス1）にはオブジェクトのキー「2」に対応する値90が格納されています。
• 同様に6番目の位置（インデックス5）には、キー「6」に対応する値98が入っています。
• それ以外の位置にはすべて"novalue"という代替文字列が設定されています。

このようにArray.from()を使えば、オブジェクトの値を参照しながら柔軟に配列を初期化でき、条件に応じてデフォルト値を差し込むことも簡単に実現できます。