JavaScript 的 Symbol 入門

前言

  最近發現 JavaScript 有 Symbol 這個資料型態，抽空作個學習，在此做個紀錄。

內容

  Symbol 這個資料型態提供一種新的方法提取 Object 的成員，以前成員都是用 String 來提取，現在多一種透過 Symbol 來提取，使用的範例如下

let symbolA = Symbol();
let symbolB = Symbol('member');
let symbolC = Symbol('member');
console.log( symbolA === symbolB );//false
console.log( symbolB === symbolC );//false
console.log( symbolB.description === symbolC.description );//true

//
let obj = {
  num : 1234,
  str : 'abc'
};
//
obj[ symbolA ] = 5678;
console.log( obj[ symbolA ] );//5678

//
for(let key in obj)
  console.log(`${key}:${obj[key]}`);
//
// "num:1234"
// "str:abc"
//
Object.getOwnPropertySymbols( obj ).forEach( sym => 
  console.log( obj[sym] )
);
//5678

Symbol 雖然是資料型態，但沒辦法用 new 來使用，只能用 Symbol() 這個"函式"來產生，產生可以帶有字串參數，這個參數讓它看起來很像是命名，但可以看到 SymbolB 與 SymbolC ，雖然參數一樣但卻不相等，該參數其實是設定 Symbol.description 的內容，每一個透過 Symbol() 產生的 Symbol 其實都是不一樣的!範例接著透過 Symbol 來新增成員與取得成員，用起來跟字串時很像，只是把原本透過字串來存取換成 Symbol ，要注意透過 Symbol 來存取的成員沒辦法透過 . 加名稱來存取。在一般的瀏覽物件可以看到無法取得透過 Symbol 來存取的成員，如果要瀏覽物件裡的 Symbol 成員可以透過 Object.getOwnPropertySymbols() 來瀏覽。

 

參考資料

[ developer.mozilla.org ] Symbol

 使用 Object.assign() 用於複製時要注意的事

前言

  在之前的 在 JavaScript 裡複製物件的新選項 提到 Object.assign() 的使用，但實際使用時發現有淺層與深層複製的問題，在此把學習的過程做個紀錄。

內容

  範例如下

let obj = { 
  a : { 
    b : 4
  },
  c : 1234
}
let dstObj = Object.assign( {} , obj );
let dstObj1 = JSON.parse( JSON.stringify( obj ) );
//
obj.c =5678;
console.log( dstObj.c );//1234
console.log( dstObj1.c );//1234
//
obj.a.b = 5;
console.log( dstObj.a.b );//5
console.log( dstObj1.a.b );//4

透過 Object.assign() 複製物件是一種淺層複製，也就是範例的 dstObj ，要深層複製的話就要透過 JSON 來複製，也就是範例的 dstObj1 ，淺層複製在複製 Number 或 String 時沒什麼問題，無論 obj.c 如何更改，dstObj 與 dstObj1 都不會更改，但如果複製 Object 的話就會有麻煩，淺層複製 Object 時，只會複製它的參照，並不會複製 Object 的內容，所以當 obj.a.b 更改時，dstIbj.a.b 也跟著更改了，因為根本是同一物件，但透過深層複製的 dstObj1 就沒這個問題。

參考資料

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

相關文章與資料

在 JavaScript 裡複製物件的新選項

 關於不可列舉的屬性

前言

  在之前的 在 JavaScript 裡複製物件的新選項 裡初步認識了 Object.assign() ，在學習時發現有所謂的"不可列舉"的屬性，抽個控做個學習，在此做個紀錄。

內容

  不可列舉的屬性的作用是在由於複製物件是透過列舉屬性來個別複製的，如果有屬性不會被列舉，也就代表著複製物件時它不會複製，範例如下

let obj = {
  a : {
    value :　1234
  },
  b : {
    value : 5678,
    enumerable : true
  }
};
//
let copyObj = Object.create( {} , obj );
console.log( Object.assign( {} , obj ) );
//
// [object Object] {
//   a: [object Object] {
//     value: 1234
//   },
//   b: [object Object] {
//     enumerable: true,
//     value: 5678
//   }
// }
console.log( Object.assign( {} , copyObj ) );
//
// [object Object] {
//   b: 5678
// }

要讓物件具有不可列舉的屬性必須要讓物件有 enumerable 這個屬性，如 obj.b ，設定成 true 代表可以被列舉，如果不設視同不可列舉，接著透過 Object.create() 來製造出新的物件，這個新的物件才真正具有該屬性，範例直接透過 Object.assign() 來複製 obj ，結果物件和原本的 obj 一樣，但同樣手法複製 copyObj 會發現結果很不一樣， a 由於不帶有列舉屬性所以不會被複製，b 雖然被複製了，但可以看到並不存在 enumerable 這個屬性，這個屬性比較像是專門給 Object.create() 使用的，要注意的是這個不可列舉的屬性是沒辦法透過列印物件來得知的。

  

參考資料

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

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

相關文章與資料

在 JavaScript 裡複製物件的新選項

 在 JavaScript 裡複製物件的新選項

前言

  在傳統的 JavaScript 裡要複製物件的內容必須自己寫一個列舉每個成員並複製的方法，也是我一直以來用的方式，但最近發現物件本身已有提供複製的方法，在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
  str : "String",
  num : 1234,
};
let obj1 = {
  num : 12345,
};
let dstObj = {
  data : "data"
};
//
Object.assign( dstObj , obj );
console.log( dstObj);
// [object Object] {
//   data: "data",
//   num: 1234,
//   str: "String"
// }
//
console.log( Object.assign( dstObj , obj , obj1 ) );
// [object Object] {
//   data: "data",
//   num: 12345,
//   str: "String"
// }

複製是透過 Object.assign() 來達成，用法很簡單，第一個參數是要複製到的目標物件，第二個參數則是複製的來源物件，範例的第二次使用時示範了複製多個來源物件，來源物件是 "obj" 與 "obj1"，要注意最後的結果 "num"是 12345 ，這代表著它是按照樹入的順序來複製的! Object.assign() 本身會回傳數值，回傳的數值就是輸入的第一個參數，第二次使用就直接用回傳結果作為輸出。

參考資料

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