ImpressCMS
HOME  >  JSCRIPT  > 制御文 > 配列の基礎(制御文ではないですが) > 連想配列

 5 - 3 - 3 : 連想配列

前項で多次元配列を学びました。一次元配列も多次元配列も配列は何番目のデータという形で表現をしています。
ただ、配列の要素が増えていくと、番号だとよくわからなくなりますし、コーディングをしている際に、間違える可能性も高くなってしまいます。
番号ではなくそれぞれの項目に名前を付けて配列を管理するとわかりやすくなります。これを連想配列といいます。
先程の
var user = [
    ["田中", 35, "鹿児島県"], // 0番目
    ["鈴木", 50, "長野県"], // 1番目
    ["福岡", 32, "鳥取県"], // 2番目
];
の中で、名前をname、 年齢をage、出身都道府県をprefという名前で管理しようとした場合
 
var user = [
    {name:"田中", age:35, pref:"鹿児島県"}, // 0番目
    {name:"鈴木", age:50, pref:"長野県"}, // 1番目
    {name:"福岡", age:32, pref:"鳥取県"}, // 2番目
];
このような書き方で宣言をします。
それぞれの要素を記述する際、番号配列の場合は「 [ ] 」でくくられていたのに対して、連想配列の場合は「{ }」でくくられますので気をつけてください。

このように定義をしますと、
一人目の出身県は
user[0].pref

または

user[0][‘pref’]

という書き方で取り出すことができます。

次にすでにある配列にデータを加えたい場合(3人のデータから4人のデータにするみたいな)は
順番がわかっている場合は
var user[3] = {name : "森田", age : 32, pref : "茨城"};
このような書き方をしてもいいですが、順番がわからない場合(いくつデータが入っているかわからない場合)は
仮配列で定義して、そのあと配列に追加をする形を取ります。
配列の追加は、「pushメソッド」を利用します。
var user_tmp = {name : "森田", age : 32, pref : "茨城"};
user.push(user_tmp);
配列はArrayオブジェクトで表現されますが、他にも様々なメソッドがあります。それについてはまた別の項で説明します。

では、実際に今のスクリプトを入力してブラウザでファイルを開いてみましょう。
jsbase.htmlをpractice5.htmlにコピーして開きましょう。そしてスクリプトタグの中に
 
var user = [    
  {name : "田中", age : 35, pref : "鹿児島県"},
  {name : "鈴木", age : 50, pref : "長野県"},    
  {name : "福岡", age : 32, pref : "鳥取県"}  
];    

var count = user.length; // 配列の数を調べるのがlength

for(var i =0; i < count; i++){    
    document.write( (i+1) + "番目の方のお名前は" + user[i].name + "さんで、年齢は" + user[i].age + "歳です<br>");    
}    

var user_tmp = {name : "森田", age : 32, pref : "茨城"};    
user.push(user_tmp);    

document.write("追加しました<br>");

count = user.length;    
for(var i =0; i < count; i++){    
    document.write( (i+1) + "番目の方のお名前は" + user[i].name + "さんで、年齢は" + user[i].age + "歳です<br>");    
}
と書いてみましょう。
新しく、lengthというものが出てきました。lengthは、「長さ」の英語なのですが、ここでは要素の数を表します。
なので、7行目のuser.lengthは、配列要素の数は3つですので、3が入り、データが追加された後の要素の数は4つになるので、4が入ります。

追加する前と。追加した後の配列の違いを確認できましたでしょうか。
ということで、追加される前と後とで配列の要素の数が間違いなく変わっていることを確認してください。
Publish : 4505 bytes - updated 2024-07-31 by 管理人