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


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

今やほとんどのwebサイトで使用されているJavaScript。

フロントエンドにとどまらず、バックエンドも書くことができるJavaScriptは今後もしばらく需要が大きい言語になるでしょう。

そんなJavaScriptを学んでいく上で必ず抑えておきたいのが、"配列と連想配列の違い"についてです。 この記事では、具体例を上げながら配列と連想配列の違いについて解説していきます。

目次
  1. JavaScriptの配列と連想配列の違いとは?
  2. JavaScriptの配列とは?
  3. 配列の定義は「[]もしくはArray」
  4. 配列を作成してみる
  5. JavaScriptの連想配列とは?
  6. 連想配列の定義は「{}もしくは Object 」
  7. 連想配列を作成してみる
  8. まとめ

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

image

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

【配列の特徴】

  • [] で囲まれている

  • 添字は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の「配列」について説明していきます。

image

配列の定義は「[]もしくは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の連想配列とは?

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

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

連想配列の定義は「{}もしくは 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」と表記して値を呼び出すこともできますよ。

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

まとめ

image

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

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


関連記事

りもた
この記事を書いた人
りもた
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp