js 對象與數組相互轉化的快捷方法 Object.keys()、Object.values()、Object.entries()

Object.keys()

Object.keys 返回一個所有元素為字符串的數組，其元素來自於從給定的object上面可直接枚舉的屬性。這些屬性的順序與手動遍歷該對象屬性時的一致。

例如：

let obj = {
    name: 'haha', 
    age: 20,
    showName:  function () {}
}
Object.keys(obj)   //['name','age','showName']

處理數組時，返回數組各元素的索引值:

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

let brr = [1, 3, 4];
Object.keys(brr); // ['0', '1', '2']

可自動排序：

let arr = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(arr)); // console: ['2', '7', '100']

組合用法：

let obj = {
    name: 'haha', 
    age: 20, 
}

Object.keys(obj).map((val, index)=>{
　　obj[val] // 可以針對obj的不同屬性做不同處理
}) 

Object.values()

Object.values()方法返回一個給定對象自身的所有可枚舉屬性值的數組，值的順序與使用for...in循環的順序相同 ( 區別在於 for-in 循環枚舉原型鏈中的屬性 )。

例如：

let obj = {
    name: 'haha', 
    age: 20,
    showName:  function () {}
}
Object.values(obj)   //['haha','20', f]

let brr = [1, 3, 4];
Object.values(brr); // [1, 3, 4]

排序：

let an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

字符串：

console.log(Object.values('haha')); // ['h', 'a', 'h', 'a']

Object.entries()

Object.entries()方法返回一個給定對象自身可枚舉屬性的鍵值對數組，其排列與使用 for...in 循環遍歷該對象時返回的順序一致（區別在於 for-in 循環也枚舉原型鏈中的屬性）。

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

非對象會被強制轉為對象：

console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

更優雅的遍歷對象鍵值：

const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}


// 或者
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Object.fromEntries()

Object.fromEntries() 把鍵值對列表轉換為一個對象。改方法為ES10方法, Chrome不支持

const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }