JavaScript 小學 — object 物件

object物件是一個複合資料型態 (composite data type)，可以把它想成儲存各種資料的瓶子，瓶子適用一個{} 所包起來，裡面每組資料是由一個屬性名稱與一個或數個值所形成，並且除了最後一組之外，尾巴都要用 , 號隔開(這要記得唷🤩🤩)。

var objectName ={
     prop1:'value',
     prop2:2
}

物件屬性的值，可以是很多種類：數字、字串、函式、陣列、物件…等，我們來用實例看看：

var familyTseng = {
    familyName: 'Tseng',
    familyMoney: [30000, 36000],
		familyMember : ['Jordan', 'Zoe','Yui'],
    MemberNum: 3,
    greet: function() {
        console.log('good morning~')
    },
    house: {
        address: '台北市大安區',
        size: 25
    }
};

上面的一個家庭物件中，有一個字串屬性是家族名稱，也有一個陣列屬性是成員，更有一個物件屬性是房屋，這樣把各種資料組合起來成為一個物件，可以很好的整理資料，不會散亂在一堆👍，也不用因為有不同家庭物件而創造一堆變數名稱😅😅，即便物件內部屬性名稱相同，指向不同物件就可以取得不同資料拉❤️

如何產生一個物件？

物件如何產生的，可以向上面一樣直接宣告完整的物件，一次寫完 ; 也可以先新增一個空物件之後，慢慢新增：

var family={};
family.familyName='Tseng';
family.familyMember ＝ ['Jordan', 'Zoe','Yui'];

屬性的新增刪除修改

新增屬性，很簡單直接寫就好：

family.familyPet='King';

修改屬性，再重寫一次覆蓋掉：

family.familyPet='King';
console.log(family.familyPet);//King
family.familyPet='Peter';
console.log(family.familyPet);//Peter

刪除屬性，用 delete 刪除：

delete family.familyPet;
console.log(family.familyPet);//undefined

如何使用物件中的值呢？

👉用 . 即可呼叫💁

console.log(family.familyName)//Tseng

👉用 [] 也可以呼叫，但是要用 '屬性名稱' 包裹唷💁

console.log(family['familyName'])//Tseng

為啥要那麼麻煩不直接使用 . 就好？因為為了給一些有符號參雜的屬性名稱使用喔～像是下面🤪

var family={};
family['familyName-old']='Chen';
console.log(family['familyName-old'])//Chen

當然其實大部分都是使用 . ，比較好閱讀😇

物件與函式

如同上面所說，函式可以放在物件當作值，就會比較好整理：

var family={
	familyName:'Tseng',
	greet:function(){
      console.log('hi');
	}
}
family.greet();//hi

記得跟取得物件值的差異是後面要加上 () 才能使用函式😏

如果在函式中加入 this，是會指向他的父層物件唷，所以如在物件中的物件中的函式也有用this，是會指向第二層的物件(好饒舌！)，來看看下面範例吧：

var family={
	familyName:'Tseng',
	greet:function(){
      console.log(this.familyName);
	},
    house:{
      address:'台北市大安區永康街',
      show:function(){
      console.log(this.address);
	}
    }
}
family.greet();
family.house.show();

物件與陣列

上面也有看到物件中的陣列，要取得陣列中的值也相當容易，就是總和物件值取得方式和陣列值取得方式：

var family={};
family.familyName='Tseng';
family.familyMember ＝ ['Jordan', 'Zoe','Yui'];
//如果要取得第一為家庭成員
console.log(family.familyName[0])//Jordan

另外物件也能存在陣列中，像如果用上面的案例，一棟大樓可能有好幾個家庭，就要這樣寫：

var bulidingFamilys=[
{familyName:'Tseng'},{familyName:'Chen'},{familyName:'Wang'}
]

這樣要呼叫這棟大樓的第一個家庭時就會輸出：

console.log(bulidingFamilys[0]);

另外我覺得可以用另外一種方式，可能也不錯，就是先宣告好每個物件，再塞到陣列中，這樣這個物件就能有一個名字了！😌

var familyTseng={
	familyName:'Tseng'
};
var familyChen={
	familyName:'Tseng'
};
var familyWang={
	familyName:'Wang'
};
var bulidingFamilys=[familyTseng,familyChen,familyWang];
console.log(bulidingFamilys[0]);