紀錄常用的 Object 方法,細節可以到MDN看

Object.create

Object.create(proto, [propertiesObject])

以傳入的參數作為prototype建立一個新物件,這個方法只能複製只帶有 primitive type 無法 deep copy,建立的物件所帶的函式、巢狀物件、Array等等…都和 prototype 共用。

以特定Object 作為 Prototype 建立新物件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const objParent = {
  parentFeild: 'parent feild',
  parentFunc: function () {
    console.log('This is parent Func')
  },
  deepObj: {
    a: 1,
    b: 2,
  },
}

// 以 objParent 作為 prototype 建立 obj 物件
const obj = Object.create(objParent)

// objFeild 只存在 obj 上
obj.objFeild = 'obj feild'

// 可從建立的 obj 呼叫 prototype 的屬性, 方法
obj.parentFeild // "parent feild"
obj.parentFunc() // This is parent Func

// 從 prototype 繼承的屬性可覆寫
obj.parentFeild = 'overite str'
obj.parentFeild // "overite str"

// 父子元件的深層物件仍然指向同一個
obj.deepObj.a // 1
objParent.deepObj.a = 9
obj.deepObj.a // 9

Object.fromEntries

從 Array 或 key-value map 產生 Object

Object.fromEntries(iterable);

從 Array 或 Map 產生 Object

1
2
3
4
5
6
7
8
// 從 Map 產生 Object
const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }
// 從 Array 產生 Object
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

搭配 Array.prototype.map 對 Object 元素迭代處理

1
2
3
4
5
6
7
8
const object1 = { a: 1, b: 2, c: 3 };
const object2 = Object.fromEntries(
  Object.entries(object1)
  .map(([ key, val ]) => [ key, val * 2 ])
);

console.log(object2);
// { a: 2, b: 4, c: 6 }

Object.assign

Object.assign(target, …sources)

將(多個)來源物件(…sources)的屬性合併到目標物件(target)上,並回傳合併後的目標物件(target)。如果來源物件或目標物件有相同屬性,位於較後面的參數的物件屬性會覆蓋前面的,非深層複製,對於物件中的陣列、子物件只能複製參照。

複製物件

1
2
3
4
5
6
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
// 原物件改變不會影響到複製的物件
obj.a=2
copy.a // 1

合併物件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
// 由於 o2, o3 合併到 o1,所以 o1 改變
console.log(o1);  // { a: 1, b: 2, c: 3 }
// 回傳的 obj ,被合併的 o1 實際上是同一個物件的參照
o1===obj // true

Object.entries

Object.entries(obj)

取得 [key, value]的 map array進行迭代。

取得物件的 Key-Value Map

1
2
3
const obj = { foo: 'bar', baz: 42 }; 
const map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

配合 Array 的解構賦值迭代物件

取得Map之後就不指向原物件,因此無法用這個方法改變原物件

1
2
3
const obj = { foo: 'bar', baz: 42 };
// [key, value] 運用了 Array Destructuring
Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"

Object.values

Object.values(obj)

Object.keys 取得可列舉屬性的 Array,順序和 for…in 語句一樣,差別在於 for….in 會列舉出原型鏈中的屬性但 Object.keys 不會。

取得物件屬性陣列

1
2
3
4
5
6
7
const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));

Object.keys

Object.keys(obj)

Object.keys 取得可列舉屬性的”名稱”的 Array

取得物件的 Key Array

1
2
3
4
5
6
7
8
const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

Reference