JavaScriptの連想配列

typescript

JavaScriptの配列

まず、普通の配列はキーが数字のものを指し

const array = ['a', 'b', 'c'];

こんな感じで書けますが、実は

console.log(array instanceof Object); //true
console.log(array instanceof Array); //true

普段配列だと思っていたものは、配列かつオブジェクトなんです。
オブジェクトだったらプロパティーでアクセスできると思うのですが…

console.log(array.0): //エラー
console.log(array[0]); //これはOK

できないんですねこれが。
ほかの言語と同じように[]で添え字を指定してアクセスします。

やっと本題の連想配列について

で、本題の連想配列についてですが、まず、大前提として、JavaScriptには連想配列はありません。
ここで、連想配列とは、キー(添え字)が文字列のものを指します。
連想配列ではないですが、連想配列っぽいことはできて、みんなはこれを指して連想配列といいます。書き方としては・・・

const object = { a: 1, b: 2, c: 3 };
console.log(array instanceof Array); //false

こんな感じに書きます。[]じゃなくて{}で囲うのでオブジェクトになります。当然、Arrayではないです。
Arrayではないですがobject[‘a’]でもobject.aでも参照や追加ができちゃいます。

わけがわからん。

連想配列(ぽいもの)制限

まず、連想配列ではmapが使えません。ですが、Object.keys()でオブジェクトのプロパティーの配列を取得できるので、こんな感じにするよ良いです。

Object.keys(object).map((key)=>{
    console.log(object[key]);
});

これ連想配列だか普通の配列だかわからなくなって、バグる原因ですね。だから、JSで連想配列はできるだけ使わないほうがいいと思います。
まぁ、TypeScriptならちゃんと定義すれば問題ないのかなとは思いますが…。

またfor文を使う場合はfor…inを使ってもOK。

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

ちなみに、似たようなやつでfor…ofというやつがありますが、これは配列しか使えません。
for…in はarrayでも使えますので、for…ofは忘れていいと思います。
とはいえ、最近はほぼmap()を使う人が大半だとは思いますが。

タイトルとURLをコピーしました