初探 WeakSet

前言

  在先前的 初探 WeakMap 學習 WeakMap ，這次學習 WeakSet ，在此把學習的過程做個紀錄。

內容

  範例如下

let set = new WeakSet();
let obj1 = {};
let obj2 = {};
let obj3 = {};
//
set.add( obj1 );
set.add( obj2 );
//
console.log( set.has( obj1 ) );//true
console.log( set.has( obj3 ) );//false
//
set.delete( obj1 );
console.log( set.has( obj1 ) );//false

WeakSet 與 WeakMap 相似，功能是存放 Object 的 Set 。範例透過 WeakSet.add() 來新增，用WeakSet.has() 確認存在，如果要消除可以透過 WeakSet.delete()，用起來其實跟 Set 沒什麼兩樣，不過 WeakSet 不用像 WeakMap 擔心內容從外部移除，因為 WeakSet 只有 key ，而沒有 value。

參考資料

[ developer.mozilla.org ] WeakSet

相關文章與資料

初探 WeakMap

 初探 WeakMap

前言

  最近抽空學習 WeakMap ，在此把學習的過程做個紀錄。

內容

  WeakMap 用起來跟 Map 很像 ，只是 Key 的部分用的是 Object ，範例如下

let wm = new WeakMap();
let obj1 = {};
let obj2 = {};
let obj3 = {};
//
wm.set( obj1 , 1234 );
console.log( wm.get(obj1) );//1234
//
wm.delete( obj1 );//
console.log( wm.get(obj1) );//undefined
console.log( obj1 !== undefined );//true
//
obj1 = undefined;
console.log( obj1 !== undefined );//false
//
wm.set( obj2 , obj3 );
console.log( wm.get(obj2) !== undefined );//true
obj2 = undefined;
console.log( obj3 !== undefined );//true

範例開始用 obj1 示範了 get() 與 set() 的基本用法，接著用 delete() 來刪除 ，要注意刪除後 obj1 不會被刪除，接著就是 WeakMap 與 Map 最大的不同， Map 不需要擔心 Key 會被從外部刪除，但 WeakMap 就要考慮，範例將 obj1 設為 undefiend 後就會發生 Key 消失，也正因為 obj1 消失，所以也就沒辦法用 get() 方式取得資料了!接著範例示範 Key 與 Value 都是 Object ，實驗如果 Key 消失了，Value 也會被刪除嗎?結果 Value 還是存在，只有 Key 會消失。

參考資料

[ developer.mozilla.org ] WeakMap

 變壓器接頭改造

前言

  最近 [ www.octopus.com.tw ] 筆型刻模機 8pc 110v/220v 會發生一下有電一下沒電，只要轉一下變壓器的接頭就可以改善沒電的狀況，所以就研判是變壓器接頭接觸不良，在此把解決的過程做個紀錄。

內容

  變壓器接觸不良的問題，只要重買一個原廠的變壓器即可，但是我一直很介意原廠的變壓器接頭是"L"字的彎頭，彎頭在操作刻模機時會很礙事，所以我想直接買一個同規格的變壓器且是直頭來取代，上網搜索了一下，結果發現 18V 是個不常見的規格，所以選擇很少，找到了電壓符合的，但接頭卻是彎頭。

  在搜尋的過程中也發現有變壓器的接頭是可以換接頭的，所以如果要直頭 18V 的話，只能指望透過可換接頭變壓器加上對應接頭，量了一下原廠接頭，發現規格是 3.5*1.35mm ，所以最後就買了18V/1A 可換接頭變壓器與對應的  3.5*1.35mm 接頭。

  買回來使用後發現刻模機遽然不會動!本以為是接頭規格不正確，結果發現是接頭的長度不一樣，如下圖

接頭的長度差異

圖中的綠色是買來的接頭的原始長度，紅色的部分是多切出來的長度，可以使用刻模機搭配磨頭來削切，切完之後再插入刻模機後就可使用。

  雖然最後我得到了直頭的變壓器，但我還是不禁廠商刻意把接頭做的很長是不是故意的?廠商選用不常見的規格就可以逼消費者買原廠變壓器，作為消費者的我很難認同，不過還好這次我可透過改造接頭來達到目的。

參考資料

[ www.octopus.com.tw ] 筆型刻模機 8pc 110v/220v

 注意 Object 與 Map 的索引的不同

前言

  Map 與 Object 在儲存的形式上非常相像，但不信的就是不一樣，在使用索引時要注意，在此把學習的過程做紀錄。

