把 Object 的 value 抽出來變成 Array

相信將來會需要它。

Object.values

這是最簡單又快速的方法：

const obj = {
  name: 'PeaNu',
  age: 20,
  gender: 'man'
}
const array = Object.values(obj)
console.log(array) // [ 'PeaNu', 20, 'man' ]

Object.keys

原理是先把 key 抽出來，在用 key 把 value 抽出來變成一個 Array：

const obj = {
  name: 'PeaNu',
  age: 20,
  gender: 'man'
}
const keysArray = Object.keys(obj) // [name, age, gender]
const valueArray = keysArray.map((elem) => obj[elem])
console.log(valueArray) // [ 'PeaNu', 20, 'man' ]
console.log(Array.isArray(valueArray)) // true

Object.entries

這個只是順便介紹一下他的用法，通常不會用這招來取 value。

簡單來說這個會把 key 和 value 湊成一組 Array，變成 [key, value]，直接來看範例：

const obj = {
  name: 'PeaNu',
  age: 20,
  gender: 'man'
}
const keyValueArray = Object.entries(obj)
console.log(keyValueArray)
// [
//   ['name', 'PeaNu'],
//   ['age', 20],
//   ['gender', 'man']
// ]

這邊通常會在把它做 flat() 或是用 for...of 來取值：

const obj = {
  name: 'PeaNu',
  age: 20,
  gender: 'man'
}
for (const [key, value] of Object.entries(obj)) {
  // name, age, gender
  console.log('key', key)
  // PeaNu, 20 man
  console.log('value', value)
}
// ['name', 'PeaNu', 'age', 20, 'gender', 'man']
console.log(Object.entries(obj).flat())

for…in

原理是利用 for...in 遍歷物件的 key 再取出 value 來推入新的 Array：

let array = []
const obj = {
  name: 'PeaNu',
  age: 20,
  gender: 'man'
}
for (let key in obj) {
  array.push(obj[key])
}
console.log(array) // [ 'PeaNu', 20, 'man' ]

for…of

原理是用 Object.keys 取出 key 的 Array，再遍歷 Array 取出值（就是物件的 key）來建立 Array：

let array = []
const obj = {
  name: 'PeaNu',
  age: 20,
  gender: 'man'
}
for (let value of Object.keys(obj)) {
  array.push(obj[value])
}
console.log(array) // [ 'PeaNu', 20, 'man' ]