客製化 JavaScript 的 Iterator

前言

  上次的 初探 JavaScript 的 Iterator 基本的使用 Iterator ，這次來學習客製化 Iterator ，在此把學習的過程做個紀錄。

內容

  範例如下

let ar = [ 1 , 2 , 3 , 4 , 5];
ar[Symbol.iterator] = function () {
  let nextIndex = 0;
  return {
    next() {
      return nextIndex < ar.length
        ? {
            value: ar[nextIndex++] * 2,
            done: false,
          }
        : {
            value: undefined,
            done: true,
          };
    },
  };
};
//
for( ele of ar) {  
  console.log( ele ); 
}
// 2
// 4
// 6
// 8
// 10
//
let itor2 = ar[ Symbol.iterator ]();
console.log( itor2.next() );//{ done: false , value: 2 }
console.log( itor2.next() );//{ done: false , value: 4 }
console.log( itor2.next() );//{ done: false , value: 6 }
console.log( itor2.next() );//{ done: false , value: 8 }
console.log( itor2.next() );//{ done: false , value: 10 }
console.log( itor2.next() );//{ done: true , value: undefined }
//
for( let i=0;i<ar.length;i++)
  console.log( ar[i] );
//
// 1
// 2
// 3
// 4
// 5

客製化 Iterator 時，要注意 Funciton 要回傳一個"物件"，因為是重定義一個物件，範例重定義了 next() ，在每次回傳結果時都將結果乘 2 ，接著透過 for ... of 來瀏覽 ar ，會發現結果已被改成乘 2 的結果，透過最基本的 Iterator.next() 來瀏覽也會得到一樣的結果，不過，如果使用傳統的 for 來瀏覽還是可以得到原本陣列的內容，不受客製化 Iterator 的引響。

參考資料

[ developer.mozilla.org ] Iterator

[ pjchender.dev ] [JS] JavaScript 疊代器（Iterator）

相關文章與資料

初探 JavaScript 的 Iterator

 初探 JavaScript 的 Iterator

前言

  JavaScript 自 2025 提供 Iterator 的功能，可以在 Array 、 Map  ...  等不同容器用一樣的方式來操作，這樣可以達成操作時不用管容器的型態，不過整體機制比較複雜，這次先入個門，只是用 Iterator 來瀏覽容器，在此把學習的過程做個紀錄。

內容

  範例如下

let ar = [ 1 , 2 , 3 , 4 , 5];
let itor1 = Iterator.from( ar );
console.log( itor1.next() );//{ done: false , value: 1 }
console.log( itor1.next() );//{ done: false , value: 2 }
console.log( itor1.next() );//{ done: false , value: 3 }
console.log( itor1.next() );//{ done: false , value: 4 }
console.log( itor1.next() );//{ done: false , value: 5 }
console.log( itor1.next() );//{ done: true , value: undefined }
//
let itor2 = ar[ Symbol.iterator ]();
console.log( itor2.next() );//{ done: false , value: 1 }
console.log( itor2.next() );//{ done: false , value: 2 }
console.log( itor2.next() );//{ done: false , value: 3 }
console.log( itor2.next() );//{ done: false , value: 4 }
console.log( itor2.next() );//{ done: false , value: 5 }
console.log( itor2.next() );//{ done: true , value: undefined }

要瀏覽容器要先取得 Iterator ，可以透過 Iterator.from() 或是 Symbol.iterator 來取得，透過 Symbol.iterator 取得時要注意它是個 Function ，所以要在最後加個  () 喚起，取得 Iterator  後就可以利用 Iterator.next() 來瀏覽，每次喚起都會推出一個新的內容，注意推出來的物件裡有 value 與 done ，value 就是這次瀏覽到的內容，done 則是記錄是否瀏覽結束，如果瀏覽結束，value 的值應該是 undefined。

參考資料

[ developer.mozilla.org ] Iterator

 重新認識 Array.forEach()

前言

  最近發現 Array.forEach() 跟我之前認知的不太一樣，之前的認知它是簡化的 for 迴圈，但事實不然，在此把學習的過程作的紀錄。

內容

  範例如下

let ar = [ 5 , 6 , 7 , 8 , 9 ];
ar.forEach( (ele) =>{
  console.log( `ele:${ ele }`);
});
//ele:5
//ele:6
//ele:7
//ele:8
//ele:9
//
ar.forEach( (ele , index , array ) =>{
  console.log( `index:${index} ele:${ele}`);
});
//index:0 ele:5
//index:1 ele:6
//index:2 ele:7
//index:3 ele:8
//index:4 ele:9

