【初心者向け】JavaScriptの配列と連想配列の違いとは？

JavaScriptの配列と連想配列の違いとは？

まず、配列と連想配列の違いを確認しましょう。 それぞれの特徴は、以下の通りです。

【配列の特徴】

• [] で囲まれている

• 添字は0から始まる整数

例

var hoge = ['foo', 'bar', 'piyo']

console.log(hoge[0]);
// 'foo'が表示されます。

【連想配列の特徴】

• {} で囲まれている

• keyとvalueを持つ

• keyは文字列

例

var hoge = {'フー': 'foo', 'バー': 'bar', 'ピヨ', 'piyo'};

console.log(hoge[‘foo’]);
// fooが表示されます。

まとめると配列と連想配列の違いは、

• 配列は数字

• 連想配列はkeyと呼ばれる文字列

を目印に値を取り出していることです。

JavaScriptの配列とは？

それでは、ここからはまずJavaScriptの「配列」について説明していきます。

配列の定義は「[]もしくはArray」

配列を使用する際は配列の宣言をしましょう。宣言するときは「[]もしくはArray」を使用します。

ちなみに、JavaScriptは自由度の高いプログラミング言語です。なので、配列ひとつにしても様々な書き方があります。

これがJavaScriptの魅力でもあるのですが、初心者には難しく感じるのもまた事実です。

これからコードを具体的に記入しながら説明をしていきますが、どれも「hoge という配列を Array もしくは［］で宣言して、0には foo という値を入れ、1には bar という値を入れ、2には piyo という値を入れる」ということをしています。

言葉だけでは非常に難しく思えてしまうかもしれませんが、そのことを念頭におきながら読んでいただけると理解がスムーズです。それでは解説していきます。

配列を作成してみる

ここからは、実際に配列を作っていきます。

まずは配列を宣言

配列の宣言の仕方にはさまざまありますが、ここでは大まかに「［］と new Array の2つがある」ということを覚えておくとよいでしょう。

ただし、new Array に関しては記述が長くなることや、挙動がややこしいなどのデメリットがあるため、基本的には［］（配列リテラル）で書いていくことをおすすめします。

配列の宣言は、以下のコードのうちどちらかで行います。

var hoge = [];

// または

var hoge = new Array();

// で配列を宣言する

配列に値を追加していく

配列を宣言したところで、次は値を追加していきましょう。

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

// 宣言はどちらか（前者が望ましい）
var hoge = []; 
// または
var hoge = new Array();

//配列に値を追加する
hoge[0] = 'foo';
hoge[1] = 'bar';
hoge[2] = 'piyo';

このように配列は、「0以上の整数」を添字にして代入します。 また、数字を指定せずとも、

hoge.push('wow')

hoge[] = 'wow'

とすることで配列の1番後ろに値が追加されていきます。

コードをより簡潔に書くには

ここまでは、宣言と値を別々に記入していましたが、まとめて書くことでコードをより簡潔にすることができます。

実際のコードは以下の通りです。

// []でまとめて宣言するとこうなる
var hoge = ['foo', 'bar', 'piyo'];

// new Arrayでまとめて宣言するとこうなる
var hoge = new Array ('foo', 'bar', 'piyo');

実際に値を呼び出してみる

ここまでの項で書いてきた配列から、値を呼び出すときは以下のようにコードを書きます。

 console.log(hoge[0])
// foo と表示されます

console.log(hoge[1])
// bar と表示されます

console.log(hoge[2])
// piyo と表示されます

ここでは、hoge という配列を Array もしくは［］で宣言して、 「0には foo」、「1にはbar」、「2には piyo 」という値を入れています。

JavaScriptの連想配列とは？

配列については理解できましたでしょうか？

ここからは連想配列の説明をしていきます。

連想配列の定義は「｛｝もしくは Object 」

配列を宣言するときは「［］もしくは Array 」を使用しましたが、連想配列を宣言するときには「｛｝もしくは Object 」を用います。

コードは以下のような形です。

var hoge = {};

// または

var hoge = new Object();

// で配列を宣言する

できるだけ短いものを選ぶほうが楽ですので、前者の「｛｝」を使っていきましょう。

連想配列を作成してみる

それでは、ここからは実際に連想配列を作成していきます。

まずは連想配列を宣言

前述の通り、連想配列の宣言方法には「｛｝と Object 」の2つがあります。

 var hoge = {};

// または

var hoge = new Object();

// で連想配列を宣言する

連想配列に値を追加していく

連想配列を宣言したところで、次は値を追加していきましょう。

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

 // 宣言はどちらか（前者が望ましい）
var hoge = {}; または var hoge = new Object();

// 連想配列に値を追加する
hoge ['フー'] = 'foo';
hoge ['バー'] = 'bar';
hoge ['ピヨ'] = 'piyo';

コードをより簡潔に書くには

ここまでは宣言と値を別々に記入していましたが、まとめて書くことでコードをより簡潔にすることができます。

実際のコードは以下の通り。

// {}でまとめて宣言
var hoge = {'フー': 'foo', 'バー': 'bar', 'ピヨ', 'piyo'};

実際に値を呼び出してみる

ここまでで書いてきた連想配列から、値を呼び出すときは以下のようにコードを書きます。

 console.log(hoge['フー')
// foo と表示されます

console.log(hoge['バー'])
// bar と表示されます

console.log(hoge['ピヨ'])
// piyo と表示されます

なお、キーワードが英語であれば「hoge.foo」と表記して値を呼び出すこともできますよ。

まとめ

配列と連想配列の違いは理解できましたでしょうか？ 値を数字で呼び出すものが配列、文字列で呼び出すものが連想配列です。

バックエンドとフロントエンドのやりとりをする際には、オブジェクトの構造をきちんと理解することが必要になります。 実際の開発を交えながら少しずつ慣れていきましょう。