[ JavaScript 基礎 ] 配列内のオブジェクトを操作する(値の取得/値の更新)

プログラムを書いていると、次のようなコードを見ることもあるかもしれません。

let data = [
   { id : 1, name : "坂東武" , age : 67 },
   { id : 2, name : "橋田仁平" , age : 89 },
   { id : 3, name : "野田亀子" , age : 59 },
   { id : 4, name : "森下のり" , age : 78 },
];

フロントエンド周りを触る人であればAPIの繋ぎ込み作業をすることもありますため、見慣れている方も多いと思いますが、上記のコードでは、配列内で複数のオブジェクトを保持していることが分かります。

本記事では、上記のような配列内にある複数のオブジェクトの中から特定のオブジェクトを取り出し、取り出したオブジェクト内の「値」のみを取得・更新する方法についてご紹介します。

必要なファイルを準備
1. HTMLファイル内のコードを記述
2. JSファイル内のコードを記述
特定のオブジェクトを取り出す
オブジェクト内の特定の値を取り出す
オブジェクト内の特定の値を更新する
まとめ

必要なファイルを準備

作業を始める前に必要なファイルを準備していきます。私は以下のような構造で作成しています。(◎がフォルダになります。フォルダ・ファイル名はお好きなものに変更して頂いてOKです。)

◎ js_array_obj
     - arrObj_sample.html
     - arrObj_sample.js

HTMLファイル内のコードを記述

以下のようなコードを準備しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配列内のオブジェクトを操作</title>
  </head>
  <body>
    <script src="./arrObj_sample.js"></script>
  </body>
</html>

JSファイル内のコードを記述

JavaScriptファイルは、定義のみしておきましょう。

// オブジェクト内の値を操作する際に使用
let value_get;

// 配列を定義
const task = [
    { 
      uid : 001, 
      title: "タイトル1", 
      content: "運動",
      flg : false
    },
    {
      uid : 002, 
      title: "タイトル2", 
      content: "掃除",
      flg : true
    },
    {
      uid : 003, 
      title: "タイトル3", 
      content: "勉強",
      flg : false
    }
]

特定のオブジェクトを取り出す

必要なファイル及びコードが準備出来たら、配列task内から特定のオブジェクト(uidの値が002であるもの)を取り出してみましょう。

イメージとしては、filterメソッドで条件を指定し、一致するオブジェクトをmapメソッドで取り出していく流れになります。

コードは以下のようになります。

value_get = task.filter((j) => j.uid === 002).map((obj) => {
    return obj;
})

console.log(value_get)

デベロッパーツール(検証ツール)を開き、Consoleを確認をしてみると

uidが002のオブジェクトだけが取得できていることが分かります。

仮に、uidが002であるオブジェクトが複数ある時はどうしたらいいのか?と疑問を抱くこともあるかもしれませんが、filterメソッドで単一ではなく、複数の条件を指定してあげれば大丈夫です。

task.filter((j) => j.uid === 002 && j.title === "タイトル2")

オブジェクト内の特定の値を取り出す

特定のオブジェクトを取得できたところで、続いてはオブジェクト内にある特定の値を取得する方法についてみていきましょう。

先程と同様のコードを修正し、オブジェクト内にあるcontentのみを取得していけるようにします。「オブジェクト.key」で値を取得することが可能です。

value_get = task.filter((j) => j.uid === 002).map((obj) => { 　
    // 取得したオブジェクト内にあるcontentへアクセスする
    return obj.content;
}) 

// mapメソッドは値を返す際に配列で返すので、String()で囲んで文字列に変換
console.log(String(value_get))

コードが修正出来たら、デベロッパーツール(検証ツール)上で、Consoleを確認してみましょう。

上の画像のようにuidが002のオブジェクトが保持するcontentの値が確認出来きているはずです！

オブジェクト内の特定の値を更新する

最後に、オブジェクト内にある特定の値を更新(変更)する方法になります。

こちらは、mapメソッド内で、別の値を代入してあげることで可能です。

以下のコードでは、uidが001のオブジェクトからflgを取得し、値をtrueに変更しています。変数には、しっかりと値が変更されているかを確認するために、オブジェクトを返すようにしてます。

value_get = task.filter((j) => j.uid === 001).map((obj) => {
    // 値をfalseからtrueに変更
    obj.flg = true;
    // オブジェクトを返す
    return obj;
})

ここまで書けたら、デベロッパーツール(検証ツール)で確認してみてください。

すると、以下のようにflgの値がfalseからtrueに変わっていることが分かります。

まとめ

配列内から特定のオブジェクトを取得 : filterメソッドで条件を指定し、mapメソッドで条件に一致するオブジェクトを取り出す
オブジェクト内から特定の値のみを取り出す : object.key
オブジェクト内から特定の値を更新 : object.key = “値”