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

發表於 更新於 分類於 閱讀次數：

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

💎 物件（Object）

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

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

1
const obj = {} // 空物件

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

  • 前方的 key 在 JavaScript 中為物件的屬性（property）。
  • 後方的 value 可以是各種型別的值。
    以下為一個物件範例，接下來的段落都使用這個物件來示範操作。
    1
    2
    3
    4
    5
    6
    7
    8
    const obj = {
      a: function(){return 'a'},
      b: null,
      c: {
        d: [{e: 2}]
      },
      1: 'bad'
    }

    🔸 物件取值

  • 方法１：objectName.propertyName，使用.加上屬性名稱來取值，如果是多層級的物件，就繼續往下使用.加屬性名稱，使用.時需要遵守變數名稱規範，不然會報錯。
    1
    2
    3
    4
    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 變數]
    這種方法不受物件屬性名稱限制，並且可以帶入變數，但使用時須注意[]內若不是帶入變數，需要加上''（引號），否則找不到變數會報錯。
    1
    2
    3
    4
    5
    6
    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'

🔸 物件賦值

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

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

🔸 物件取所有屬性

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

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

🔸 物件取所有屬性的值

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

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

🔸 物件轉陣列

Object.entries() 方法會回傳一個陣列，並以二維陣列的方式列出該物件第一層（直屬於物件）的所有屬性和值。

1
2
Object.entries(obj); 
// [['1', 'bad'],['a', ƒ], ['b', null], ['c', {…}]]

🔸 物件屬性檢查

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

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

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

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

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

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

    1
    2
    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 的格式，但是屬性名稱會用引號包起來，範例如下：

1
2
3
4
5
{
  "name": "John",
  "sex": "male",
  "age": 20
}

🔸 解析 JSON 格式資料

  • JSON 的型別是字串，所以需要轉換成物件才能使用，JavaScript 中提供了JSON.parse()的方法來轉換成可以操作的物件。
    1
    2
    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格式的轉換