2023年12月25日 星期一

注意 Object 與 Map 的索引的不同

 注意 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

2023年12月18日 星期一

使用 Symbol.iterator 來瀏覽容器

 使用 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

2023年12月11日 星期一

關於 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]()

2023年12月4日 星期一

關於 Array.length

 關於 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