J 筆記 - Object to Array

J 筆記 - Object to Array

繼之前的 String to Array 後，我們已經會了許多種將字串轉成陣列的方法。這篇將介紹如何將 Object 轉成 Array …

Ancient

在 ES6 以前，我們想將 Object 變成 Array 常常會這樣來使用，但其實這種方法真的不太好用！而且跟 Ruby 超級不合適的，宣告一個空的陣列，然後塞東西進去，通常都可以有更好的方法可以取代掉這種寫法…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var ancientObjects = {
  obj1: 'ancient1',
  obj2: 'ancient2'
};

var emptyArray = [];

for (var ancientObject in ancientObjects) {
  if (ancientObjects.hasOwnProperty(ancientObject)) {
    emptyArray.push(ancientObjects);
  }
}

emptyArray; 
// [ 'ancient1', 'ancient2' ]

Object.prototype.hasOwnProperty()

ES6 - Object.keys()

ES6後，有了 Object.keys() 這個新方法，不過很奇怪的居然只有提供 key，卻沒有 value，意外覺得特別的詭異…

1
2
3
4
5
6
7
8
let ES6Objects = {
  ES6Obj1: 'ES6-1',
  ES6Obj2: 'ES6-2'
};

Object.keys(ES6Objects);
// [ 'ES6Obj1', 'ES6Obj2' ]

ES7 - Object.values() / Object.entries()

所以 ES7 就生出 Object.values() 了，不只如此，還連 key + value 同時要印的 Object.entries() 都有（這樣才合理阿！！！

1
2
3
4
5
6
7
8
9
  let ES7Objects = {
    ES7Obj1: 'ES7-1',
    ES7Obj2: 'ES7-2'
  };
  
  Object.values(ES6Objects);
  // [ 'ES6-1', 'ES6-2' ]
  Object.entries(ES7Objects);
// [ ['ES7Obj1', 'ES7-1'], ['ES7Obj2', 'ES7-2'] ]

Object.entries + Destructuring

解構開來其實就只是長這樣子而已，應該淺顯易懂吧～

1
2
3
4
5
6
7
8
9
10
11
12
const ES7Objects = {
  ES7Obj1: 'ES7-1',
};

const objectArray = Object.entries(ES7Objects);

objectArray.forEach(([key, value]) => {
  console.log(key); 
  // 'ES7Obj1'
  console.log(value); 
  // 'ES7-1'
});

Object.fromEntries

而本質上與 Object.entries 相反，我們今天想要從 Array 再返回去 Object，就可以使用 Object.fromEntries 這個方法…

1
2
3
4
5
6
7
const ES7Array = [
  ['ES7Obj1', 'ES7-1'],
  ['ES7Obj2', 'ES7-2'],
];

Object.fromEntries(ES7Array);
// { ES7Obj1: 'ES7-1', ES7Obj2: 'ES7-2' }

參考資料