在 JavaScript 裡合併 Map

前言

  最近在 [ developer.mozilla.org ] Map 發現 Map 可以用很簡單的方法合併，在此把學習的過程做個紀錄。

內容

  範例如下

let map1 = new Map( [
  [ 1 , '123'] ,
  [ 2 , '456'] ,
  [ 3 , '789'] 
] );
let map2 = new Map( [
  [ 1 , 'I am 1'] ,
  [ 2 , 'I am 2'] ,
  [ 4 , 'I am 4'] 
] );
//
let combinedMap1 = new Map( [ ...map1 , ...map2] );
for( let [ key , value] of combinedMap1.entries() ){
  console.log(`Key:${ key } Value:${ value }`);
}
// "Key:1 Value:I am 1"
// "Key:2 Value:I am 2"
// "Key:3 Value:789"
// "Key:4 Value:I am 4"

//
let combinedMap2 = new Map( [ 
  ...map1 , 
  [ 4 , '1234' ],
  [ 2 , '2887' ]
] );
for( let [ key , value] of combinedMap2.entries() ){
  console.log(`Key:${ key } Value:${ value }`);
}
// "Key:1 Value:123"
// "Key:2 Value:2887"
// "Key:3 Value:789"
// "Key:4 Value:1234"

合併的方法是透過初始哈的參數來達成，合併時可以看到如果碰到同樣的 Key  的話會是後面合併的 Map 的內容，也可以直接想成照陣列的順序來加入內容，範例的第二段示範了直接加入 Key 的方法，就是直接透過陣列來增加，當然如果有重複還是會以後面的為主。

參考資料

[ developer.mozilla.org ] Map

 關於 JavaScript 的 Map 瀏覽

前言

  在先前的 關於 JavaScript 的 Set 瀏覽 介紹了 Set 的瀏覽，這次來介紹 Map 的瀏覽，在此把學習的過程做個紀錄。

內容

  範例如下

let valueMap = new Map( [ 
  ['z','aa'] , 
  [12,'bb'] , 
  ['abc',13] , 
  [1234,5678] 
] );
//use Map.entries()
for( const [ key , value ] of valueMap.entries() )
  console.log( `key:${ key } value:${ value }`);
// "key:z value:aa"
// "key:12 value:bb"
// "key:abc value:13"
// "key:1234 value:5678"

//use Map.keys()
for( const key of valueMap.keys() )
  console.log( `key:${ key }`);
// "key:z"
// "key:12"
// "key:abc"
// "key:1234"

//use Map.values()
for( const value of valueMap.values() )
  console.log( `value:${ value }`);
// "value:aa"
// "value:bb"
// "value:13"
// "value:5678"

瀏覽的方法一樣是透過 entries() 、 keys() 與 values() ，不過這次不會像 Set 一樣發生 key 與 value 是一樣的問題，因為這樣也正好反映了 Map 的特性。

參考資料

[ developer.mozilla.org ] Map

相關文章與資料

關於 JavaScript 的 Set 瀏覽

 關於 JavaScript 的 Set 瀏覽

前言

  在之前的 關於 JavaScript 的 Set 簡單用了 Set ，但只是簡單使用，沒用到瀏覽，最近需要瀏覽 Set ，所以發現 Set 的瀏覽有一些不直覺，在此把學習的過程做個紀錄。

內容

  範例如下

let valueSet = new Set( [ 'z' , 12 , 'abc' , 1234] );
//use Set.entries()
for( const [ key , value ] of valueSet.entries() )
  console.log( `key:${ key } value:${ value }`);
// "key:z value:z"
// "key:12 value:12"
// "key:abc value:abc"
// "key:1234 value:1234"

//use Set.keys()
for( const key of valueSet.keys() )
  console.log( `key:${ key }`);
// "key:z"
// "key:12"
// "key:abc"
// "key:1234"

//use Set.values()
for( const value of valueSet.values() )
  console.log( `value:${ value }`);
// "value:z"
// "value:12"
// "value:abc"
// "value:1234"

Set 同時堤供三個瀏覽的方法，分別是 Set.entries() 、 Set.keys() 與 Set.values()  ，Set.entries()  瀏覽後會發現 iterator 會是 key 與 value !?，而且 key 與 value 的值永遠是一樣的，這個原因可以在 [ developer.mozilla.org ] Set.prototype.entries() 裡找到，是為了與 Map 有一樣概念，但這樣就用起來不太直覺，而透過 Set.keys() 與 Set.values() 瀏覽其實都可以，結果都會是一樣的。

參考資料

[ developer.mozilla.org ] Set

[ developer.mozilla.org ] Set.prototype.entries()

相關文章與資料

關於 JavaScript 的 Set

對 JavaScript 的 Set 的觀念修正

 對 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 的不同