フロントエンドエンジニア必須スキル！JavaScriptでスマートにキー・バリュー配列を操る

2024-04-16

JavaScript でキー・バリュー配列を格納する方法

オブジェクト (Object)

最も一般的で汎用性の高い方法です。以下のように、{} を使ってオブジェクトを定義します。

const data = {
  "name": "山田 太郎",
  "age": 30,
  "city": "東京"
};

オブジェクトのキーと値には、文字列や数値、さらには他のオブジェクトなど、様々なデータ型を使用できます。

オブジェクトの操作

キー・バリューペアを追加する:
```
data["email"] = "[email protected]";
```

キー・バリューペアの値を取得する:

const name = data["name"]; // "山田 太郎"
const age = data.age;      // 30

キー・バリューペアを削除する:
```
delete data["city"];
```

オブジェクトのキーをすべて取得する:

const keys = Object.keys(data);
console.log(keys); // ["name", "age", "email"]

利点

柔軟性と汎用性に優れている
複雑なデータ構造を表現できる
オブジェクト指向プログラミングと自然に連携できる

欠点

キーが文字列である必要がある
古いブラウザでは一部の機能がサポートされていない

Map

ES6 で導入された新しいデータ構造です。オブジェクトと似ていますが、キーが文字列である必要はなく、パフォーマンスが優れているという特徴があります。

const data = new Map([
  ["name", "山田 太郎"],
  ["age", 30],
  ["city", "東京"]
]);

パフォーマンスが優れている
ES6 で導入された比較的新しいデータ構造

jQuery オブジェクト

jQuery ライブラリを使用している場合は、jQuery.extend() メソッドを使用してキー・バリューペアを格納できます。

const data = $.extend({}, {
  "name": "山田 太郎",
  "age": 30,
  "city": "東京"
});

jQuery オブジェクトの値をすべて取得する:
```
const values = Object.values(
```

オブジェクト

// オブジェクトの作成
const data = {
  "name": "山田 太郎",
  "age": 30,
  "city": "東京"
};

// キー・バリューペアの追加
data["email"] = "[email protected]";

// キー・バリューペアの値の取得
const name = data["name"]; // "山田 太郎"
const age = data.age;      // 30

// キー・バリューペアの削除
delete data["city"];

// オブジェクトのキーの取得
const keys = Object.keys(data);
console.log(keys); // ["name", "age", "email"]

// オブジェクトの値の取得
const values = Object.values(data);
console.log(values); // ["山田 太郎", 30, "[email protected]"]

Map

// Mapの作成
const data = new Map([
  ["name", "山田 太郎"],
  ["age", 30],
  ["city", "東京"]
]);

// キー・バリューペアの追加
data.set("email", "[email protected]");

// キー・バリューペアの値の取得
const name = data.get("name"); // "山田 太郎"
const age = data.get("age");   // 30

// キー・バリューペアの削除
data.delete("city");

// Mapのキーの取得
const keys = data.keys();
console.log(Array.from(keys)); // ["name", "age", "email"]

// Mapの値の取得
const values = data.values();
console.log(Array.from(values)); // ["山田 太郎", 30, "[email protected]"]

jQuery オブジェクト

// jQuery オブジェクトの作成
const data = $.extend({}, {
  "name": "山田 太郎",
  "age": 30,
  "city": "東京"
});

// キー・バリューペアの追加
data.email = "[email protected]";

// キー・バリューペアの値の取得
const name = data.name; // "山田 太郎"
const age = data.age;   // 30

// キー・バリューペアの削除
delete data.city;

// jQuery オブジェクトのキーの取得
const keys = Object.keys(data);
console.log(keys); // ["name", "age", "email"]

// jQuery オブジェクトの値の取得
const values = Object.values(data);
console.log(values); // ["山田 太郎", 30, "[email protected]"]

汎用性と柔軟性を重視する場合は、オブジェクトがおすすめです。
キーが文字列である必要がなく、パフォーマンスを重視する場合は、Map がおすすめです。
jQuery を使用している場合は、jQuery オブジェクトを使用することもできます。

それぞれの方法の利点と欠点を理解した上で、適切な方法を選択してください。

JavaScript でキー・バリュー配列を格納するその他の方法

ネストされた配列

2 次元配列を使用して、キーと値を格納することができます。ただし、この方法はデータ構造がわかりにくくなり、メンテナンスが難しくなる可能性があります。

const data = [
  ["name", "山田 太郎"],
  ["age", 30],
  ["city", "東京"]
];

// キー・バリューペアの値の取得
const name = data[0][1]; // "山田 太郎"
const age = data[1][1];   // 30

// キー・バリューペアの削除
data.splice(2, 1); // "city" 要素を削除

Symbol

ES6 で導入された Symbol 型を使用して、キーとしてユニークな値を生成することができます。

const nameSymbol = Symbol("name");
const ageSymbol = Symbol("age");
const citySymbol = Symbol("city");

const data = {
  [nameSymbol]: "山田 太郎",
  [ageSymbol]: 30,
  [citySymbol]: "東京"
};

// キー・バリューペアの値の取得
const name = data[nameSymbol]; // "山田 太郎"
const age = data[ageSymbol];   // 30

// キー・バリューペアの削除
delete data[citySymbol];