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