JS~オブジェクト~

概要

JavaScriptでは、配列とはオブジェクトから派生したデータ構造です。
プログラミングでは、配列の操作だけでなくオブジェクトの操作もあります。
オブジェクトの作成の仕方とアクセス方法、分割代入についての記事です。

今回使用するオブジェクトリテラルはこちらです。

index.js

 menu = {
   name :'パンケーキ',
   price : '580円',
   set : '1000円' 
 };

オブジェクトリテラル

{key名(プロパティ名):'データ'(プロパティ値)} ▶プロパティ

オブジェクトリテラルとはオブジェクトをプログラムに書く方法です。
オブジェクトリテラルは、{ }で囲い、各プロパティはカンマで区切ります。

書き方

オブジェクトは、文字列に指定はありません。また文字列のように「''」「" "」で囲う必要はありません。
ハイフンなどの記号を使うとerrorになるのでその場合は囲う必要があります。

1.複数行

index.js

menu = {
 name :'パンケーキ',
 price : '580円',
 set : '1000円' 
};
//{name: "パンケーキ", price: "580円", set: "1000円"}

このように入れ子にすることができます。

index.js

const menu = {
  cake: {name:'ショートケーキ', price:'500円'},
  coffee: {name:'コーヒー', price:'400円'}
};

２．短く書く

index.js

const name = 'パンケーキ';
const price = '580円';
const set = '1000円';

const menu ={name,price,set};

console.log(menu);

変数名だけをかき、変数名をプロパティ名、変数の値をプロパティ値にすることができます。

オブジェクトへのアクセス

1.オブジェクト.プロパティ名

index.js

 const name = 'パンケーキ';
 const price = '580円';
 const set = '1000円';

 const menu ={name,price,set};


 menu.name = 'ハンバーガー';//書き換え
 menu.price = '900円'; //書き換え

 console.log(menu);

 //{name: "ハンバーガー", price: "900円", set: "1000円"}

index.js

const menu = {
  cake: {name:'ショートケーキ', price:'500円'},
  coffee: {name:'コーヒー', price:'400円'}
};

 console.log(menu.cake.name);
 console.log(menu.coffee.price);

2.オブジェクト['プロパティ名']

index.js

menu['name'] = 'ハンバーガー';
menu['price'] = '900円';

どちらでもアクセスすることができます。

プロパティの追加

index.js

const name = 'パンケーキ';
const price = '580円';
const set = '1000円';
const menu ={name,price,set};

menu.name = 'ハンバーガー';
menu.price = '900円';

menu.drink = 'りんごジュース';
delete menu.set;

console.log(menu);

//{name: "ハンバーガー", price: "900円", drink: "りんごジュース"}

分割代入

1.オブジェクトの分割代入

左辺に{}と変数名を書くことで、右辺のオブジェクトから変数名と同じ名前のプロパティを取り出すことができます。

index.js

const menu = {
  name :'パンケーキ',
  price : '580円',
  set : '1000円' 
};

console.log(menu);
//{name: "パンケーキ", price: "580円", set: "1000円"}

const {name,price,set} = menu;

console.log(name,price,set);

//パンケーキ 580円 1000円

2.変数名を変える分割代入

index.js

const{name:food,price:prices,set: setMenu} = menu;

console.log(food,prices,setMenu);

残りのプロパティを取得

index.js

const menu = {
 name :'パンケーキ',
 price : '580円',
 set : '1000円' 
};

console.log(menu);

const{name,...food} = menu;

//パンケーキ {price: "580円", set: "1000円"}