連想配列

[書き方]

全て同じ意味である。

var obj = {cogi_1 : "みかん" , corgi_2 : "カルビ"};

var obj = {};
	obj.corgi_1 = "みかん"; // ドット記法
	obj.corgi_2 = "カルビ";
	
var obj = {};
	obj["corgi_1"] = "みかん"; // ブラケット記法
	obj["corgi_2"] = "カルビ";
	
var obj = new Object();
	obj.corgi_1 = "みかん";
	obj.corgi_2 = "カルビ";

[実行結果]

mizukiの年齢は「」歳です

wataruの性別は「」です

家族の年齢はそれぞれ「」です

この店のメニューは「」です

代表的な沖縄料理は「」です

連絡簿「

[ソースコード]

/* newを使った連想配列 */
var hairetsu1 = new Array();
hairetsu1["wataru"] = 40;
hairetsu1["mizuki"] = 33;
document.getElementById('a').innerHTML = hairetsu1.mizuki;

/* {}を使った連想配列 */
var hairetsu2 = { "wataru" : "man" , "mizuki" : "woman" };
//console.log(hairetsu2); // 配列
//console.log(Object.keys(hairetsu2)); // メソッドだけ抜き出し
//console.log(Object.keys(hairetsu2).length); // 連想配列の要素数
document.getElementById('b').innerHTML = hairetsu2["wataru"];
//document.getElementById('b').innerHTML = hairetsu2.wataru; // 同じ意味

/* {}を使った連想配列 */
var hairetsu3 = {"WATARU":40,"MIZUKI":33,"MIKAN":7,"CARUBI":6};
//console.log(hairetsu3["WATARU"]); // 40 特定のプロパティを指定
//console.log(Object.keys(hairetsu3)); // メソッドのみ全部抜き出し
for(var propaty in hairetsu3){
//console.log(propaty); // ループでメソッドのみを一回ずつ表示
//console.log(hairetsu3[propaty]); // ループでプロパティのみを一回ずつ表示
document.getElementById('c').innerHTML = hairetsu3[propaty]; // 繰り返しされない
}

/* {}を使った連想配列 */
var hairetsu4 = {"food1":"ラーメン","food2":"酢飯","food3":"唐揚げ","food4":"シリアル","food5":"カツ丼"};
for(var i = 1; i<=5; i++){ // メソッドの数字に着目してループで一回ずつ表示
//document.write(hairetsu4["food"+i]);
document.getElementById('d').innerHTML = hairetsu4["food" + i]; // 繰り返しされない
}

/* {}を使った連想配列 */
var hairetsu5 = {"food1":"ポーク卵","food2":"チヂミ","food3":"ソーメン","food4":"ポーポー","food5":"ゴーヤー"};
for(var j in hairetsu5){
//console.log(j); // メソッドのみ全部抜き出し
//console.log(hairetsu5[j]); // プロパティのみ全部抜き出し
//document.write(hairetsu5[j]); // for in
document.getElementById('e').innerHTML = hairetsu5[j]; // 繰り返しされない
}

/* {}を使った連想配列 */
var customers = {"田中一郎":"052-876-1111","田中二郎":"052-876-2222","田中三郎":"052-876-3333"};
//console.log(customers); // 配列
for(var key in customers){ // keyがメソッドの"田中…"にあたり、プロパティは"配列名[名前]"で表す。
//console.log(key); // 名前
//console.log(customers[key]); // 電話番号
//document.write(key + "さんの番号は" + customers[key] +"です。
"); document.getElementById('f').innerHTML = key + "さんの番号は" + customers[key] +"です。; } /* 配列の要素にオブジェクトを配置したもの (多次元配列)*/ var cart = [{ name:"タマネギ", price:80, quantity:3 },{ name:"じゃがいも", price:60, quantity:5 },{ name:"ニンジン", price:40, quantity:4 }]; //console.log(cart[0]); // {name:"タマネギ",price:80,quantity:3} //console.log(cart[1]); // {name:"じゃがいも",price:60,quantity:5} //console.log(cart[2]); // {name:"ニンジン",price:40,quantity:4} var items = []; var totalPrice = 0; var totalQuantity = 0; for(var key in cart){ // var メソッド in 配列 = メソッドは{}ひとつのこと //console.log(cart[key]); // []内の要素{}ひと括りずつ //console.log(cart[key].name); // []内の要素{}内のnameひとつずつ //console.log(cart[key].price); // []内の要素{}内のpriceひとつずつ //console.log(cart[key].quantity); // []内の要素{}内のquantityひとつずつ items.push(cart[key].name); // 1ループに1つずつ加えていく //console.log(items); //totalPrice = cart[key].price * cart[key].quantity; // 80*3, 60*5, 40*4 totalPrice += cart[key].price * cart[key].quantity; //(80*3),+(60*5)+ (40*4) //console.log(totalPrice); //totalQuantity = cart[key].quantity; // 3, 5, 4 totalQuantity += cart[key].quantity; // 3+ 5+ 4 //console.log(totalQuantity); } //document.write("「" + items + "」を合計「" + totalQuantity + "」個買って合計金額は「" + totalPrice + "」円でした。"); document.getElementById('g').innerHTML = items + "を合計" + totalQuantity + "個買って合計金額は" + totalPrice + "円でした。";