物件(Object)資料處理

用 Object.keys()、Object.values() 兩個方法來處理物件內的資料。

Object.keys()

Object.keys() 取得物件的鍵值(key)，組成陣列後回傳。

例如:

Code

let array = ['a','b','c'];
console.log(Object.keys(array));  //['0','1','2']

let obj = {1:'a',2:'b',3:'c'};
console.log(Object.keys(obj));  //['1','2','3']

而在 ES5 中，如果這個方法的參數不是一個標準物件(例如原始型別)，將會產生 TypeError 錯誤。而在 ES6，非物件的參數會強制轉換成物件。

Object.values()

Object.values() 取得物件的 value，組成陣列。

Code

let obj = {name: "hotdog",num:5};
Object.values(obj);  //['hotdog','5']

如果 Object.values 的參數是字串，將會回傳字串各個字組成的陣列。

Code

Object.values('good');
//['g','o','o','d']

如果參數是布林值或者數字，則會回傳空陣列

Code

Object.values(true) // []
Object.values(5) // []

如果要對物件中有物件和陣列中有物件的情況。做進一步的處理，可以加上 Array.map() 來做。

Array.map(): 迭代陣列，並將 callback 中的執行結果組成新陣列後回傳。

物件中有物件

例如：

Code

const list = {
  "1234567890": {
    id: "1234567890",
    name: "john",
  },
  "2345678901": {
    id: "2345678901",
    name: "kitty",
  },
  "3456789012": {
    id: "3456789012",
    name: "david",
  },
}

取 key 值

Code

Object.keys(list) // ["1234567890", "2345678901", "3456789012"]

取特定 value 值

Code

Object.values(list).map(item => item.name) // ["john", "kitty", "david"]

陣列中有物件

Code

const list = [
  {
    id: "1234567890",
    name: "john",
  },
  {
    id: "2345678901",
    name: "kitty",
  },
  {
    id: "3456789012",
    name: "david",
  },
];

取 id

Code

list.map(item => Object.values(item)[0]); // 0 表示第一個屬性值

// ["1234567890", "2345678901", "3456789012"]

取 name

Code

list.map(item => Object.values(item)[1]); // 1 表示第二個屬性值

// ["john", "kitty", "david"]

另一種陣列中有物件形式

Code

[
  {
    "1234567890": "john",
  },
  {
    "2345678901": "kitty",
  },
  {
    "3456789012": "david",
  },
]

取 key

使用 Object.keys 取得每個物件的鍵值，由於 Object.keys 會幫每個物件在取鍵值時建立一個陣列，因此要用 [0] 再取得內容。

Code

list.map(item => Object.keys(item)[0])

// ["1234567890", "2345678901", "3456789012"]

取 value

使用 Object.values 取得每個物件的 value，再用 [0] 取得內容。

Code

list.map(item => Object.values(item)[0])

// ["john", "kitty", "david"]

參考：
https://cythilya.github.io/2018/06/17/array-and-object-handling/