[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'
    }

    🔸 物件取值

  • 方法1: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
  • 方法2: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 (方式1、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', {…}]]

🔸 物件屬性檢查

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

  • 方法1:檢查該屬性是否為undefined

    1
    console.log(obj.x === undefined); // true
  • 方法2:使用hasOwnProperty()方法檢查有沒有該屬性

    1
    console.log(obj.hasOwnProperty('x')); // false
  • 方法3:推薦使用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 資料都需要經過轉換才能使用,而現在常用的 FetchAxios 已經包裝成物件格式,不需要再轉換
  • JavaScript 也提供了JSON.stringify()的方法,可以將物件轉成 JSON 字串格式。
  • localStorage、sessionStorage 存放資料為字串格式,如果要存放物件時需要先使用JSON.stringify()轉換存入,取出後再使用JSON.parse()轉回物件格式。

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