內容

  範例如下

let map = new Map([
  ['z','aa'] , 
  [12,'bb'] , 
  ['12',13] , 
  [1234,5678] 
]);
console.log(map.get('12') );//bb
console.log(map.get(12) );//13
//
let obj ={}
obj['12'] = 9999;
console.log(obj['12']);//9999
console.log(obj[12]);//9999
obj[12] = 5555;
console.log(obj['12']);//5555
console.log(obj[12]);//5555

Map 與 Object 的索引行為是不同的，Map 的索引會分 Number 與 String ，兩者索引出來的結果不是同一個，但在 Object 的索引就不一樣，不論是 Number 與 String 都會索引到同一個數值，可以想成是 Number 索引會自動準形成 String 。

參考資料

[ developer.mozilla.org ] Map

[ developer.mozilla.org ] Object

 使用 Symbol.iterator 來瀏覽容器

前言

  在先前的 關於 Symbol.iterator 介紹了 iterator 的基本應用，這次來學習瀏覽，在此把學習的過程做個紀錄。

內容

  範例如下

const map1 = new Map();

map1.set('0', 'foo');
map1.set(1, 'bar');

const iterator1 = map1[Symbol.iterator]();

let ele = iterator1.next();

while( !ele.done ){
  console.log(ele.value);
  ele = iterator1.next();
}
// ["0", "foo"]
// [1, "bar"]

//follow will output nothing
for (const item of iterator1) {
  console.log(item);
}

//
for (const item of map1[Symbol.iterator]() ) {
  console.log(item);
}
// ["0", "foo"]
// [1, "bar"]

這次要使用瀏覽， iterator  有個 next() ，利用這個方法來推進 iterator  ，每次被 next() 推出來的物件裡都會包含 done 與 value ，done 是布林值，用來確認是否為最後一個，value 就是容器裡的內容，while 迴圈示範了如何瀏覽，接著範例用 for...of 來瀏覽會發現不會輸出任何東西，原因也很簡單，iterator 已經被瀏覽在最後了，所以 for...of  就不會輸出了，所以要注意 for...of  適從當下的 iterator 瀏覽在結尾，並非從頭!如果要確保從頭，就要透過 Symbol.iterator 重新取得 iterator 。

參考資料

[ developer.mozilla.org ] Symbol.iterator

[ developer.mozilla.org ] Map.prototype[@@iterator]()

相關文章與資料

關於 Symbol.iterator

 關於 Symbol.iterator

前言

  Symbol.iterator 是設計來提取容器的預設變數，容器大部分都有像 keys() 或 entries() 了，已經很好用了，遽然還有另外一種提取法，在此把學習的過程做個紀錄。

內容

  範例如下

const map1 = new Map();

map1.set('0', 'foo');
map1.set(1, 'bar');

const iterator1 = map1[Symbol.iterator]();

for (const item of iterator1) {
  console.log(item);
}

for (const item of map1.entries() ) {
  console.log(item);
}

 Symbol.iterator 的用法是透過 Symbol 的使用方法，也就是 [ symbol ] 的語法來存取，不過要注意這裡提取的後面要加 () ，看起來就像個 function ，提取後的變數可以搭配 for...of 來提取容器內容，這不是和 entries() 的做法一樣了嗎!所以範例最後也示範了  entries() ，結果是一樣的，但 entries() 看起來比較直覺，相較之下， Symbol.iterator 的用法沒有特別的優勢，所以還是用 entries() 比較好。

參考資料

[ developer.mozilla.org ] Symbol.iterator

[ developer.mozilla.org ] Map.prototype[@@iterator]()

 關於 Array.length

前言

  最近發現 Array.lenth 遽然可以"賦值"，以為自己看錯，查了一下才發現真的可以，在此把學習的過程做個紀錄。

 

內容

  範例如下

let ar = [ 0 , 1 , 2 , 3 , 4 , 5 ];
let ar1 = ar.slice( 0 );
//
ar.length = 5;
console.log( ar );//[0, 1, 2, 3, 4]
//
ar1.splice(5, ar1.length - 5);
console.log( ar1 );//[0, 1, 2, 3, 4]

Array.lenth 賦值的功能就是可以拿來裁減 Array 的內容，會從後方先裁，以前要裁減是透過 Array.splice() 來完成，範例透過 ar1 來實例。

參考資料

[ developer.mozilla.org ] Array: length