2020/09/15

【これだけ】JavaScriptの配列の構造【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptの配列の構造について、配列と連想配列に分け、簡単に解説していきます。

配列

JavaScriptにはArrayクラスがあり、配列の構築に使用することができます。

var names = [];
names[0] = "山田";
names[1] = "田中";
names[2] = "髙橋";

配列は、上記のコードのように、”[]”で宣言でき、”変数名[添字]”で各要素にアクセスできます。

var names = ["山田","田中","髙橋"];

上記のコードのように、添字指定ではなく、宣言時に複数の要素を一気に代入してしまうこともできます。

連想配列

JavaScriptには、添字ではなく、キー文字列(名前)で仕切る、連想配列もあります。

var member = {};
member['name'] = "山田";
member['age'] = "24";
member['gender'] = "男性";

連想配列では、上記のコードのように、キー文字列(名前)ごとに、値を格納することができます。

var member = {'name':"山田",'age':"24",'gender':"男性"};

配列同様、連想配列も、上記のコードのように宣言時にまとめてキー文字列(名前)と値のセットでデータを入れることができます。

配列の中の連想配列

データベースやAPI連携でデータを取得すると、配列の中に連想配列があるというデータ構造になっていることがあります。

var members = [];
members[0] = {'name':"山田",'age':"24",'gender':"男性"};
members[1] = {'name':"田中",'age':"26",'gender':"女性"};
members[2] = {'name':"髙橋",'age':"27",'gender':"女性"};

これは、上記のコードのように、配列の各要素にそれぞれ同じ項目を持った連想配列が入っており、エクセルのようなデータ構造になっています。

var members = [
    {'name':"山田",'age':"24",'gender:"男性"},
    {'name':"田中",'age':"26",'gender':"女性"},
    {'name':"髙橋",'age':"27",'gender':"女性"}
];

値に連想配列が入ってはいますが、配列であることに変わりはないので、上記のコードのように、宣言時にまとめて連想配列のデータを入れることも可能です。

• facebook
• Tweet
• Read Later