Array.forEach() 不只是簡化的 for 迴圈，之前的認知如範例開頭用法，可以瀏覽陣列每個元素，但如果要像 for 迴圈一樣知道目前是第幾個元素是要加變數計數的，但事實不然，可以想像之前的這個用法是簡化的用法，查閱 [ developer.mozilla.org ] Array.prototype.forEach() 可以發現 callbackfn 其實有三個引數，第一個就是元素，第二個則是第幾個元素，第三個則是陣列自己，所以範例最後使用三個引數的方式列印出元素與第幾個元素。

參考資料

[ developer.mozilla.org ] Array.prototype.forEach()

 關於 Number.parseInt()

前言

  最近在用 Number.parseInt() 發現他的有些行為跟預期的行為不太一樣，在此把學習的過程做個紀錄。

內容

  範例如下

console.log( Number.parseInt('123.4567') );//123
console.log( Number.parseInt('12',16) );//18
console.log( Number.parseInt('f0',16) );//240
console.log( Number.parseInt('0xf0',16) );//240
console.log( Number.parseInt('100',2) );//4
//
console.log( Number.parseInt('200',2) );//NaN
console.log( Number.parseInt('102',2) );//2
console.log( Number.parseInt('122',2) );//1
console.log( Number.parseInt('0xfg',16) );//15

Number.parseInt() 是可以將字串轉成數值，並且支援進制轉換，輸入第二個引數可以指名要轉換的進制。範例開頭輸入有有小數的字串，可以發現所有的小數都會不見，我之前認為會報錯或回傳 undefined 之類的，接著示範 16 進制的轉換，十六進制的 12 就是十進制的 18， 十六進制的 f0 就是十進制的 240 ，同時也只支援在開頭有 0x 的字串，二進制的 100 就是十進制的 4 。當字串存在不應該出現的位元數值，如二進制不可能有位元數值是 2 ，所以二進制的 200 轉換後是 NaN ，如預期，接著二進制的 200 轉換後是 2 !不是NaN，二進制的 122 轉換後是 1，十六進制的 fg 轉換後是 15 ，有發現規則嗎?當字串存在不應該出現的位元數值時，轉換還是會正常轉換，會從最高位元開始解析，解析到有問題的位元數值時就放棄後方所有的解析，只有當最高位元就是有問題的位元數值才會回傳 NaN。

參考資料

[ developer.mozilla.org ] Number.parseInt()

 還原 Number.toExponential() 的結果

前言

  Number.toExponential() 的輸出結果是個字串，如果要把還原回原本的數值，之前是靠解析該字串的內容套用算式來還原，但其實有更簡便的方法，在此把學習的過程做個紀錄。

內容

  範例如下

let num = 1234567;
console.log( num.toExponential(3) );//1.235e+6
console.log( 1.235 * ( 10 ** 6 ) );//1235000
console.log( Number.parseFloat( num.toExponential(3) ) );//1235000

範例展示要被還原的字串 1.235e+6 ，並附上了之前的還原算式，最後就是這次的簡便方法，就是透過 Number.parseFloat() 就可以還原出跟之前算式一樣的結果。

參考資料

[ developer.mozilla.org ] Number.prototype.toExponential()

相關文章與資料

關於 Number.toExponential()

控制 Number.toExponential() 輸出的精度

控制 Number.toExponential() 輸出的精度 

前言

  在上次的 關於 Number.toExponential() 介紹 Number.toExponential() ， Number.toExponential() 還支援控制輸出精度的用法，在此把學習的過程做個紀錄。

內容

  範例如下

let num = 1234567;
console.log( num.toExponential(1) );//1.2e+6
console.log( num.toExponential(3) );//1.235e+6
//
console.log( 1.2 * ( 10 ** 6 ) );//1200000
console.log( 1.235 * ( 10 ** 6 ) );//1235000

控制精度的方法很簡單，只要輸入引數就可以，該引數正是要控制的位數，範例分別示範 1 與 3 ，在引數是 3 的時候注意到最後一位會被四捨五入。範例最後示範把兩個輸出的字串還原回數值。 

參考資料

[ developer.mozilla.org ] Number.prototype.toExponential()

相關文章與資料 

關於 Number.toExponential()

 關於 Number.toExponential()

前言

  JavaScript 提供一種用指數的表達數值的表示法，也就是透過 Number.toExponential() ，在此把學習的過程做個紀錄。

內容

  範例如下

let num = 1234;
console.log( num.toExponential() );//1.234e+3
console.log( typeof num.toExponential() );//string
console.log(  1.234 * (10 ** 3) );//1234

Number.toExponential() 用法就直接使用取還傳值即可，範例可以得到 1.234e+3 的結果，要注意這個結果並不是用 Number 來儲存，而是 String ，也許看到結果裡有一個"e"馬上就想到自然指數 e ，但其實跟自然指數 e 一點關係都沒有，結果的那個字串代表的意思可以在範例的最後看到，只是前方的數字乘上 10 的幾次方而已。

參考資料

[ developer.mozilla.org ] Number.prototype.toExponential()