Javascript初學筆記5 Object相關處理(nested object,object function)

JS中的物件(object)就像是Python中的字典(dictionary)或是Ruby中的雜湊(hash) ，多半你在陣列中能使用的概念，在物件中也同樣通用。以下紀錄兩個較為不一樣的用法

nested object

我們讀取物件中的key/value大致可以分為dot或是bracket兩種notion，單純的使用上差別不算太大，但一旦碰上巢狀結構時就會稍微有些複雜，以下我用codecademy的例子來說明。

let spaceship = {
   passengers: null,
   telescope: {
     yearBuilt: 2018,
     model: "91031-XLT",
     focalLength: 2032 
   },
   crew: {
     captain: { 
       name: 'Sandra', 
       degree: 'Computer Engineering', 
       encourageTeam() { console.log('We got this!') },
      'favorite foods': ['cookies', 'cakes', 'candy', 'spinach'] }
   },
   engine: {
     model: "Nimbus2000"
   },
   nanoelectronics: {
     computer: {
       terabytes: 100,
       monitors: "HD"
     },
     backup: {
       battery: "Lithium",
       terabytes: 50
     }
   }
 }; 

假設我今天打算存取艦長最愛的第一個食物，這時候你要怎麼下存取的語法?

const capFave = spaceship.crew['captain']['favorite foods'][0]
const capFave = spaceship.crew.captain['favorite foods'][0]

以上兩個寫法會有完全一樣的結果，注意到在captain部分的差別就是兩種方法可互換的做法。
接著我們一層層拆解結構
首先spaceship共有passengers ,telescope,crew,engine & nanoelectronics共五層結構
spaceship.crew 帶我們到含有captain的那一層，接著利用bracket notion讀取’favorite foods’中的第一個值就大功告成了，多層的物件在存取上還真的需要稍微注意一點。

object function

object function聽起來也許是個新概念，但其實從一開始學JS就不斷的在使用它
console.log就是個很完美的例子
console是個全域object，log則是它其中一個函數，或是你稱method也可以。
這表示在物件內你不只可以使用key/value pair! 看一下以下的例子應該就可以比較了解如何在物件內建立函數，記得在不同函數間一樣需要照物件的規則利用逗號分開。

let retreatMessage = 'We no longer wish to conquer your planet. It is full of dogs, which we do not care for.';
 // Write your code below
 const alienShip = {
   retreat() {
     console.log(retreatMessage)
   },
   takeOff() {
     console.log('Spim… Borp… Glix… Blastoff!')
   }
 }
 alienShip.retreat()
 alienShip.takeOff()

object VS function

這個概念其實蠻有意思的，標題跟上面的物件函數很類似 但完全沒有關係~!
簡單來說，即便你今天利用const宣告了一個新的物件，你無法重新賦予它不同的值，但仍可以藉由函數去修改內部的值。

const spaceship = {
   'Fuel Type' : 'Turbo Fuel',
   homePlanet : 'Earth'
 };
//建立函數去修改物件內容(下面兩個函數都接收一個物件作為參數)
 const greenEnergy = obj => {
     obj['Fuel Type'] = 'avocado oil';
 }
 const remotelyDisable = obj => {
   obj.disabled = true;
 }
 greenEnergy(spaceship)
 remotelyDisable(spaceship)
 console.log(spaceship)
//最後會輸出以下結果

'Fuel Type' : 'avocado oil ',
 homePlanet : 'Earth'  
 obj.disabled = true 

iterate through object

最後用迭帶來做收尾，先看一下我寫的例子。
const school = {
  student : {
    name : 'Danny',
    weight : '80kg'
  },
  teacher : {
    name : 'John',
    weight :'75kg'
  },
  principle :{
    name : 'Jason',
    weight :'68kg'
  }
}
for (let i in school){
  console.log(`${school[i].name} : ${school[i].weight}`)
} 
//最後會輸出以下結果

Danny : 80kg 
John : 75kg 
Jason : 68kg 

在school物件中有三個key-value pair ，其中各自再包含一層物件
特別需要注意一下利用for in 去跑是跑index，所以你如果你寫出school.i.name的東西自然會出現錯誤。