SE

javascriptの連想配列ってどんな配列なのですか？

PM

javascriptでの連想配列は「キー」と「値」のペアによるデータ構造のことを言います。

JavaScriptの連想配列とは？

javascriptの配列は、例えば次のように宣言して参照します。

array0 = [‘a’,’b’,’c’,’d’,’e’];
console.log(array0[0]); → a
array1 = [0,1,2,3,4];
console.log(array1[0]); → 0

javascriptの配列の各要素はデータ型が何であっても構いません。配列の中に配列があるという場合でも、可能になります。例えば、次のようなコードが存在します。

array = [
[0,””a””],
[1,””b””],
[2,””c””] ];

javascriptでの配列の参照は、必ずインデックスで行います。書き方としては、以下のようになります。

array[0]

つまり、javascript連想配列とは、インデックスと言う数字ではなく、文字列で参照できるようになっているデータ型のことになります。

javascriptでの連想配列の宣言

javascriptで連想配列を宣言するには以下のようにします。配列との違いは、{}で囲むという点です。

array = { name:””JS太郎””, address:””東京都””, age:48 };

あるいは、以下のように書いても連想配列は宣言できます。どちらで書いても同じ意味になるので、双方で試してみてください。

array = {};
array[“”name””] = “”JS太郎””;
array[“”address””] = “”東京都””;
array[“”age””] = 48;

javascriptでの連想配列へのアクセス

上記で宣言した連想配列arrayにjavascriptでアクセスするには、以下のように書きます。

console.log(array[“”name””]); → JS太郎
console.log(array[“”address””]); → 東京都
console.log(array[“”age””]); → 48

文字列でアクセスしていることが確認できます。これが、連想配列です。インデックスでアクセスする配列との違いは、ここにあります。

連想配列＝メソッド

実際にjavascriptでは、下記のように書いた場合でも連想配列にアクセスできます。

console.log(array.name); → JS太郎
console.log(array.address) → 東京都
console.log(array.age) → 48

この書き方を見て、ピンと来る方もいるでしょう。javascriptでは、連想配列とメソッドは同じものなのです。そのため、どちらで書いても大丈夫です。

連想配列にアクセスする文字列のことを「キー」と言いますが、キーが外部から与えられ、どのようなキーでアクセスするのかが分からないときは、連想配列に文字列でアクセスします。
自分で明示的にキーを使用するときは、メソッドでアクセスするのがよいでしょう。

一般的に、使用するキーによりメソッド、もしくは文字列でアクセスをするというような分け方がされています。

連想配列を使うと何が便利なのか

しかし、ここまで読んで、連想配列を使うと何が便利なのか、配列を使ってもいいのではないか、と思われている方も多いのではないでしょうか。

大まかに言って、javascriptでは、配列と連想配列を使い分ける方法があります。まず、配列
は、同じ型を繰り返すデータの列のとき。連想配列は、違う型を管理するデータで、データそれぞれに意味があるとき、というような分け方です。

例えば、全て本のタイトルだけであれば、book = [ “”～””, “”～”” ];とし、タイトルだけを並べて、
book[インデックス」でアクセスできるようにした方が効率的です。こちらの方が分かりやすくもあります。

しかし、本のタイトルと著者名なら、以下のようなコードにして、連想配列を使います。

book = [
{“”title”” : “”～”” , “”author”” : “”～””},
{“”title”” : “”～”” , “”author”” : “”～””},
{“”title”” : “”～”” , “”author”” : “”～””},
…
];

こうすれば、book[インデックス].titleは本のタイトル、book[インデックス].authorは本の著者名と、コードを見ると何を処理しているのか一発で分かります。

もし、book[インデックス][0]やbook[インデックス][1]だったら何を処理したいのか、これだけでは分かりません。極めて可読性の低いコードになってしまうでしょう。javascriptで連想配列を使うのは、このような場面なのです。

for … in文の使い方

連想配列から効率的にキーを取得するための手段として、for … in文があります。次のようにして使います。

array = { name:””JS太郎””, address:””東京都””, age:48 };
for (key in array) {
console.log(key);
console.log(array[key]);
}

・結果
name
JS太郎
address
東京都
age
48

for … inで取得できるのは、あくまでも「キー」だけということには注意が必要です。値を取得するためには、取得したキーでアクセスします。

そして、for … inは順番を保証しない、ということも注意してください。定義した順番にキーが返ってくるとは限りません。

連想配列の要素の削除

連想配列の要素を削除するには、deleteを使います。下記のようにして、キーを指定し、削除します。

array = { name:””JS太郎””, address:””東京都””, age:48 };
delete(“”address””);

forEach文の使い方

forEach文を使うと、連想配列に対しての処理がよりスマートに書くことができます。例えば、以下のサンプルコードを実行すると、下記のような結果になります。

array = { name:””JS太郎””, address:””東京都””, age:48 };
Object.keys(array).forEach(function(item) {
console.log(item + “”:”” + this[item]);
}, array);

name:JS太郎
address:東京都
age:48

forEachは、「配列の各要素に対してこの関数の処理を実行せよ」という命令です。連想配列なので、そのままでは使うことができません。Object.keys(連想配列)と書いて「キーの配列」を取り出します。その取り出したキーの配列に対して処理を行うわけです。

取り出したキーの配列に対して以下のように書くと、「変数」にキーが入り、thisに連想配列が入って関数内で使えるようになります。

.forEach(function(変数) {
関数の処理
}, 連想配列);

SE

コードには、多くの種類があるのですね。

PM

これらのコードを使いこなすことで、効率のいい開発をすることができます。

連想配列を使い可読性の高いコードを書こう

javascriptで開発するときは、連想配列を使って可読性の高いコードを書きましょう。いつでも連想配列を使えばいい、というものではありません。シンプルな配列の方がいい場合も、多々あります。

シンプルな配列を使うべきところは、for(;;)が使えるところです。

例えば、array = [“”a””, “”b””, “”c””];に対して、for(i=0; i<array.length; i++)と書いて繰り返し処理を行うのは、実にシンプルで強力な手法です。

もちろんですが、連想配列は添え字が数ではないため、lengthメソッドは使えません。lengthメソッドを使い、繰り返し処理を書くべき場面は多々あります。

しかし、先ほども書いたことですが、要素の意味が分からなくなる場合は、連想配列を使いましょう。

キーを取り出すには、「for … in」や「forEach」があります。覚えてしまえばこれほど便利なものもありません。連想配列を使いこなし、可読性の高いコードを書き、効率良くjavascriptで開発をしましょう。