JavaScriptのオブジェクト(連想配列)のサンプルです。
オブジェクト(連想配列)とは
| 変数 = {キー:値,キー:関数・・・ }; |
- 1つの変数で複数の「キー」と「値」または「関数(メソッド)」を持てます。
- キーは任意の文字列を使えます。
- 構文は、波括弧( { } )でくくります。項目が複数の場合はカンマで区切ります。
- オブジェクトは、連想配列、オブジェクトリテラル、ハッシュとも呼ばれます。
- Object.prototypeを継承します。
- 配列のarrayオブジェクトを継承していないのでarrayオブジェクトのメソッドやプロパティは使えません。
- 以下は、MDNのObject.prototypeのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype
オブジェクトは波括弧で作成
<script>
const obj = {};
console.log(typeof obj); //object
</script>
2行目は、空のオブジェクトです。
初期化して作成
<script>
const a = { c1: "赤", c2: "黄", c3: "青" };
console.log(a["c1"]); // 赤
console.log(a["c2"]); // 黄
console.log(a["c3"]); // 青
</script>
2行目は、初期化時にキーと値をセットしています。
new Objectで作成
<script>
const a = new Object();
a["c1"] = "赤";
a["c2"] = "黄";
console.log(a["c1"]); // 赤
console.log(a["c2"]); // 黄
</script>
2行目は、new演算子でオブジェクトを作成しています。
オブジェクトのプロパティと関数
<script>
const obj = {
color1: "red",
color2: ["yellow", "blue"],
getColor: function () {
return "色:" + this.color1;
},
sales: {
yasai: "daikon",
fruits: "mikan",
},
};
console.log(obj.color1); //red
console.log(obj.color2); //["yellow", "blue"]
console.log(obj.getColor()); //色:red
console.log(obj.sales.yasai); //daikon
</script>2～12行目は、リテラルでオブジェクト作成しています。
3行目はプロパティです。
4行目もプロパティで配列です。
5～7行目は、関数です。6行目のthisは自身のオブジェクトを指します。
8～11行目は、プロパティでオブジェクトです。オブジェクトの中にオブジェクトがあります。
for文で取得(for...in文)
| for (変数 in object) {... } |
<script>
const color1 = { c1: "赤", c2: "黄", c3: "青" };
for (const c1 in color1) {
console.log("キー:" + c1); //c1 c2 c3
console.log("値:" + color1[c1]); //赤 黄 青
}
</script>
5行目はキー、6行目は値を取得しています。
プロパティの値を追加する
<script>
const obj = {
color1: "red",
color2: "yellow",
};
obj.color3 = "green";
obj["color4"] = "black";
console.log(obj.color3); //green
console.log(obj.color4); //black
</script>
追加は、存在しないキーを指定し値を代入します。
キーの指定はブラケットまたはドットを使用します。
プロパティの値を更新する
<script>
const obj = {
color1: "red",
color2: "yellow",
color3: ["yellow", "blue"],
};
obj.color1 = "green";
console.log(obj.color1); //green
obj["color2"] = "black";
console.log(obj.color2); //black
obj.color3[1] = "white";
console.log(obj.color3); //["yellow", "white"]
</script>
更新は、既にあるキーを指定し値を代入します。
プロパティの値を削除する
<script>
const obj = {
color1: "red",
color2: "yellow",
};
delete obj.color2;
console.log(obj); //{color1: "red"}
console.log(obj.color1); //red
console.log(obj.color2); //undefined
</script>
11行目のように存在しない場合はundefinedになります。
キーの昇順にソート(sort)
<script>
const color1 = { c3: "青", c1: "赤", c2: "黄" };
const k1 = Object.keys(color1);
k1.sort();
for (const b of k1) {
console.log("キー:" + b); //c1 c2 c3
console.log("値:" + color1[b]); //赤 黄 青
}
</script>
4行目は、Object.keysで連想配列のキーを取得しています。
5行目は、sortで昇順にソートしています。
項目をコピー(assign)
| Object.assign(コピー先オブジェクト,コピー元オブジェクト) |
Object.assignは、オブジェクトをコピーします。
コピー元とコピー先に同じキーがある場合は、値が上書きされます。
<script>
const a = { c1: "赤", c2: "青" };
const b = { c2: "A", c4: "B" };
const c = Object.assign(a, b);
console.log(c); //{c1: "赤", c2: "A", c4: "B"}
</script>
連想配列bから連想配列aにコピーされます。
キーのc2は連想配列bの値で上書きされます。
オブジェクトの変更を禁止する(Object.freeze)
| Object.freeze(obj) |
Object.freezeは、連想配列の変更を禁止します。
<script>
const a = Object.freeze({ c1: "赤", c2: "黄", c3: "青" });
console.log(a); //{c1: "赤", c2: "黄", c3: "青"}
a.c4 = "オレンジ";
console.log(a["c4"]); // undefined
console.log(a); //{c1: "赤", c2: "黄", c3: "青"}
</script>
2行目は、Object.freezeを使用しています。
6行目は、連想配列に新規のキーと値を追加しようとしています。エラーは発生しません。
8行目は、undefinedになっています。
9行目の内容は、3行目と変わっていません。
キーの数を取得する(Object.keys+length)
Object.keysとlengthでキーの数を取得します。
<script>
const c = { c1: "赤", c2: "黄", c3: "青" };
console.log(Object.keys(c).length); // 3
</script>
4行目は、Object.keysメソッドとlengthプロパティを使用して連想配列の数を取得しています。
キーと値をあわせて1つと数えます。
以下は、MDNのObject.keysメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
新しいオブジェクトを作成(create)
<script>
const obj1 = {
color1: "red",
color2: "blue",
};
const obj2 = Object.create(obj1);
console.log(obj2.color1); //red
console.log(obj2.color2); //blue
</script>
7行目は、2行目のオブジェクトを元にObject.create()で新たなオブジェクトを作成しています。
作成されたオブジェクトのプロパティを更新しても元のプロパティは更新されません。
別のオブジェクトになります。
コンストラクタでオブジェクトを作成
<script>
function obj1() {
this.color1 = "red";
this.color2 = "blue";
}
const obj2 = new obj1();
console.log(obj2.color1); //red
console.log(obj2.color2); //blue
</script>
2-5行目は、コンストラクタを作成しています。
3,4行目のthisは、自身を指します。
6行目のnew演算子に上記で作成したコンストラクタを指定してオブジェクトを作成しています。
関連の記事
JavaScript 配列の仕組みと使い方のサンプル
JavaScript for...in文とfor...of文のサンプル
JavaScript オブジェクトを走査するサンプル
JavaScript prototypeでメソッドを追加するサンプル