JavaScriptの連想配列のサンプルです。
目次
説明 | 連想配列とは |
サンプル | 連想配列に項目を追加する |
連想配列の項目を更新する | |
連想配列の項目を削除する | |
連想配列の変更を禁止する(Object.freeze) | |
連想配列の数を取得する(Object.keys) | |
連想配列をfor文で取得する(for...in文) |
連想配列とは
変数 = {キー:値,キー:値・・・ }; |
- 1つの変数で複数の「キー」と「値」を保持できます。
- キーは任意の文字列を使うことができます。
- 各項目をプロパティと呼びます。(キーのことをプロパティとも呼びます)
- 構文は、キーと値を波括弧( { } )でくくります。項目が複数の場合はカンマで区切ります。
- 連想配列はオブジェクトリテラルまたはハッシュとも呼ばれます。
- Object.prototypeを継承します。
- 配列のarrayオブジェクトを継承していません。
→arrayオブジェクトのメソッドやプロパティは使えません。 - 以下は、MDNのObject.prototypeのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype
連想配列を作成するサンプルです。
<script>
const a = {c1:"赤",c2:"黄",c3:"青"};
console.log(a["c1"]); // 赤
console.log(a["c2"]); // 黄
console.log(a["c3"]); // 青
</script>
3行目は、連想配列を作成しています。
連想配列に項目を追加する
連想配列に項目を追加するサンプルです。
<script>
const a = {c1:"赤",c2:"黄",c3:"青"};
a["c4"] = "白";
console.log(a);//{c1:"赤",c2:"黄",c3:"青",c4:"白"}
</script>
5行目は、連想配列の最後尾に項目を追加しています。
連想配列の項目を更新する
連想配列の項目を更新するサンプルです。
<script>
const a = {c1:"赤",c2:"黄",c3:"青"};
a["c2"] = "オレンジ";
console.log(a);//{c1:"赤",c2:"オレンジ",c3:"青"}
</script>
5行目は、既にあるキーを指定して値を更新しています。
連想配列の項目を削除する
連想配列に項目を削除するサンプルです。
<script>
const a = {c1:"赤",c2:"黄",c3:"青"};
delete a["c2"];
console.log(a);//{c1: "赤", c3: "青"}
</script>
5行目は、deleteで連想配列の項目を削除しています。
連想配列の変更を禁止する(Object.freeze)
Object.freeze(obj) |
Object.freezeを使用すると連想配列の変更を禁止にできます。
<script>
const a = Object.freeze({c1:'赤',c2:'黄',c3:'青'});
console.log(a["c1"]); // 赤
console.log(a["c2"]); // 黄
console.log(a["c3"]); // 青
a.c4 = "オレンジ";
console.log(a["c4"]); // undefined
console.log(a);//{c1: "赤", c2: "黄", c3: "青"}
</script>
3行目は、Object.freezeを使用しています。
9行目は、連想配列に新規のキーと値を追加しようとしています。エラーは発生しません。
11行目は、undefinedになっています。
12行目の内容は、3行目と変わっていません。
連想配列の数を取得する(Object.keys)
Object.keys(obj) |
連想配列の数を取得するサンプルです。
<script>
const c = {c1:'赤',c2:'黄',c3:'青'};
console.log(Object.keys(c).length); // 3
</script>
3行目は、Object.keysメソッドとlengthプロパティを使用して連想配列の数を取得しています。
キーと値あわせて1つと数えます。
以下は、MDNのObject.keysメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
連想配列をfor文で取得する(for...in文)
for (変数 in object) {... } |
連想配列をfor文で取得するサンプルです。
<script>
const color1 = {c1:'赤',c2:'黄',c3:'青'};
for(const c in color1 ){
console.log("キー:"+c); //c1 c2 c3
console.log("値:"+color1[c]); //赤 黄 青
}
</script>
3行目は、連想配列です。
5~8行目は、for...in文でキーと値を取得しています。
以下は、MDNのfor...in文のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in
関連の記事
JavaScript 配列の仕組みと使い方のサンプル
JavaScript for...in文とfor...of文のサンプル
JavaScript オブジェクトを作成するサンプル
JavaScript prototypeでメソッドを追加するサンプル
JavaScript 継承のサンプル(プロトタイプチェーン)