[javascript][typescript]連想配列を使う

typescriptで連想配列を使う時にちょっとハマったので、
javascriptとtypescriptで連想配列を使う時についてまとめてみました。

連想配列の宣言

javascriptでの連想配列の宣言

// 宣言して初期化
const object = { apple : "りんご", grape: "ぶどう", orange: "オレンジ", banana: "バナナ" };

typescriptでの連想配列の宣言

• キーがstringで値がstring

// 宣言して初期化
const object: { [key: string]: string } = { apple: 'りんご', grape: 'ぶどう', orange: "オレンジ",  banana: "バナナ" };

• キーがnumberで値がstring

// 宣言のみ
const object: { [key: number]: string } = {};

javascript/typescriptの連想配列をループするとき

for-in を使うとループできます。
forEachいけるのかと思ったけど、使えませんでした😅

(typescriptでもOK)

for(const key in object) {
  const value = object[key];
}

サンプル

let object = { apple : "りんご", 　grape: "ぶどう",  orange: "オレンジ",  banana: "バナナ"};

for(const key in object) {
  const value = object[key];
  console.log("key: [" + key + "] value:[" + value + "]");
}   

結果：
> "key: [apple] value:[りんご]"
> "key: [grape] value:[ぶどう]"
> "key: [orange] value:[オレンジ]"
> "key: [banana] value:[バナナ]"

配列でキーだけ取得・配列で値だけ取得

Object.keys

Object.keys()を使うと、連想配列のキーが配列として取得できます。
(typescriptでもOK)

サンプル

let object = { apple : "りんご", 　grape: "ぶどう",  orange: "オレンジ",  banana: "バナナ"};
console.log(Object.keys(object));

結果：
> Array ["apple", "grape", "orange", "banana"]

Object.values

Object.values()を使うと、連想配列の値が配列として取得できます。
(typescriptでもOK)

サンプル

let object = { apple : "りんご", 　grape: "ぶどう",  orange: "オレンジ",  banana: "バナナ"};
console.log(Object.values(object));

結果：
> Array ["りんご", "ぶどう", "オレンジ", "バナナ"]

おわりに

まとめてみましたが、型宣言以外は同じようにいけそうですね。
javascriptで上記のように書いてデータを使う時は、オブジェクトってイメージで使っていたので、

連想配列・・・？ってちょっとなりました😁
Object.valuesとかkeysとか知らなかったです。便利ですね。