JavaScript Object 操作方法

ES5 之前 Object 的 key 只能是字串的形式，但到了ES6 之後支援其他的格式，Symbol 定義的這種特殊單一的格式，並且不允許轉型。

迭代物件 Object property 的方法

1. for-in，會遍歷每個 enumerable (可列舉的) property，但不為 Symbol 的 property。

跟 Object.key() 差別在於 for-in 會迭代到繼承的 property。

不可列舉的意思：使用 for-in 或是 Object.keys 會找不到該屬性。

// for in

let rectangle = { width: 20, height: 5 };

let customRectangle = Object.create(rectangle);
customRectangle.color = 'purple';
customRectangle.name = 'myCustom';

for (const key in customRectangle) {
  console.log(key, customRectangle[key]);
}
// color purple
// name myCustom
// width 16
// height 9

怎麼把屬性設定成不可列舉？ 使用 Object.defineProperty。

'use strict'

// enumerable: true
let obj = {}
objec['key'] = 'value'

// enumerable: false
Object.defineProperty(obj, 'key', { enumerable: false })

// enumerable: true
Object.defineProperty(obj, 'key', { enumerable: true })
console.log(obj)

// Output:
//   { key: 'value' }
//   {}
//   { key: 'value' }

Object.hasOwnProperty() 確認 property 是否存在的方法，只會拿到 own property，不會拿到繼承的屬性。

let rectangle = { width: 16, height: 9 };

let customRectangle = Object.create(rectangle);
customRectangle.color = 'blue';
customRectangle.name = 'myCustom';

for (const key in customRectangle) {
  console.log(key, customRectangle[key]);
}
// color blue
// name myCustom
// width 16
// height 9

// Object.prototype.hasOwnProperty()

for (const key in customRectangle) {
  if (customRectangle.hasOwnProperty(key)) {
    console.log(key, customRectangle[key]);
  }
}
// color blue
// name myCustom

1. Object.keys()

可以取得所有的 property name，並且以陣列的方式回傳。

let object = {a: 1, b: 2, c: 3};

console.log(Object.keys(object));  // ["a", "b", "c"]

這個方法會忽略繼承而來的 property，也就是 Object.hasOwnProperty 為 false 的 property。

let rectangle = {width: 16, height: 9};

let customRectangle = Object.create(rectangle);
customRectangle.color = 'blue';
customRectangle.name = 'myCustom';

Object.keys(customRectangle).forEach(key => {
  console.log(key, customRectangle[key]);
});
// color blue
// name myCustom

1. Array.property.forEach() ...竟然也可以，要先拿到 property 組成的陣列

let object = {a: 1, b: 2, c: 3};

Object.keys(object).forEach(key=> {
    console.log(key）})

// a
// b
// c

迭代物件 Object value 的方法

1. Object.values() 取得物件的所有值並且以陣列的方式回傳。

let object = {a: 1, b: 2, c: 3};

console.log(Object.values(object));  // [1, 2, 3]

1. Object.entries() 一起取得 key 和 value，也以陣列的方式回傳。（有點像是 Python 的 tuple? )

let object = {a: 1, b: 2, c: 3};

console.log(Object.entries(object));
// [
//   ["a", 1],
//   ["b", 2],
//   ["c", 3]
// ]

Object.values() 和 Object.entries() 跟 Object.keys() 一樣，都不會迭代到繼承的 property：

轉成陣列之後再使用 Array 的各種 Method 都很方便，sort, reduce, join 等等...，就是很讚！

let fruitBasket = Object.entries(fruits)
  .map(([fruitName, fruitCount]) => {
    return {name: fruitName, count: fruitCount}
  });

console.log(fruitBasket);
// [
//   {name: "apple", count: 2},
//   {name: "banana", count: 3},
//   {name: "orange", count: 1}
// ]

將 Object 轉成 Map 物件的方法

使用 Object.entries() 取得 key 和 value 之後，丟到 new Map 的方法中。

let fruits = {
  apple: 2,
  banana: 3,
  orange: 1
};

let fruitMap = new Map(Object.entries(fruits));

console.log(fruitMap);
// Map(3) {"apple" => 2, "banana" => 3, "orange" => 1}

console.log(fruitMap.get('orange'));  // 1