JavaScriptの基本連想配列 | 65歳からのWordPress

JavaScriptの基本連想配列

JavaScript 2022年2月18日

　出典：JavaScriptの連想配列
　なんでも直ぐ忘れる？、いや元々覚えていないので「基本の基」から。

宣言

配列の宣言：

var 配列の変数名 = ["値a","値b","値c"];

連想配列の宣言：

var 連想配列の変数名 = {キーa:"値a",キーb:"値b",キーc:"値c"};

　厳密にはJavaScriptには連想配列は存在せず、「オブジェクト」または「オブジェクトリテラル」と呼ばれるものだそう。
　よく分からんが、「連想配列」＝「オブジェクト」らしい

連想配列をループして取り出す方法

let a = {name:"Mike", sex:"Male"};
a.place = "Tokyo";
for (k in a){
    console.log(k + "は" + a[k] + "です");
}
nameはMikeです
sexはMaleです
placeはTokyoです

連想配列からキー一覧を取得

let a = {name:"Mike", sex:"Male"};
a.place = "Tokyo";
for (k in a){
    console.log(k);
}
name
sex
place

let a = {name:"Mike", sex:"Male"};
a.place = "Tokyo";
console.log(Object.keys(a));
[ 'name', 'sex', 'place' ]

連想配列からデータ一覧を取得

forlet a = {name:"Mike", sex:"Male"};
a.place = "Tokyo";
for(k in a){
    console.log(a[k]);
}
Mike
Male
Tokyo

連想配列のネスト

宣言と取得

var fruits = {
    apple : { "name" : "りんご", "value":100 },
    orange : { "name" : "オレンジ", "value":80 },
    melon : { "name" : "メロン", "value":1000 }
};

for (key in fruits) {
    console.log(key);
    console.log("商品名は" + fruits [key].name +"です");
    console.log("価格は" + fruits [key].value +"円です");
}

apple
商品名はりんごです
価格は100円です
orange
商品名はオレンジです
価格は80円です
melon
商品名はメロンです
価格は1000円です

連想配列のソート

キーでソートする場合

var fruits = [
    apple : { "name" : "りんご", "value":100 },
    orange : { "name" : "オレンジ", "value":80 },
    melon : { "name" : "メロン", "value":1000 }
];
objectkeys = Object.keys(fruits);
console.log("【ソート前】");
for (key of objectkeys){
    console.log(`key: ${key} ,name: ${fruits[key].name} ,value: ${fruits[key].value}`);
}
objectkeys.sort();
console.log("【ソート後】");
for (key of objectkeys){
    console.log(`key: ${key} ,name: ${fruits[key].name} ,value: ${fruits[key].value}`);
}

【ソート前】
key: apple ,name: りんご ,value: 100
key: orange ,name: オレンジ ,value: 80
key: melon ,name: メロン ,value: 1000
【ソート後】
key: apple ,name: りんご ,value: 100
key: melon ,name: メロン ,value: 1000
key: orange ,name: オレンジ ,value: 80

値でソートする場合

　連想配列は厳密には配列ではなく、オブジェクトなので、そのままではソートはできない。
　一度Object.keys()を使用してキーを抜きとり、mapで新たなキー入りの配列を生成する。
　その生成した配列をソートした後、再度オブジェクトに割り当てる必要がある。

({ key: k, value: fruits[k] }));
console.log("【連想配列を配列に変更】");
console.log(array);
array.sort((a, b) => a.value.price - b.value.price);
console.log("【priceで並び替えした配列】");
console.log(array);
//配列⇒オブジェクト　で元に戻す
obj = Object.assign({}, ...array.map((item) => ({
    [item.key]: item.value,
})));
console.log("【配列を連想配列に戻す】");
console.log(obj);

【元の連想配列】
{
  apple: { name: 'りんご', price: 100 },
  orange: { name: 'オレンジ', price: 80 },
  melon: { name: 'メロン', price: 1000 }
}
【連想配列を配列に変更】
[
  { key: 'apple', value: { name: 'りんご', price: 100 } },
  { key: 'orange', value: { name: 'オレンジ', price: 80 } },
  { key: 'melon', value: { name: 'メロン', price: 1000 } }
]
【priceで並び替えした配列】
[
  { key: 'orange', value: { name: 'オレンジ', price: 80 } },
  { key: 'apple', value: { name: 'りんご', price: 100 } },
  { key: 'melon', value: { name: 'メロン', price: 1000 } }
]
【配列を連想配列に戻す】
{
  orange: { name: 'オレンジ', price: 80 },
  apple: { name: 'りんご', price: 100 },
  melon: { name: 'メロン', price: 1000 }
}