bootstrap和application優先級,ES6 的遍歷器接口 Iterator

 2023-10-06 阅读 29 评论 0

摘要:一、概念 遍歷器(Iterator)是一種接口,為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署Iterator接口,就可以完成遍歷操作(即依次處理該數據結構的所有成員)。 bootstrap和application優先級?Iterator的作用有三個

一、概念

遍歷器(Iterator)是一種接口,為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署Iterator接口,就可以完成遍歷操作(即依次處理該數據結構的所有成員)。

bootstrap和application優先級?Iterator的作用有三個:一是為各種數據結構,提供一個統一的、簡便的訪問接口;二是使得數據結構的成員能夠按某種次序排列;三是ES6有一種新的遍歷方式,for...of,而Iterator的主要作用,就是支持此操作。

?

二、是否具備遍歷器(Iterator)接口

在ES6中,有些數據結構原生具備Iterator接口(比如數組),即不用任何處理,就可以被for...of循環遍歷,有些就不行(比如對象)。原因在于,這些數據結構原生部署了Symbol.iterator屬性(詳見下文),另外一些數據結構沒有。

凡是部署了Symbol.iterator屬性的數據結構,就稱為部署了遍歷器接口。調用這個接口,就會返回一個遍歷器對象。

在ES6中,有三類數據結構原生具備Iterator接口:數組、某些類似數組的對象、Set和Map結構。它們三者不需要我們手動部署Symbol.iterator屬性就可以使用for...of遍歷功能。而普通對象使用for...of遍歷就會報錯,因為它沒有部署該接口。

?

三、部署接口

如果你需要使原本不具備for...of遍歷功能的集合具備該功能,就需要手動為它部署。ES6有許多內置的Symbol值,這些就是接口。

下面我們利用迭代器中的原理來給對象生成一個迭代器,實現讓對象可以使用for...of

?

var person={name: 'zz',age: 18}
//給person對象添加一個iterator接口person[Symbol.iterator] = function(){
//使用object.keys()方法把j對象中的k值讀取出來存在數組當中var arr = Object.keys(person);var i = 0;return {//ES6中next()迭代方法,自動迭代 next(){if(i < arr.length){//如果done為false,繼續迭代return {//返回迭代的最后結果,如果是一個對象,那么for of的時候需要用解構 value: {k : arr[i],val: person[arr[i++]]},done: false}}else{//如果done為true,繼續迭代return {value: null,done : true}}}}}
//解構獲取返回得到的對象,輸出k值,val值for(var {key,val} of person){console.log(key,val);}

?

?

我們可以看到:

1、通過為person對象部署Symbol.iterator接口,就使它實現了for...of 功能。

2、Symbol.iterator中返回一個對象,該對象包含一個next() 方法,定義了遍歷功能。

3、next方法中的value和done,value是遍歷過程中返回的鍵值對信息,done是一個表示遍歷是否結束的布爾值。

?

補充:

1、遍歷器對象除了具有next方法,還可以具有return方法和throw方法。如果你自己寫遍歷器對象生成函數,那么next方法是必須部署的,return方法和throw方法是否部署是可選的。

  當一個解構在遍歷的時候異常提前退出(比如break,continue或者出錯)的時候,就會調用return方法,其次,return方法必須返回一個對象。

  至于throw方法,則是用于拋出錯誤,Generator.prototype.throw這里不展開講了,感興趣的可以搜索一下。

?

2、用ES6新功能Generator函數來實現Symbol.iterator接口,事半功倍。

var yieldIterator = {};
yieldIterator[Symbol.iterator] = function* () {yield 1;yield 2;yield 3;
};[...yieldIterator] // [1, 2, 3]

注意,yield* 后面跟的是一個可遍歷的結構,它會調用該結構的遍歷器接口。

對Generator不了解的可以戳 ES6 Generator的語法?,這里不多說。

?

3、至于可以使用Array.from轉換成數組的類數組對象,部署iterator有一種很簡單的方法,即直接使用數組的[Symbol.iterator]接口。

fakeArray.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

?

四、默認調用Iterator接口的場景

1、解構賦值

2、擴展運算符(...)

3、上文提到的 yield*

4、由于數組的遍歷會調用遍歷器接口,所以任何接受數組作為參數的場合,都默認調用,如

  for...of

  Array.from()

  Map(), Set(), WeakMap(), WeakSet()

  Promise.all()

  Promise.race()

5、字符串是一個類似數組的對象,原生也具有Iterator接口

?

轉載于:https://www.cnblogs.com/Double-Zhang/p/8920671.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/4/119200.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息