JavaScript連想配列を徹底解説！10選の使い方とサンプルコード

はじめに
●JavaScript連想配列の基本
- ○連想配列とは
- ○連想配列の作成方法
●連想配列のループ処理
●連想配列の応用例とサンプルコード
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScript連想配列の使い方が身につき、10種類のサンプルコードを使って実践的なスキルを身につけることができます。

初心者の方でもわかりやすい説明とサンプルコードで、連想配列の活用法を学ぶことができます。

●JavaScript連想配列の基本

○連想配列とは

連想配列は、キーと値のペアで構成されるデータ構造です。

JavaScriptでは、オブジェクトを連想配列として扱うことができます。

○連想配列の作成方法

JavaScriptで連想配列を作成するには、オブジェクトリテラルを使用します。

連想配列の作成方法です。

let fruits = {
  'apple': 3,
  'banana': 5,
  'orange': 2
};

上記の例では、連想配列fruitsを作成し、それぞれのフルーツ名がキー、個数が値となっています。

●連想配列のループ処理

連想配列をループ処理する方法にはいくつかあります。

ここでは、主要な4つの方法を紹介します。

○for in文を使ったループ

for in文を使って連想配列のキーを取得し、そのキーを使って値にアクセスすることができます。

for (let key in fruits) {
  console.log(key + ': ' + fruits[key]);
}

上記の例では、fruitsの連想配列をループ処理し、キーと値をコンソールに出力しています。

○Object.keys()を使ったループ

Object.keys()を使って連想配列のキーの配列を取得し、その配列をループ処理することができます。

Object.keys(fruits).forEach(function (key) {
  console.log(key + ': ' + fruits[key]);
});

上記の例では、fruitsの連想配列のキーの配列を取得し、forEach()でループ処理してキーと値をコンソールに出力しています。

○Object.entries()を使ったループ

Object.entries()を使って連想配列のキーと値のペアの配列を取得し、その配列をループ処理することができます。

Object.entries(fruits).forEach(function ([key, value]) {
  console.log(key + ': ' + value);
});

上記の例では、fruitsの連想配列のキーと値のペアの配列を取得し、forEach()でループ処理してキーと値をコンソールに出力しています。

○forEach()を使ったループ

forEach()を使って連想配列をループ処理することもできますが、その前にObject.entries()で連想配列を配列に変換する必要があります。

Object.entries(fruits).forEach(function ([key, value]) {
  console.log(key + ': ' + value);
});

上記の例では、fruitsの連想配列をObject.entries()でキーと値のペアの配列に変換し、forEach()でループ処理してキーと値をコンソールに出力しています。

●連想配列の応用例とサンプルコード

連想配列を使用して実現できる応用例を5つ紹介します。

それぞれの例には、サンプルコードと詳細な説明が付けられています。

○例1：フィルタリング機能

連想配列から特定の条件を満たす要素を抽出するフィルタリング機能を実装します。

// 値が3以上の要素を抽出するフィルタリング関数
function filterFruits(target) {
  let result = {};
  for (let key in target) {
    if (target[key] >= 3) {
      result[key] = target[key];
    }
  }
  return result;
}

// サンプルの連想配列
let fruits = {
  'apple': 3,
  'banana': 5,
  'orange': 2
};

let filteredFruits = filterFruits(fruits);
console.log(filteredFruits);
// 出力: { apple: 3, banana: 5 }

上記の例では、値が3以上の要素を抽出するフィルタリング関数filterFruitsを定義し、連想配列fruitsから条件に合致する要素を抽出しています。

○例2：ソート機能

連想配列の要素を値に基づいてソートする機能を実装します。

// 値に基づいて昇順にソートする関数
function sortFruits(target) {
  let sortedKeys = Object.keys(target).sort((a, b) => target[a] - target[b]);
  let result = {};
  for (let key of sortedKeys) {
    result[key] = target[key];
  }
  return result;
}

let sortedFruits = sortFruits(fruits);
console.log(sortedFruits);
// 出力: { orange: 2, apple: 3, banana: 5 }

上記の例では、値に基づいて昇順にソートする関数sortFruitsを定義し、連想配列fruitsの要素をソートしています。

○例3：集計機能

連想配列を使って集計機能を実装します。

例えば、商品の売上個数を集計します。

// 売上データの配列
let salesData = [
  { product: 'apple', quantity: 3 },
  { product: 'banana', quantity: 5 },
  { product: 'apple', quantity: 4 },
  { product: 'orange', quantity: 2 },
  { product: 'banana', quantity: 1 }
];

// 集計機能を実装する関数
function aggregate(data) {
  let result = {};
  for (let item of data) {
    // すでに集計結果に商品がある場合、個数を加算
    if (result[item.product]) {
      result[item.product] += item.quantity;
    } else {
      // まだ集計結果に商品がない場合、新しい要素として追加
      result[item.product] = item.quantity;
    }
  }
  return result;
}

let aggregatedData = aggregate(salesData);
console.log(aggregatedData);
// 出力: { apple: 7, banana: 6, orange: 2 }

上記の例では、売上データの配列から商品ごとの売上個数を集計するaggregate関数を定義しています。

集計結果は連想配列で返されます。

○例4：オブジェクトのマージ

複数の連想配列をマージする機能を実装します。

// 連想配列をマージする関数
function mergeObjects(obj1, obj2) {
  let result = { ...obj1 };
  for (let key in obj2) {
    result[key] = obj2[key];
  }
  return result;
}

let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };

let mergedObj = mergeObjects(obj1, obj2);
console.log(mergedObj);
// 出力: { a: 1, b: 3, c: 4 }

上記の例では、2つの連想配列をマージする関数mergeObjectsを定義しています。

obj2の要素がobj1に上書きされます。

○例5：連想配列のディープコピー

連想配列をディープコピーする機能を実装します。

// 連想配列のディープコピーを実行する関数
function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

let original = {
  a: 1,
  b: { c: 2, d: 3 }
};

let copied = deepCopy(original);
copied.b.c = 4;

console.log(original); // 出力: { a: 1, b: { c: 2, d: 3 } }
console.log(copied);   // 出力: { a: 1, b: { c: 4, d: 3 } }

上記の例では、連想配列をディープコピーする関数deepCopyを定義しています。

JSON.stringifyとJSON.parseを使って連想配列をディープコピーしています。

●注意点と対処法

連想配列を扱う際に注意すべき点と対処法を紹介します。

ネストされたオブジェクトのディープコピーには、JSON.stringifyとJSON.parseを使う方法がありますが、関数やシンボル、循環参照が含まれる場合は適切にコピーできません。
そのような場合は、再帰的な関数を使ってディープコピーを実装することが望ましいです。
連想配列のループ処理で、for…in文を使う場合は、プロトタイプチェーン上のプロパティも列挙されることがあるため、hasOwnPropertyメソッドでチェックすることが推奨されます。