[JS] 物件與JSON格式操作技巧

物件操作和串接 API 是 JavaScript 在現代網頁開發中的精華，這篇就來介紹物件取值的基本方法和小技巧。

💎 物件（Object）

🔸 基本結構，使用{}來存放資料：

(本篇文章不討論使用 create、new 和 prototype 的操作)

const obj = {} // 空物件

🔸 內容結構是 key/value pair 的格式：

• 前方的 key 在 JavaScript 中為物件的屬性（property）。
• 後方的 value 可以是各種型別的值。
  以下為一個物件範例，接下來的段落都使用這個物件來示範操作。

  const obj = {
  a: function(){return 'a'},
  b: null,
  c: {
    d: [{e: 2}]
  },
  1: 'bad'
  }
  

  ### 🔸 物件取值
• 方法１：objectName.propertyName，使用.加上屬性名稱來取值，如果是多層級的物件，就繼續往下使用.加屬性名稱，使用.時需要遵守變數名稱規範，不然會報錯。

  console.log(obj.a); // f (){return 'a'}
  console.log(obj.a()); // 'a'
  console.log(obj.c.d[0].e); // 2
  console.log(obj.1); // Uncaught SyntaxError: Unexpected number
  

• 方法２：objectName[propertyName or 變數]
  這種方法不受物件屬性名稱限制，並且可以帶入變數，但使用時須注意[]內若不是帶入變數，需要加上''（引號），否則找不到變數會報錯。

  console.log(obj['a']]); // f (){return 'a'}
  console.log(obj[a]); // ReferenceError: a is not defined
  console.log(obj['c'].d[0]['e']); // 2  (方式１、2混用)
  console.log(obj['1']); // 'bad'
  let num = 1;
  console.log(obj[num]); // 'bad'
  

🔸 物件賦值

方法同取值，只要加上 = 就能賦值，也可以用新的屬性名稱來新增物件屬性；同樣也能用 . 和 [] 兩種方式操作。

obj.a = 1; // 變更原有屬性 a 的值
obj['a'] = 2; // 變更原有屬性 a 的值
obj.f = 0; // 原本沒有屬性 f ，新增屬性 f 且值為 0

🔸 物件取所有屬性

Object.keys() 方法會回傳一個陣列，並列出該物件第一層（直屬於物件）的所有屬性名稱，且這個陣列會由小至大排序。

Object.keys(obj); // ['1', 'a', 'b', 'c']

🔸 物件取所有屬性的值

Object.values() 方法會回傳一個陣列，並列出該物件第一層（直屬於物件）的所有屬性值，且這個陣列會依照屬性名稱由小至大排序。

Object.keys(obj); // ['bad', ƒ, null, {…}]

🔸 物件屬性檢查

物件陣列的操作很常遇到，當物件資料不完整時，可能會造成執行中斷，這時候就需要先檢查物件的屬性是否存在：

• 方法１：檢查該屬性是否為undefined

  console.log(obj.x === undefined); // true
  

• 方法２：使用hasOwnProperty()方法檢查有沒有該屬性

  console.log(obj.hasOwnProperty('x')); // false
  

• 方法３：推薦使用Optional chaining operator，只要一個?就能判斷，並且繼續往下取值。

  console.log(obj?.x)); // undefined
  console.log(obj?.c?.d[0]?.e); // 2
  

💎 JSON（JavaScript Object Notation）

JSON 是一種通用資料交換格式，許多程式語言都能夠解析並被廣泛使用，通常在串接 api 時都是以 JSON 格式為主，和 JavaScript 的 Object 同樣是 key/value pair 的格式，但是屬性名稱會用引號包起來，範例如下：

{
  "name": "John",
  "sex": "male",
  "age": 20
}

🔸 解析 JSON 格式資料

• JSON 的型別是字串，所以需要轉換成物件才能使用，JavaScript 中提供了JSON.parse()的方法來轉換成可以操作的物件。

  let data = ...json file...
  console.log(JSON.parse(data)); Object{...}
  

• 過去實作 ajax 功能時使用的 XMLHttpRequest 取得的 json 資料都需要經過轉換才能使用，而現在常用的 Fetch、Axios 已經包裝成物件格式，不需要再轉換。
• JavaScript 也提供了JSON.stringify()的方法，可以將物件轉成 JSON 字串格式。
• localStorage、sessionStorage 存放資料為字串格式，如果要存放物件時需要先使用JSON.stringify()轉換存入，取出後再使用JSON.parse()轉回物件格式。

參考資料：
Wiki-JSON
MDN-Object
JavaScript中物件(object)和JSON格式的轉換