JavaScriptでオブジェクトからなる配列を扱う方法

この記事では、JavaScriptでオブジェクトからなる配列を扱う方法について見ていきたいと思います。

配列にあるオブジェクトのプロパティにアクセスする方法

ここでは、配列にあるオブジェクトのプロパティにアクセスをする方法について見ていきたいと思います。

まずはオブジェクトの書き方について見ていきましょう。

オブジェクトの書き方

{プロパティ1: 値, プロパティ2: 値2, …}

このように{}の中でプロパティをカンマで区切ります。

次に配列の書き方を見ていきましょう。

配列の書き方

[要素1, 要素2, …]

このように[]の中に要素をカンマ区切りで入れていきます。

これを踏まえた上でオブジェクトからなる配列の書き方を見てみましょう。

オブジェクトからなる配列の書き方

オブジェクトからなる配列は以下のように記述します。

[
{プロパティ1: 値1, プロパティ2: 値2, …},
{プロパティ3: 値3, プロパティ4: 値4, …},
…
]

では、この書き方を用いた例を見ていきましょう。

例

let objects = [
                {"apple": "りんご", "banana": "バナナ"},
                {"milk": "牛乳", "egg": "卵"},
                {"cake": "ケーキ", "pudding": "プリン"}
              ];

console.log(objects[0].apple);
console.log(objects[1]["egg"]);

この例では、配列の中でオブジェクトがカンマで区切られて並べられていますね。

そして、その配列の中にある指定したオブジェクトのプロパティにアクセスするという内容になっています。

なので、最初のオブジェクトの「apple」プロパティの値と、
2番目のオブジェクトの「egg」プロパティの値が返されるはずです。

ではを見てみると

こうですね。
「apple」プロパティの値「りんご」と「egg」プロパティの値「卵」が返されていますね。

このように、上記の２パターンの書き方をすることで配列のなかのオブジェクトの値を呼び出すことができます。

では次に配列のなかのオブジェクトの値を変更する方法について見ていきましょう。

配列の中のオブジェクトの値を変更する方法

構文

配列の中のオブジェクトの値を変更するには以下のように書きます。

配列名[インデックス].プロパティ名 = 値;
もしくは
配列名[インデックス][“プロパティ名”] = 値;

それでは例を見ていきましょう。

例

let objects = [
                {"apple": "りんご", "banana": "バナナ"},
                {"milk": "牛乳", "egg": "卵"},
                {"cake": "ケーキ", "pudding": "プリン"}
              ];

objects[0].apple = "林檎";
objects[1].egg = "たまご";

console.log(objects);

ここでは、配列の最初の要素であるオブジェクトのプロパティappleと
2番目のオブジェクトのプロパティeggにそれぞれ値が代入されていますね。

このように書くことで指定したプロパティの元の値が上書きされるという形になります。

では結果を見てみると、

こうですね。

配列の最初のオブジェクトのプロパティ「apple」の値が「りんご」から「林檎」に、
２番目のオブジェクトのプロパティ「egg」の値は「卵」から「たまご」に変更されていますね。

このように、配列の中の指定したオブジェクトの指定したプロパティに値を代入することで
元の値を変更することができます。

では次に、オブジェクトに新しいプロパティを追加する方法について見ていきましょう。

オブジェクトにプロパティを追加する方法

オブジェクトにプロパティを追加するための書き方は変更するための書き方と同じです。

一応書き方を見てみると、

配列名[インデックス].プロパティ名 = 値;
もしくは
配列名[インデックス][“プロパティ名”] = 値;

こうですね。

では、以下で例を見てみましょう。

例

let objects = [
                {"apple": "りんご", "banana": "バナナ"},
                {"milk": "牛乳", "egg": "卵"},
                {"cake": "ケーキ", "pudding": "プリン"}
              ];

let add = objects[2]["icecream"] = "アイスクリーム";

console.log(objects);

ここでは、配列のインデックスが2(=3番目)のオブジェクトに「icecream」という名前のプロパティをセットし、それに「アイスクリーム」という値を代入するという内容になっています。

なので、配列の3番目のオブジェクトに「icecream」という名前のプロパティが追加されているはずです。

では結果を見てみると、

こうですね。
配列の3番目のオブジェクトにプロパティ「icecream」が追加されていますね。

このように、新しいプロパティ名を指定して、それに値を代入することでオブジェクトにプロパティを追加することができます。

まとめ

以上で見てきたように、

配列の中のオブジェクトをインデックスで指定して、そのオブジェクトにあるプロパティを指定することで、そのプロパティが有する値にアクセスすることができます。