1. 程式人生 > >es6 語法 (iterator和for...of迴圈)

es6 語法 (iterator和for...of迴圈)

作用:

  • 為各種資料結構,提供一個統一的、簡便的訪問介面
  • 使得資料結構的成員能夠按某種次序排列
  • ES6創造了一種新的遍歷命令for...of迴圈,Iterator介面主要供for...of消費

Iterator的遍歷過程:

(1)建立一個指標物件,指向當前資料結構的起始位置。也就是說,遍歷器物件本質上,就是一個指標物件。

(2)第一次呼叫指標物件的next方法,可以將指標指向資料結構的第一個成員。

(3)第二次呼叫指標物件的next方法,指標就指向資料結構的第二個成員。

(4)不斷呼叫指標物件的next方法,直到它指向資料結構的結束位置。

在ES6中,有三類資料結構原生具備Iterator介面:陣列、某些類似陣列的物件、Set和Map結構。

可以覆蓋原生的Symbol.iterator方法,達到修改遍歷器行為的目的。

for...of

for...of迴圈可以使用的範圍包括陣列、Set和Map結構、某些類似陣列的物件(比如arguments物件、DOM NodeList物件)、後文的Generator物件,以及字串。

 

 
  
  
{
  let arr=['hello','world'];
  let map=arr[Symbol.iterator]();
  //done表示是否還有下一步了,false有 true 沒有
  console.log(map.next()); //{value: "hello", done: false}
console.log(map.next()); //{value: "world", done: false} console.log(map.next()); //{value: undefined, done: true} } { let obj={ start:[1,3,2], end:[7,9,8], //宣告 [Symbol.iterator](){ //函式體 let self=this; let index=0; //當前遍歷索引 let arr=self.start.concat(self.end); //
合併陣列 let len=arr.length;//記住陣列長度 return { //iterator部署的時候一定要有next這個方法 next(){ //遍歷過程 if(index<len){ return { value:arr[index++], done:false } }else{ return { value:arr[index++], done:true //遍歷結束 } } } } } } //驗證介面是否部署成功 for(let key of obj){ console.log('key1',key); //1 3 2 7 9 8 } } { let arr=['hello','world']; for(let value of arr){ console.log('value',value); //hello ,world } }

 

 


更多專業前端知識,請上 【猿204