【JavaScript】最初の配列の順序に基づいてオブジェクトの値を並べた結果配列を表示する方法

はじめに

オブジェクトのデータを、別の配列で指定した順序に従って並べ替えて表示したいケースはよくあります。JavaScriptでは、map()メソッドを使うことで、この処理を非常に簡潔に実装できます。

まず、次のようなオブジェクトがあるとします。

var lastName = {
    "John":"Smith",
    "David":"Miller",
    "Bob":"Taylor"
}

続いて、並び順を指定するための配列を用意します。

var firstName = [
    "Bob",
    "John",
    "David"
]

この配列の順序（Bob → John → David）に従って、オブジェクトから対応する値を取り出し、結果の配列を作成します。これを実現するのがmap()メソッドです。以下が具体的なコード例です。

コード例

var firstName=[
    "Bob",
    "John",
    "David"
]
var lastName ={
    "John":"Smith",
    "David":"Miller",
    "Bob":"Taylor"
}
var values = firstName.map(getValues => lastName[getValues]);
console.log(values);

map()は、配列firstNameの各要素を先頭から順に取り出し、その要素をキーとしてlastNameオブジェクトから対応する値を取得します。その結果、元のキー配列と同じ順序で値が並んだ新しい配列が生成されます。

プログラムの実行方法

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

node fileName.js

ここでは、ファイル名を「demo168.js」としています。実行すると、以下の出力が得られます。

実行結果

PS C:\Users\Amit\javascript-code> node demo168.js
[ 'Taylor', 'Smith', 'Miller' ]

出力を見ると、配列firstNameの順序（"Bob"、"John"、"David"）に対応して、それぞれの苗字である「Taylor」「Smith」「Miller」が正しい順序で表示されていることがわかります。

このように、map()メソッドを活用すれば、キーとなる配列の順序に合わせてオブジェクトの値を簡単かつ効率的に並べ替えることができます。ソート処理や表示順序の制御など、さまざまな場面で応用できるテクニックなので、ぜひ覚えておきましょう。