iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
Modern Web

JavaScript初心者ノ研究日記。系列 第 11

十一日目:JavaScript 物件 オブジェクトノ章

おはよー(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)
接下來就是自己實際操做去熟悉它們就ok 惹 ♡
 

 
最後分享一下我今天看到的東西,
大家知道 fall guys 身高183cm吧。他裡面長這樣:
https://ithelp.ithome.com.tw/upload/images/20200924/20129506lqo1J82B1n.jpg
 
今天就介紹到這邊~♫
じゃあね。
 


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

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

音檔

 重複   日本語   仮名   中・英   羅馬拼音 
 ◯      オブジェクト   Object 物件   O Bu Je Ku To
 ◯      プロパティ   Property 屬性   Pu Ro Pa Ti
      キー   Key 鍵   Ki~
       バリュー   Value 値  Ba Ryu 
      ドット   .(符號)   Do tto
      コロン   :(符號)   Ko Ron
      アクセス   連接、接續   A Ku Se Su
      アラート   alert   A Ra~ To
      ラベル   label   Ra Be Ru
      エラー   error   E Ra~
   ウェブ開発   うぇぶかいはつ   網頁開發   We Bu Kai HaTsu

上一篇
十日目:JavaScript 陣列Array 配列ノ章
下一篇
十二日目:JavaScript DOMノ章
系列文
JavaScript初心者ノ研究日記。30

尚未有邦友留言

立即登入留言