JavaScriptにおけるオブジェクトの扱い方

2020/11/9 JavaScript


ccc

こんにちわ！東京都内でサラリーマンをしているAI・育児ブロガーのCCCです。 AI(人工知能)と子育てに関する記事を執筆しています。 WebシステムをベースとしたAIを活用することで生活をより便利にする方法を紹介し、育児について衣食住における役立つグッズや情報を配信しています。


JavaScriptにおけるオブジェクトの扱い方を教えてください。


ccc

JavaScriptはクライアント側で実行されるオブジェクト指向型のスクリプト言語です。主にブラウザ上で実行され、ユーザのアクションに応じて動的にWebページの内容を書き換えたり、フォームに入力された内容をチェックしたりといったことがクライアント側で実現できます。また、Ajaxという仕組みを利用することで、Webサーバーとブラウザとの間で非同期通信を行えるので、ページを切り替えることなくページの内容を書き換えることができます。Web系AIとJavaScriptの親和性はピカイチで、AIをWebブラウザから使うためのライブラリが公開されています。


ccc

今回はJavaScriptの使い方として、JavaScriptにおけるオブジェクトの扱い方をサンプルを用いて解説します。

オブジェクトの特徴

オブジェクトは複数のプロパティを持つことができます。プロパティはキー(プロパティ名)と値が対になったものです。キーと値はコロン(;)で区切って記述します。
プロパティに格納されている値を取得するには、オブジェクトのプロパティ名を指定します。指定方法はピリオド形式(temp.name)と角括弧形式(temp[‘name’])があります。

let temp={
 name:"apple",
 color:"red",
 price:100
}

console.log(temp.name);
//apple

console.log(temp["name"]);
//apple

値として関数を記述したプロパティをメソッドといいます。
メソッドを実行するには、オブジェクトのメソッド名を指定します。指定方法はピリオド形式(temp.get_price())で記述します。

let temp={
 name:"apple",
 color:"red",
 price:100,
 get_price:function(){
  return this.price;
 }
}

console.log(temp.get_price());
//100

プロパティ名に変数を指定

角括弧形式を使用した場合はプロパティ名に変数を指定できます。

let temp={
 name:"apple",
 color:"red",
 price:100
}

let a="name";

console.log(temp[a]);
//apple

プロパティの値を変更

プロパティの値を変更するには新しい値を代入します。

let temp={
 name:"apple",
 color:"red",
 price:100
}

temp.name="cherry";

console.log(temp.name);
//cherry

オブジェクトに新しいプロパティを追加

オブジェクトに新しいプロパティを追加するには、新しいプロパティ名に値を代入します。

let temp={
 name:"apple",
 color:"red",
 price:100
}

temp.shape="round"

console.log(temp.shape);
//round

プロパティを削除

プロパティを削除するには、delete文を使用します。

let temp={
 name:"apple",
 color:"red",
 price:100
}

delete temp.color;

console.log(temp);
//{name: "apple", price: 100}

プロパティ名一覧を配列で取得

keys()はオブジェクトのプロパティ名の一覧を配列で取得するメソッドです。

let temp={
 name:"apple",
 color:"red",
 price:100
}

let keys=Object.keys(temp);
console.log(keys);
//["name", "color", "price"]

プロパティの値の一覧を配列で取得

values()はオブジェクトのプロパティの値の一覧を配列で取得するメソッドです。

let temp={
 name:"apple",
 color:"red",
 price:100
}

let values=Object.values(temp);
console.log(values);
//["apple", "red", 100]