es6 語法 (iterator和for...of循環)
阿新 • • 發佈:2017-10-24
col length nbsp key true one elf concat 成功
Iterator遍歷器
遍歷器(Iterator)就是這樣一種機制。它是一種接口,為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署Iterator接口,就可以完成遍歷操作(即依次處理該數據結構的所有成員)。
作用:
- 為各種數據結構,提供一個統一的、簡便的訪問接口
- 使得數據結構的成員能夠按某種次序排列
- 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 } }
es6 語法 (iterator和for...of循環)