• JavaScript

JavaScriptで配列とオブジェクトを比較。重複した値を持つ要素だけ取得する方法

JavaScriptで配列とオブジェクトを比較。重複した値を持つ要素だけ取得したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

配列とオブジェクトを比較。重複した値を取得するコード例

  //オブジェクト
  const Age = {
    佐藤: 20,
    渡辺: 30,
    小林: 40,
    佐々木: 10,
    高橋: 50,
  };

  // 配列
  const Person = ["佐藤", "鈴木", "高橋", "田中", "伊藤"];

  Person.filter(function (value, index) {
    //for inで繰り返し
    for (let Person in this) {
      //オブジェクトのプロパティと配列の値を比較。一致してたらコンソールに出力
      if (Person === value) {
        console.log(value + 'さんは' + this[value] + '歳です。' );
      }
    }
  }, Age); // 第2引数にオブジェクトを指定

//コンソールの出力結果
//佐藤さんは20歳です。
//高橋さんは50歳です。

配列とオブジェクトを比較。重複した値を取得するコード例です。

Ageオブジェクトに名前と年齢が定義されてます。

Person配列にある名前と一致したageオブジェクトのプロパティ・値をコンソールに出力してます。

コードの詳細は以下の通りです。

filterメソッドを使って比較する

Person.filter(function (value, index) {
  比較する条件式
}, Age); 

filterメソッドを使う事でオブジェクトと配列を比較する事ができます。

使い方は以下の通りです。

配列.filter(function (value, index) {条件式}, オブジェクト);

filterメソッドの第一引数にコールバック関数、第二引数に比較対象のオブジェクトを定義します。

コールバック関数の引数にはそれぞれ以下の内容が入ってきます。

value：配列の値
inde：配列のインデックス番号

for…inを使ってオブジェクトをループ。配列と一致した値を取得

for (let Person in this) {
  //オブジェクトのプロパティと配列の値を比較。一致してたらコンソールに出力
  if (Person === value) {
    console.log(value + "さんは" + this[value] + "歳です。");
  }
}

コールバック関数内で for…inを使いオブジェクトの値をループで取り出します。

コールバック関数内のthisは第二引数に指定したオブジェクトを参照できます。

if文で条件式にオブジェクトの値と配列値（value）が===の場合を定義。

一致した値のみ取得されます。

以上で実装完了です。

まとめ

JavaScriptで配列とオブジェクトを比較。重複した値を持つ要素だけ取得する方法について紹介しました。

以上で解説を終わります。