おはよー(U 'ᴗ' U)✧ 我是 SONYKO
今天來講同樣逃避已久的物件 。
這個學成之後就可以玩物件包陣列、陣列包物件的遊戲了 (((

  ☆ *　. 　☆
　 　☆　. ∧＿∧　∩　* ☆
Let's━━━( ・∀・)/ . Object ━━━！！
　　 　. ⊂　　 ノ* ☆
　　☆ * (つ ノ .☆
　　　　 (ノ

୨୧　物件是什麼

　
物件在我們型別介紹的時候有稍微提到，不知道各位還記不記得。
你可能常聽到「基本型別以外的都是物件型別」或「JavaScript 就是一堆物件」。
　
物件是什麼？有辣摸厲害 (U 'ᴗ' U)？
我們就來介紹物件，但不會講到太深。只是先介紹物件。
　

• 說得專業一點：
  物件是一個複合資料型態，可以存不定數量的鍵與値。我們會稱一組鍵與値為物件的一個屬性(Property)。

• 翻成中文的話：
  他是一個大括號，裡面可以裝很多很多屬性（當然也可以只裝一個，或乾脆不裝）。
  　
  屬性長這樣：

  cat : 'miumiu'
  // cat 是 鍵(key)
  // 'miumiu' 是 値(value)
  // cat : 'miumiu' 是 屬性(property)
  

  那個 値 可以是各種型別，你要放函式function 也可以。
  　　

୨୧　物件長怎樣

　
他長這樣：

var myCat = {
	cat : 'miumiu',
	age : 11 , 
	weight : '4kg'
}

上面是我家貓貓的資料，我把它寫成物件。
你可以看到上面範例有 3個屬性, 値有 字串 & 數字。

只要記得 大括號 都是物件 就好哩。
　

୨୧　物件怎麼操作

　
我們一定會遇到 要把物件中 屬性的 値 取出來的時候。
或是你想新增東西到物件裡面 ，所以一定要學會怎麼操做物件。
　

• 首先來介紹怎麼把東西加到物件裡面：

  // 1. 我創一個空的物件。
  var myCat = {} ;
  
  // 2. 我要把貓貓的名字加進去物件。
  myCat.name = 'miumiu' ;
  
  // 3. 看一下物件現在長怎樣：
  console.log(myCat)           /* Object {
  								name: "miumiu"
  							　}　               */
  

  貓貓的名字成功加到物件裡面了 (U 'ᴗ' U)ʚɞ
  你可以以此類推地新增一堆屬性到物件裡面歐。
  　

• 再來介紹怎麼取物件的「値」

  // 1. 我先創一包物件
  var myCat = {
  	name : 'miumiu' ,
  	age : 11 , 
  	weight : '4kg' ,
  	birthday : '08/19'
  }
  
  // 2. 我今天想取出貓貓的 年紀
  console.log ( myCat.age )            // 11
  
  // 3. 再試著取出貓貓的 生日
  console.log ( myCat.birthday )       // " 08/19 "
  

  有沒有很簡單！ 就這樣而已。
  　

• 有新增就有刪除吧？ 要怎麼刪屬性啊？

  /*  要刪屬性？ 交給'delete'！ */
  var myCat = {
  	name : 'miumiu' ,
  	age : 11 , 
  	weight : '4kg' ,
  	birthday : '08/19'
  }
  // 刪除 貓貓的體重
  delete myCat.weight ;
  
  console.log ( myCat ) 
  										/* Object {
  											age: 11,
  											birthday: "08/19",
  											name: "miumiu"
  										}                     */
  

不知道大家有沒有注意到，操作物件時都是用 「物件名 . (key) 」去操作的。
只要記得，操作物件都會用到 " 點 . " 就大丈夫哩。
　

୨୧　物件和陣列會搞混？

　
怎麼會搞混rrrr
來，我們來把他們分清楚一點。
　

• 陣列特徵：

  1. 他是中括號 [ ] 。
  2. 裡面放 有關聯性、相同性質 的東西。
  3. 方便排序、檢索。
  4. 從 0 開始數。
  5. 操作陣列是用中括號 [ ] 。

  // 1. 他是中括號
  			var cat = ['miumiu' , '喵仔' , '阿喵' , '花花']
  
  // 2. 陣列 cat 的關聯性：他們都是貓貓的名字。
  
  // 3. 我今天想檢索 阿喵 
  			console.log (cat[2])             // "阿喵"
  
  // 4. cat[0] 是 'miumiu' , 資料都從 第0筆 開始數。
  
  // 5. 看第3點，我今天要取出阿喵是用 陣列名[筆數] 去搜尋。
  			cat[4] = '喵太' ;
  			cat[5] = '小黑' ;
  			console.log(cat) 
  							// ["miumiu", "喵仔", "阿喵", "花花", "喵太", "小黑"]
  

• 物件特徵：

  1. 他是大括號 { }
  2. 裡面放屬性，可以有好幾筆。
  3. 用來裝無重複性質的、各式各樣的資料。
     例：店舖資料、飯店房型資料、個人資料... etc 。
  4. 操作是用 " . " 去操作 。

  // 1. 他是大括號
  			var myCat = {
  				name : 'miumiu' , 
  				age : 11 ,
  				birthday : '08/19'
  			}
  
  // 2. 可以放多筆屬性（ 看第1點 ）
  
  // 3. 以飯店房型舉例：
  			var singleRoom = {
  				roomName : '精緻豪華時尚高貴尊絕不凡單人房' ,
  				roomNumber : 001 ,
  				roomSize : '7坪' ,
  				bedType : '地鋪' ,
  				isWifi : true ,
  				isFrigge : false 
  			}
  
  // 4. 我想把單人房改成 5坪 
  			singleRoom.roomSize = '5坪' 
  

୨୧　物件包陣列？ 陣列包物件？

　
舉個例子你就會懂了！
　

• 物件包陣列：

  var myCat = {
  	name : 'miumiu' ,
  	age : 11 , 
  	birthday : '08/19' ,
  	favorites : ['貓罐','干貝','SONYKO'],
  	friends : ['花花','喵仔','來福','東東']
  }
  

• 陣列包物件：

  // 拿員工資料舉例：
  
  var staff = [
  	{
  		name : '杉田' ,
  		age : 33 ,
  		height : '180cm'
  	}, {
  		name : '小野' ,
  		age : 23 , 
  		height : '166cm'
  	},{
  		name : '寺島' ,
  		age : 21 ,
  		height : '172cm'
  	}
  ]
  

  應該更了解了吧？ 陣列跟物件的差別。
  　

୨୧　物件 + 陣列 怎麼取値？

　
延續上面範例～♫
我們來練習怎麼取値。
　

• 物件包陣列：

  var myCat = {
  	name : 'miumiu' ,
  	age : 11 , 
  	birthday : '08/19' ,
  	favorites : ['貓罐','干貝','SONYKO'],
  	friends : ['花花','喵仔','來福','東東']
  }
  
  // 1. 我想取貓貓 喜好 陣列中的 貓罐
  			myCat.favorites[0]
  
  // 2. 我想取 貓貓生日
  			myCat.birthday
  
  // 3. 我想取 貓貓朋友 來福
  			myCat.friends[2]
  

• 陣列包物件：

  var staff = [
  	{
  		name : '杉田' ,
  		age : 33 ,
  		height : '180cm'
  	}, {
  		name : '小野' ,
  		age : 23 , 
  		height : '166cm'
  	},{
  		name : '寺島' ,
  		age : 21 ,
  		height : '172cm'
  	}
  ]
  
  // 1. 我想取 小野的資料
  			staff[1]
  
  // 2. 我想取 杉田的身高
  			staff[0].height 
  
  // 3. 我想取 寺島的年紀
  			staff[2].age
  
  // 4. 我想取 寺島的資料
  			staff[2]
  

真的就這樣而已(U 'ᴗ' U)
接下來就是自己實際操做去熟悉它們就ｏk 惹 ♡
　

　
最後分享一下我今天看到的東西，
大家知道 fall guys 身高183cm吧。他裡面長這樣：

　
今天就介紹到這邊～♫
じゃあね。
　

(U 'ᴗ' U) SONYKO的　前端日文小教室 ♡

　
今天介紹的單字比較沒什麼主題ww
純粹分享～♫

音檔