【JavaScript】配列をオブジェクトに変換する方法

更新日:2023/08/07

JavaScriptの配列をオブジェクトに変換してみます。
配列インデックスをプロパティ名として使用するケースと、配列の値をプロパティとして使用するケースの二つを想定しています。

 

配列インデックスをプロパティ名として使用する場合

次のような配列があるとします。

配列:[ "a" , "b" , "c" ]

これを次のように、配列インデックスをプロパティ名としたオブジェクトに変換します。

オブジェクト:{ 1:"a" , 2:"b" , 3:"c" }

forEach()またはreduce()を使用

まずは、forEach()などでループをしながらオブジェクトを組み立てていく方法です。

  // 元となる配列
const array = [ "a" , "b" , "c" ];
  // 変換結果をセットするオブジェクト
const obj = {};

array.forEach( (e,index)=>obj[index]=e );

console.log( obj ); // 結果: { '0': 'a', '1': 'b', '2': 'c' }

forEach()はコールバック関数の第二引数で配列のインデックスを受け取ります。
そのインデックスをオブジェクトのプロパティ名として使用しています。

次のようにreduce()を使用して、同じ結果を得ることができます。

const array = [ "a" , "b" , "c" ];

const obj = array.reduce( (result,e,index)=>{
            result[index]=e;
            return result;
        },{} );

console.log( obj ); // 結果: { '0': 'a', '1': 'b', '2': 'c' }

この方法は変数の宣言と、値のセットを同時に行えるのが利点ですね。

どちらの方法が優れている、ということはありませんが、個人的にはreduce()の方をよく使います。

Object.assign()を使用

Object.assign()を使用すると、ループを使用しなくてもオブジェクトに変換できます。

const array = [ "a" , "b" , "c" ];

const obj =  Object.assign( {} , array );

console.log( obj ); // 結果: { '0': 'a', '1': 'b', '2': 'c' }

Object.assign()は、オブジェクトのプロパティ名と値のセットを、異なるオブジェクトにコピーするメソッドです。
今回は配列からコピーしていますが、配列はArrayという名前のオブジェクトなので問題なく動作します。

多階層を考慮する

配列要素に配列が含まれているとき、これらの配列もオブジェクトに変換するようなコードを紹介します。

const array = [ "a" , "b" , ["dog","cat","panda"] , "c" ];

const arrayToObject = array => array.reduce( (result,e,index)=>{
            result[index]= Array.isArray(e) ? arrayToObject(e) : e;
            return result;
        },{} );

const obj = arrayToObject(array);

console.log( obj ); // 結果: { '0': 'a', '1': 'b', '2': 'c' }

値が配列のとき、再帰呼び出ししているだけですね。

 

配列の値をプロパティとして使用して特定の値で初期化する場合

次のような配列があるとします。

配列:[ "a" , "b" , "c" ]

これを次のように、配列の値をプロパティ名として、プロパティ値に何らかの値(初期値)をセットしたオブジェクトに変換します。

オブジェクト:{ a:初期値 , b:初期値 , c:初期値 }

forEach()を使用

まずは、forEach()などでループをしながらオブジェクトを組み立てていく方法です。

  // 元となる配列
const array = [ "a" , 5 , Symbol() , ()=>{} ,{a:1,b:2}];
  // 変換結果をセットするオブジェクト
const obj = {};
const initialValue = "";

array.forEach( e=>{
    if( ["string","number","symbol"].indexOf( typeof e ) >=0 ){
        obj[e]=initialValue;
    }
});

console.log( obj ); // 結果: { a: '', b: '', c: '' }

プロパティ名は、文字列、数値、シンボルを使用できます。
そのため、コード内ではそれ以外の値を無視しています。

配列の値をプロパティとしてオブジェクトを生成するケースは恐らく限定的な場面だけですね。
オブジェクトの構造を配列で受け取って、オブジェクトに展開するぐらいでしょうか。

そう考えると、値の型チェックは必要ないかもしれませんね。

このケースも、前項のようにreduce()や多階層対応できます。
しかし、蛇足的な気がするので省略します。
めんどくさくなったのではありませんよ…

更新日:2023/08/07

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。