對 JavaScript 的 Set 的觀念修正

前言

  在前一篇 關於 JavaScript 的 Set 有介紹到 Set ，但實際使用發現有些誤解，這次把學習的過程做個紀錄。

內容

  在 關於 JavaScript 的 Set 的範例有加入字串的 key ，但使用 Set.has() 使用數字來尋找，這樣可能會產生誤會，誤會 Set 只能檢查數字的 key ，畢竟 C++ 的 Set 是要區分數字與字串的，但 JavaScript 其實是不用的!因為 Javascript 的容器天生就可以接受異質的元素，所以不會區分字串與數字的容器，接著看範例

let set = new Set( [ 0 , 'abc' , 2 , 1 ] );
//
console.log( set.has( 0 ) );//true
console.log( set.has('abc') );//true
//
const valueList = [ 'aaa', 'afdsf' , 123 , 'aaa' , 'bbb'];
let checkList = new Set( valueList );
console.log( checkList.size );//4

範例開頭確認 Set 是可以使用異質的 key ，接著就透過 valueList 來確認重複，透過確認 Set.size 來確認是否把重複的值給成功過濾，結果是 4 ，表示第 4 個元素被過濾掉了。

參考資料

[ developer.mozilla.org ] Set

相關文章與資料

關於 JavaScript 的 Set

 關於 JavaScript 的 Set

前言

  在之前的 關於 JavaScript 的 Map 提到了 Map ，再查一下就會發現 JavaScript 和 C++ 一樣都有 Set ，抽個空作個學習，在此做個紀錄。

內容

  範例如下

let set = new Set( [ 0 , 1 , 2 , 1 ] );
//check
console.log( set.has( 0 ) );//true
//add
set.add( 2 );
console.log( set.has( 2 ) );//ture
set.add( -3 );
console.log( set.has( -3 ) );//ture
set.add( 3.7 );
console.log( set.has( 3.7 ) );//ture
set.add( "4.7" );
console.log( set.has( 4.7 ) );//false
//delete
set.delete(2);
console.log( set.has( 2 ) );//false

Set 的用法和 C++ 差不多，初始化可以利用陣列來輸入初始值，有重複的沒關係，Set 會自動濾除，接著透過 Set.has() 來確認 Key 是否存在。要增加 Key 時利用 Set.add() ，可以重複增加，也可以增加負數，剩至可以增加有小數的數值，如果企圖透過字串來增加的話，雖然不會加成功，但也不會報錯。刪除透過 Set.delete() 即可，簡單又直覺。

參考資料

[ developer.mozilla.org ] Set

相關文章與資料

關於 JavaScript 的 Map

 關於 JavaScript 的 Map

前言

  最近發現 JavaScript 有 Map 這個類別，抽個空做個學習，在此做個紀錄。

內容

  Map 的功能其實和 Object 很相似，所以範例會拿 Object 來與 Map 對比，範例如下

let obj = {};
let map = new Map();
//
obj.prop = 1234;
map.set( 'prop' , 1234 );
console.log( obj.prop );//1234
console.log( map.get( 'prop' ) );//1234
//Use key by number
map.set( 1 , 'number');
console.log( map.get( 1 ) );//number
//delete key
delete obj.prop;
map.delete( 'prop' );
console.log( obj.prop );//undefined
console.log( map.get( 'prop' ) );//undefiend

新增內容時透過 Map.set() 來新增，如果沒有該 Key 值會新增，如果有效果則是覆蓋，Map 可以使用 Number 當作 Key 值，但 Object 是完全不行，刪除 Key 時，Object 是透過 delete 命令來達成，而 Map 透過 Map.delete() 來達成。

參考資料

[ developer.mozilla.org ] Map

 重新認識 delete 

前言

  最近發現自己對 delete 有很深的誤解，抽空做個學習，在此做個紀錄。

內容

  原本我認為 delete 跟直接給 undefiend 的結果是一樣的!所以在 注意 in 搭配數字時 delete 和直接給 undefiend 的不同 才會說要注意不同，但實驗了一下搭配 Object 與 hasOwn() 後，發現了差異，範例如下

const example = {};

console.log(Object.hasOwn(example, "prop") );//false

example.prop = "exists";
console.log( Object.hasOwn(example, "prop") );//true

example.prop = null;
console.log( Object.hasOwn(example, "prop") );//true

example.prop = undefined;
console.log( Object.hasOwn(example, "prop") );//true

delete example.prop;
console.log( Object.hasOwn(example, "prop") );//false

範例凱使先確認 prop 是否存在，回傳 false ，如預期，接著新增 prop 後，再次確認也如預期得到 true ，接著實驗給予 null ，結果是 true ，再來的 undefiend 也是一樣的結果，只有在執行 delete 後才能確實刪除成員的存在。

參考資料

[ developer.mozilla.org ] delete operator

相關文章與資料

注意 in 搭配數字時 delete 和直接給 undefiend 的不同