透過 Object.fromEntries() 將 Map 快速複製到 Object

前言

  在之前的 [ developer.mozilla.org ] Map 介紹過 Map ，最近發現 Object.fromEntries() 可以快速複製內容到 Object ，在此把學習的過程做個紀錄。

內容

  Map 的儲存結構很像 Object ，透過瀏覽的方式來複製也不是不可以，只是最近發現可以透過 Object.fromEntries() 來複製，範例如下

let map = new Map([
  ['z','aa'] , 
  [12,'bb'] , 
  ['abc',13] , 
  [1234,5678] 
]);
//
let obj = Object.fromEntries( map );
console.log( obj );
// [object Object] {
//   12: "bb",
//   1234: 5678,
//   abc: 13,
//   z: "aa"
// }
//
let obj1 = Object.assign( { a : 1} , Object.fromEntries( map ) );
console.log( obj1 );
// [object Object] {
//   12: "bb",
//   1234: 5678,
//   a: 1,
//   abc: 13,
//   z: "aa"
// }

Object.fromEntries() 只要把要 Copy 的 Map 當參數就可以得到 Copy 的結果，要複製到 Object ，可以透過 Object.assign() 來複製，如範例的 obj1 。

參考資料

[ developer.mozilla.org ] Map

[ developer.mozilla.org ] Object.fromEntries()

相關文章與資料

關於 JavaScript 的 Map

 注意 Object.assign() 不能複製自定義的 Property

前言

  在之前的 注意 enumerable 的特性會引響 Object.assign() 的行為 有提到 Object.assign() 在特別情形不會完全複製內容，最近又發現自定義的 Property 全部都不會複製!在此把學習的過程做個紀錄。

內容

  範例如下

let obj = {
};
//
Object.defineProperty( obj , 'prop' ,{ value:10 } );
console.log( obj.prop );//10
//
Object.defineProperty( obj , 'prop1' ,{
  value : 20,
  writable: true 
} );
console.log( obj.prop1 );//20
//
let copyObj = Object.assign( {} , obj );
console.log( copyObj.prop );//undefined
console.log( copyObj.prop1 );//undefined

範例在 obj 自定義 prop 與 prop1 ，再透過 Object.assign() 複製到 copyObj ，複製後會發現 prop 與 prop1 並不存在於 copyObj ，看來複製自定義的 function 是需要自己寫的!

參考資料

[ developer.mozilla.org ] Object.defineProperty()

[ developer.mozilla.org ] Object.assign()

相關文章與資料

注意 enumerable 的特性會引響 Object.assign() 的行為

 注意 enumerable 的特性會引響 Object.assign() 的行為

前言

  在之前的 關於自定義 Property 的 enumerable 與 在 JavaScript 裡複製物件的新選項 分別提到了 enumerable 與 Object.assign() ，它們其實會互相引響，在此把學習的過程做個紀錄。

內容

  範例如下

let obj = Object.create(
  {},
  {
    prop1: {
      value: 2, 
      enumerable: false, 
    },
    prop2: {
      value: 3,
      enumerable: true, 
    },
  },
);
//
let copy = Object.assign({}, obj);
console.log(copy); 
// [object Object] {
//   prop2: 3
// }

範例分別自定義 prop1 與 prop2  兩個 Property ，一個允許 enumerable ，另一個則不允許，接著透過 Object.assign() 後會發現 prop1 沒有被成功複製，所以 enumerable 不只引響 Object.getOwnPropertyNames() 的結果，也會引響 Object.assign() 的結果。

參考資料

[ developer.mozilla.org ] Object.defineProperty()

[ developer.mozilla.org ] Object.assign()

相關文章與資料

關於自定義 Property 的 enumerable

在 JavaScript 裡複製物件的新選項

 注意 preventExtensions() 在空物件運行時的特別行為

前言

  在 關於檢查 Object.preventExtensions() 、Object.seal() 與 Object.freeze() 的注意事項 有提到 Object.preventExtensions()  ，但我發現它在空物件時遽然有不一樣的結果 ，在此把學習的過程做個紀錄。

內容

  範例如下

let objPE = {
};
let objPE1 = {
  a : 10
};
let objSeal = {
};
let objFrozen = {
};
//
Object.preventExtensions( objPE );
Object.preventExtensions( objPE1 );
Object.seal( objSeal );
Object.freeze( objFrozen );
//
console.log( Object.isExtensible( objPE ) );//false
console.log( Object.isSealed( objPE ) );//false
console.log( Object.isFrozen( objPE ) );//false
//
console.log( Object.isExtensible( objPE1 ) );//false
console.log( Object.isSealed( objPE1 ) );//true
console.log( Object.isFrozen( objPE1 ) );//true

//
console.log( Object.isExtensible( objSeal ) );//false
console.log( Object.isSealed( objSeal ) );//true
console.log( Object.isFrozen( objSeal ) );//false

//
console.log( Object.isExtensible( objFrozen ) );//false
console.log( Object.isSealed( objFrozen ) );//true
console.log( Object.isFrozen( objFrozen ) );//true

範例的 "objPE" 與 "objPE1" 分別代表要進行 Object.preventExtensions()  的非空物件與空物件，要注意比對在 Object.isSealed() 與 Object.isForzen() 的結果是不一樣的!而 Object.seal() 與 Object.freeze() 在空物件與非空物件的結果是一樣的。

參考資料

[ developer.mozilla.org ] Object.isExtensible()

[ developer.mozilla.org ] Object.isSealed()

[ developer.mozilla.org ] Object.isFrozen()

相關文章與資料

關於檢查 Object.preventExtensions() 、Object.seal() 與 Object.freeze() 的注意事項

 關於檢查 Object.preventExtensions() 、Object.seal() 與 Object.freeze() 的注意事項

前言

  Object.preventExtensions() 、Object.seal() 與 Object.freeze() 這三個相似的功能，看似個別獨立，但實際上有相關聯，在此把學習的過程做個紀錄。

內容

  JavaScript 提供 Object.isExtensible() 、Object.isSealed() 與 Object.isFrozen() 來分別檢查狀態，範例如下

let objPE = {
  a:123
};
let objSeal = {
  b:123
};
let objFrozen = {
  c:123
};
//
Object.preventExtensions( objPE );
Object.seal( objSeal );
Object.freeze( objFrozen );
//
console.log( Object.isExtensible( objPE ) );//false
console.log( Object.isSealed( objPE ) );//false
console.log( Object.isFrozen( objPE ) );//false

//
console.log( Object.isExtensible( objSeal ) );//false
console.log( Object.isSealed( objSeal ) );//true
console.log( Object.isFrozen( objSeal ) );//false

//
console.log( Object.isExtensible( objFrozen ) );//false
console.log( Object.isSealed( objFrozen ) );//true
console.log( Object.isFrozen( objFrozen ) );//true

範例準備三個物件分別做 Object.preventExtensions() 、Object.seal() 與 Object.freeze()  ，接著分別用檢查個別狀態，經過 Object.preventExtensions() 後，不算是 seal 與 freeze ，接著經過 Object.seal() 後 ，算是 preventExtensions 但不算是 freeze ，最後經過 freezec 後，不但是 preventExtensions  也是 seal  ，這三個相似功能看似個別獨立，但事實上是有相關性的!在使用時要注意這個特性。

參考資料

[ developer.mozilla.org ] Object.isExtensible()

[ developer.mozilla.org ] Object.isSealed()

[ developer.mozilla.org ] Object.isFrozen()

相關文章與資料

禁止擴充物件的另一個選擇