摘要:就稱為部署了遍歷器接口。是一個函數(shù),調(diào)用它會生成一個遍歷器對象。它的屬性,也是一個遍歷器對象生成函數(shù),執(zhí)行后返回它自己。返回遍歷器對象。下面是一個無限運(yùn)行的遍歷器對象的例子。
『ES6知識點(diǎn)總結(jié)』遍歷器iterator
本文內(nèi)容如下:
1 具有iterator接口的數(shù)據(jù)結(jié)構(gòu) 2 遍歷器過程 3 遍歷器作用: 4 模擬next()方法 5 使用while循環(huán) 6 TypeScript的寫法 7 Iterator接口與Generator函數(shù) 8 對象的遍歷器接口 8.1 對于類似數(shù)組的對象 9 調(diào)用Iterator接口的場合 9.1 解構(gòu)賦值 9.2 擴(kuò)展運(yùn)算符 9.3 yield* 9.4 其他場合 10 字符串的Iterator接口具有iterator接口的數(shù)據(jù)結(jié)構(gòu)
【01】原生就具有Iterator接口,它們的遍歷器接口部署在Symbol.iterator屬性上:
Array,Object(類數(shù)組對象),Map,WeakMap,Set,WeakSet,字符串。
let arr = new Array();
let iterator =arr[Symbol.iterator]();
【02】其他數(shù)據(jù)結(jié)構(gòu)(主要是對象)的Iterator接口,都需要自己部署在Symbol.iterator屬性上面。(原型鏈上的對象具有該方法也可)。
【03】一個數(shù)據(jù)結(jié)構(gòu)只要具有Symbol.iterator屬性,就可以認(rèn)為是“可遍歷的”(iterable)。
就稱為部署了遍歷器接口。就可以遍歷所有成員??赏ㄟ^for of 遍歷。
【04】遍歷器對象本身也有Symbol.iterator方法,執(zhí)行后返回自身。
gen是一個Generator函數(shù),調(diào)用它會生成一個遍歷器對象g。它的Symbol.iterator屬性,也是一個遍歷器對象生成函數(shù),執(zhí)行后返回它自己。
function* gen(){ // some code } var g = gen(); g[Symbol.iterator]() === g // true遍歷器過程
【01】zyx456:說白了,等于這些數(shù)據(jù)結(jié)構(gòu)有一個方法(PS,這個方法稱為遍歷器函數(shù))。
方法名是[Symbol.iterator],方法中返回一個對象(PS,這個對象稱為遍歷器對象),該對象有一個next()方法。這個next()會遍歷數(shù)據(jù)結(jié)構(gòu)的成員。返回{value:XX||undefined , done:true||false}
let obj = {
? [Symbo.iterator] (){
return {next(){}}
}
}
調(diào)用遍歷器函數(shù),就會返回一個遍歷器對象。
每次調(diào)用iterator.next(),就使用該數(shù)據(jù)結(jié)構(gòu)的一個成員,成員的值就是返回對象中value的值。done為false,最后會返回一個有value和done兩個屬性的對象。
從頭到尾依次使用數(shù)據(jù)結(jié)構(gòu)的成員。直到使用的成員都訪問完了。
當(dāng)數(shù)據(jù)結(jié)構(gòu)的成員已全部訪問了,此時,再調(diào)用iterator.next()。返回的對象中,value的值為undefined,done為true。
done屬性是一個布爾值,表示遍歷是否結(jié)束。
let arr = [1,2,3];
let iterator = arr[Symbol.iterator]();
iterator.next();//{value:"",done:false};
let arr = ["a", "b", "c"]; let iter = arr[Symbol.iterator]();//返回遍歷器對象。 iter.next() // { value: "a", done: false } iter.next() // { value: "b", done: false } iter.next() // { value: "c", done: false } iter.next() // { value: undefined, done: true }
【03】遍歷器與它所遍歷的那個數(shù)據(jù)結(jié)構(gòu)是分開的。
遍歷器作用:一是為各種數(shù)據(jù)結(jié)構(gòu)提供一個統(tǒng)一的訪問接口;
二是讓數(shù)據(jù)結(jié)構(gòu)的成員可以按某種次序排列;
三是供for...of使用。
模擬next()方法使用一個函數(shù),函數(shù)參數(shù)是數(shù)組,返回一個對象,對象具有next()方法。
在next()中,使用一個變量,遍歷數(shù)組的下標(biāo)。通過和數(shù)組的長度對比,來判斷返回不同的對象。
返回對象都有value和done屬性。
function Convert(arr){ let index = 0; return { next (){ if(indexzyx456:next返回的就是指針對象了。此時,it是對象,它的變量index是保存在函數(shù)中的。
對于遍歷器對象來說,done: false和value: undefined屬性都是可以省略的,因此上面的Covert函數(shù)可以簡寫成下面的形式。
function Covert(array) { var nextIndex = 0; return { next: function() { return nextIndex < array.length ? { value: array[nextIndex++] } : { done: true }; } } }【】下面是一個無限運(yùn)行的遍歷器對象的例子。
zyx456:僅了解。實(shí)用性不大。
遍歷器生成函數(shù)idMaker,返回一個遍歷器對象(即指針對象)。但是并沒有對應(yīng)的數(shù)據(jù)結(jié)構(gòu),或者說,遍歷器對象自己描述了一個數(shù)據(jù)結(jié)構(gòu)出來。
function idMaker() { let index = 0; return { next: function() { return { value: index++, done: false }; } } }var it = idMaker(); it.next().value // "0" it.next().value // "1" it.next().value // "2" // ...使用while循環(huán)有了遍歷器接口,數(shù)據(jù)結(jié)構(gòu)就可以用for...of循環(huán)遍歷,也可以使用while循環(huán)遍歷。
var $iterator = ITERABLE[Symbol.iterator](); var $result = $iterator.next(); while (!$result.done) { var x = $result.value; // ... $result = $iterator.next(); }TypeScript的寫法遍歷器接口(Iterable)、指針對象(Iterator)和next方法返回值的規(guī)格可以描述如下。
interface Iterable { [Symbol.iterator](): Iterator, } interface Iterator { next(value ? : any): IterationResult, } interface IterationResult { value: any, done: boolean, }Iterator接口與Generator函數(shù)var myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...myIterable] // [1, 2, 3] // 或者采用下面的簡潔寫法 let obj = { * [Symbol.iterator]() { yield "hello"; yield "world"; } }; for (let x of obj) { console.log(x); } // hello // world對象的遍歷器接口【】對象部署遍歷器接口并不是很必要,可以使用Map。
對于類似數(shù)組的對象(存在數(shù)值鍵名和length屬性),部署Iterator接口,有一個簡便方法,就是Symbol.iterator方法直接引用數(shù)組的Iterator接口。
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; // 或者 NodeList.prototype[Symbol.iterator] = [][Symbol.iterator]; [...document.querySelectorAll("div")] // 可以執(zhí)行了下面是類似數(shù)組的對象調(diào)用數(shù)組的Symbol.iterator方法的例子。
let iterable = { 0: "a", 1: "b", 2: "c", length: 3, [Symbol.iterator]: Array.prototype[Symbol.iterator] }; for (let item of iterable) { console.log(item); // "a", "b", "c" }調(diào)用Iterator接口的場合有一些場合會默認(rèn)調(diào)用Iterator接口(即Symbol.iterator方法)。
解構(gòu)賦值對數(shù)組和Set結(jié)構(gòu)進(jìn)行解構(gòu)賦值時,會默認(rèn)調(diào)用Symbol.iterator方法。
let set = new Set().add("a").add("b").add("c"); let [x, y] = set; // x="a"; y="b" let [first, ...rest] = set; // first="a"; rest=["b","c"];擴(kuò)展運(yùn)算符擴(kuò)展運(yùn)算符(...)會內(nèi)部調(diào)用默認(rèn)的iterator接口。
可以將任何部署了Iterator接口的數(shù)據(jù)結(jié)構(gòu),轉(zhuǎn)為數(shù)組。
// 例一 var str = "hello"; [...str] // ["h","e","l","l","o"] // 例二 let arr = ["b", "c"]; ["a", ...arr, "d"] // ["a", "b", "c", "d"]let arr = [...iterable];yield*yield*后面跟的是一個可遍歷的結(jié)構(gòu),它會調(diào)用該結(jié)構(gòu)的遍歷器接口。
let generator = function* () { yield 1; yield* [2,3,4]; yield 5;};var iterator = generator(); iterator.next() // { value: 1, done: false } iterator.next() // { value: 2, done: false } iterator.next() // { value: 3, done: false } iterator.next() // { value: 4, done: false } iterator.next() // { value: 5, done: false } iterator.next() // { value: undefined, done: true }其他場合由于數(shù)組的遍歷會調(diào)用遍歷器接口,所以任何接受數(shù)組作為參數(shù)的場合,其實(shí)都調(diào)用了遍歷器接口。
下面是一些例子。
for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()(比如new Map([["a",1],["b",2]]))
Promise.all([])
Promise.race([])
字符串的Iterator接口字符串是一個類似數(shù)組的對象,原生具有Iterator接口。
var someString = "hi"; typeof someString[Symbol.iterator] // "function" var iterator = someString[Symbol.iterator](); iterator.toString(); // => "[object String Iterator]" iterator.next() // { value: "h", done: false } iterator.next() // { value: "i", done: false } iterator.next() // { value: undefined, done: true }let some = "book"; for (let i of some){ console.log(i) }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/105557.html
摘要:它是語言的第七種數(shù)據(jù)類型,前六種是布爾值字符串?dāng)?shù)值對象。在中,根據(jù)屬性名來進(jìn)行判斷。,是一個布爾值,表示該對象使用時,是否可以展開。等同于,指向該對象的默認(rèn)遍歷器方法,即該對象進(jìn)行循環(huán)時,會調(diào)用這個方法,返回該對象的默認(rèn)遍歷器。 本文字?jǐn)?shù):3000+,閱讀時間6分鐘。 如果有理解不到位的地方,歡迎大家糾錯。如果覺得還可以,希望大家可以點(diǎn)個贊。 謝謝大家。 目錄 一、Symbol是什么...
摘要:返回一個布爾值,表示該值是否為的成員。清除所有成員,沒有返回值。返回的都是遍歷器對象。結(jié)構(gòu)的實(shí)例的方法,用于對每個成員執(zhí)行某種操作,沒有返回值。這個特點(diǎn)意味著,無法引用的成員,因此是不可遍歷的。數(shù)組成員是一個或多個表示鍵值對的一維數(shù)組。 本文字?jǐn)?shù):4700+,閱讀時間約10分鐘。 如果有理解不到位的地方,歡迎大家糾錯。 一、Set 【01】Set是一種數(shù)據(jù)結(jié)構(gòu)。類似于數(shù)組,但是成員的值...
摘要:箭頭函數(shù)本文字符數(shù),閱讀時間約分鐘左右。箭頭函數(shù)等于說,只保留了函數(shù)的參數(shù)和返回。箭頭函數(shù)體內(nèi)的,繼承的是外層代碼塊的。所以,不用用箭頭函數(shù)聲明對象的方法。不可以使用命令因此箭頭函數(shù)不能用作函數(shù)。 【01】ES6箭頭函數(shù) 本文字符數(shù)4300+,閱讀時間約8分鐘左右。 【01】箭頭函數(shù) 等于說,只保留了函數(shù)的參數(shù)和返回。省略function和return。 寫法: (形參) => {st...
摘要:三種狀態(tài)進(jìn)行中已完成,又稱已失敗。如果的狀態(tài)是,那么的回調(diào)函數(shù)就會等待的狀態(tài)改變,在此之前不會有結(jié)果。等價于例子例子的概念是實(shí)例的別名,用于指定發(fā)生錯誤時的回調(diào)函數(shù)。 『ES6知識點(diǎn)總結(jié)』變量的解構(gòu)賦值 本文主要內(nèi)容如下:1 Promise是什么?1.1 特點(diǎn):1.2 三種狀態(tài):1.3 用處:1.4 Promise缺點(diǎn):1.5 歷史過程2 生成promise實(shí)例3 pr...
摘要:基本介紹提供了新的數(shù)據(jù)結(jié)構(gòu)。初始化本身是一個構(gòu)造函數(shù),用來生成數(shù)據(jù)結(jié)構(gòu)。函數(shù)可以接受一個數(shù)組或者具有接口的其他數(shù)據(jù)結(jié)構(gòu)作為參數(shù),用來初始化。返回一個布爾值,表示該值是否為的成員。清除所有成員,無返回值。 基本介紹 ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。 它類似于數(shù)組,但是成員的值都是唯一的,沒有重復(fù)的值。 初始化 Set 本身是一個構(gòu)造函數(shù),用來生成 Set 數(shù)據(jù)結(jié)構(gòu)。 let set ...
閱讀 3292·2021-11-11 16:55
閱讀 2665·2021-10-13 09:39
閱讀 2506·2021-09-13 10:27
閱讀 2215·2019-08-30 15:55
閱讀 3145·2019-08-30 15:54
閱讀 3185·2019-08-29 16:34
閱讀 1887·2019-08-29 12:41
閱讀 1123·2019-08-29 11:33