怎么在ES6中實(shí)現(xiàn)一個(gè)迭代器與可迭代對(duì)象
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在ES6中實(shí)現(xiàn)一個(gè)迭代器與可迭代對(duì)象，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
10年積累的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有蘇家屯免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
一、迭代器的原理
在編程語言中處理數(shù)組或集合時(shí)，使用循環(huán)語句必須要初始化一個(gè)變量記錄迭代位置，而程序化地使用迭代器可以簡(jiǎn)化這種數(shù)據(jù)操作
如何設(shè)計(jì)一個(gè)迭代器呢？
迭代器的本身是一個(gè)對(duì)象，這個(gè)對(duì)象有 next( ) 方法返回結(jié)果對(duì)象，這個(gè)結(jié)果對(duì)象有下一個(gè)返回值 value、迭代完成布爾值 done，模擬創(chuàng)建一個(gè)簡(jiǎn)單迭代器如下：
function createIterator(iterms) {
let i = 0
return {
next() {
let done = (i >= iterms.length)
let value = !done ? iterms[i++] : undefined
return {
done,
value
}
}
}
}
let arrayIterator = createIterator([1, 2, 3])
console.log(arrayIterator.next()) // { done: false, value: 1 }
console.log(arrayIterator.next()) // { done: false, value: 2 }
console.log(arrayIterator.next()) // { done: false, value: 3 }
console.log(arrayIterator.next()) // { done: true, value: undefined }對(duì)以上語法感到困惑的，可參考： 【ES6】對(duì)象的新功能與解構(gòu)賦值
每次調(diào)用迭代器的 next( ) 都會(huì)返回下一個(gè)對(duì)象，直到數(shù)據(jù)集被用盡。
ES6 中迭代器的編寫規(guī)則類似，但引入了生成器對(duì)象，更簡(jiǎn)單的創(chuàng)建迭代器對(duì)象
二、創(chuàng)建迭代器
ES6 封裝了一個(gè)生成器用來創(chuàng)建迭代器。顯然生成器是返回迭代器的函數(shù)，這個(gè)函數(shù)通過 function 后的星號(hào)（*）表示，并使用新的內(nèi)部專用關(guān)鍵字yield指定迭代器 next( ) 方法的返回值。
如何使用 ES6 生成器創(chuàng)建一個(gè)迭代器呢？一個(gè)簡(jiǎn)單的例子如下：
function *createIterator() {
yield 123;
yield 'someValue'
}
let someIterator = createIterator()
console.log(someIterator.next()) // { value: 123, done: false }
console.log(someIterator.next()) // { value: 'someValue', done: false }
console.log(someIterator.next()) // { value: undefined, done: true }使用yield關(guān)鍵字可以返回任意值或表達(dá)式，可以給迭代器批量添加元素：
// let createIterator = function *(items) { // 生成器函數(shù)表達(dá)式
function *createIterator(items) {
for (let i = 0; i < items.length; i++) {
yield items[i]
}
}
let someIterator = createIterator([123, 'someValue'])
console.log(someIterator.next()) // { value: 123, done: false }
console.log(someIterator.next()) // { value: 'someValue', done: false }
console.log(someIterator.next()) // { value: undefined, done: true }由于生成器本身是函數(shù)，所以可添加到對(duì)象中，使用方式如下：
let obj = {
// createIterator: function *(items) { // ES5
*createIterator(items) { // ES6
for (let i = 0; i < items.length; i++) {
yield items[i]
}
}
}
let someIterator = obj.createIterator([123, 'someValue'])生成器函數(shù)的一個(gè)特點(diǎn)是，當(dāng)執(zhí)行完一句 yield 語句后函數(shù)會(huì)自動(dòng)停止執(zhí)行，再次調(diào)用迭代器的 next( ) 方法才會(huì)繼續(xù)執(zhí)行下一個(gè) yield 語句。
這種自動(dòng)中止函數(shù)執(zhí)行的能力衍生出很多高級(jí)用法。
三、可迭代對(duì)象
在 ES6 中常用的集合對(duì)象（數(shù)組、Set/Map集合）和字符串都是可迭代對(duì)象，這些對(duì)象都有默認(rèn)的迭代器和Symbol.iterator屬性。
通過生成器創(chuàng)建的迭代器也是可迭代對(duì)象，因?yàn)樯善髂J(rèn)會(huì)為Symbol.iterator屬性賦值。
3.1 Symbol.iterator
可迭代對(duì)象具有Symbol.iterator屬性，即具有Symbol.iterator屬性的對(duì)象都有默認(rèn)迭代器。
我們可以用Symbol.iterator來訪問對(duì)象的默認(rèn)迭代器，例如對(duì)于一個(gè)數(shù)組：
let list = [11, 22, 33]
let iterator = list[Symbol.iterator]()
console.log(iterator.next()) // { value: 11, done: false }Symbol.iterator獲得了數(shù)組這個(gè)可迭代對(duì)象的默認(rèn)迭代器，并操作它遍歷了數(shù)組中的元素。
反之，我們可以用Symbol.iterator來檢測(cè)對(duì)象是否為可迭代對(duì)象：
function isIterator(obj) {
return typeof obj[Symbol.iterator] === 'function'
}
console.log(isIterator([11, 22, 33])) // true
console.log(isIterator('sometring')) // true
console.log(isIterator(new Map())) // true
console.log(isIterator(new Set())) // true
console.log(isIterator(new WeakMap())) // false
console.log(isIterator(new WeakSet())) // false顯然數(shù)組、Set/Map 集合、字符串都是可迭代對(duì)象，而 WeakSet/WeakMap 集合（弱引用集合）是不可迭代的。
3.2 創(chuàng)建可迭代對(duì)象
默認(rèn)情況下，自定義的對(duì)象都是不可迭代的。
剛才講過，通過生成器創(chuàng)建的迭代器也是一種可迭代對(duì)象，生成器默認(rèn)會(huì)為Symbol.iterator屬性賦值。
那如何將自定義對(duì)象變?yōu)榭傻鷮?duì)象呢？通過給Symbol.iterator屬性添加一個(gè)生成器：
let collection = {
items: [11,22,33],
*[Symbol.iterator]() {
for (let item of this.items){
yield item
}
}
}
console.log(isIterator(collection)) // true
for (let item of collection){
console.log(item) // 11 22 33
}數(shù)組 items 是可迭代對(duì)象，collection 對(duì)象通過給Symbol.iterator屬性賦值也成為可迭代對(duì)象。
3.3 for-of
注意到上個(gè)栗子使用了for-of代替索引循環(huán)，for-of是 ES6 為可迭代對(duì)象新加入的特性。
思考一下for-of循環(huán)的實(shí)現(xiàn)原理。
對(duì)于使用for-of的可迭代對(duì)象，for-of每執(zhí)行一次就會(huì)調(diào)用這個(gè)可迭代對(duì)象的 next( )，并將返回結(jié)果存儲(chǔ)在一個(gè)變量中，持續(xù)執(zhí)行直到可迭代對(duì)象 done 屬性值為 false。
// 迭代一個(gè)字符串
let str = 'somestring'
for (let item of str){
console.log(item) // s o m e s t r i n g
}本質(zhì)上來說，for-of調(diào)用 str 字符串的Symbol.iterator屬性方法獲取迭代器（這個(gè)過程由 JS 引擎完成），然后多次調(diào)用 next( ) 方法將對(duì)象 value 值存儲(chǔ)在 item 變量。
將for-of用于不可迭代對(duì)象、null 或 undefined 會(huì)報(bào)錯(cuò)！
3.4 展開運(yùn)算符（...）
ES6 語法糖展開運(yùn)算符（...）也是服務(wù)于可迭代對(duì)象，即只可以“展開”數(shù)組、集合、字符串、自定義可迭代對(duì)象。
以下栗子輸出不同可迭代對(duì)象展開運(yùn)算符計(jì)算的結(jié)果：
let str = 'somestring'
console.log(...str) // s o m e s t r i n g
let set = new Set([1, 2, 2, 5, 8, 8, 8, 9])
console.log(set) // Set { 1, 2, 5, 8, 9 }
console.log(...set) // 1 2 5 8 9
let map = new Map([['name', 'jenny'], ['id', 123]])
console.log(map) // Map { 'name' => 'jenny', 'id' => 123 }
console.log(...map) // [ 'name', 'jenny' ] [ 'id', 123 ]
let num1 = [1, 2, 3], num2 = [7, 8, 9]
console.log([...num1, ...num2]) // [ 1, 2, 3, 7, 8, 9 ]
let udf
console.log(...udf) // TypeError: undefined is not iterable由以上代碼可以看出，展開運(yùn)算符（...）可以便捷地將可迭代對(duì)象轉(zhuǎn)換為數(shù)組。同for-of一樣，展開運(yùn)算符（...）用于不可迭代對(duì)象、null 或 undefined 會(huì)報(bào)錯(cuò)！
四. 默認(rèn)迭代器
ES6 為很多內(nèi)置對(duì)象提供了默認(rèn)的迭代器，只有當(dāng)內(nèi)建的迭代器不能滿足需求時(shí)才自己創(chuàng)建迭代器。
ES6 的 三個(gè)集合對(duì)象：Set、Map、Array 都有默認(rèn)的迭代器，常用的如values()方法、entries()方法都返回一個(gè)迭代器，其值區(qū)別如下：
entries()：多個(gè)鍵值對(duì)
values()：集合的值
keys()：集合的鍵
調(diào)用以上方法都可以得到集合的迭代器，并使用for-of循環(huán)，示例如下：
/******** Map ***********/
let map = new Map([['name', 'jenny'], ['id', 123]])
for(let item of map.entries()){
console.log(item) // [ 'name', 'jenny' ] [ 'id', 123 ]
}
for(let item of map.keys()){
console.log(item) // name id
}
for (let item of map.values()) {
console.log(item) // jenny 123
}
/******** Set ***********/
let set = new Set([1, 4, 4, 5, 5, 5, 6, 6,])
for(let item of set.entries()){
console.log(item) // [ 1, 1 ] [ 4, 4 ] [ 5, 5 ] [ 6, 6 ]
}
/********* Array **********/
let array = [11, 22, 33]
for(let item of array.entries()){
console.log(item) // [ 0, 11 ] [ 1, 22 ] [ 2, 33 ]
}上述就是小編為大家分享的怎么在ES6中實(shí)現(xiàn)一個(gè)迭代器與可迭代對(duì)象了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞名稱：怎么在ES6中實(shí)現(xiàn)一個(gè)迭代器與可迭代對(duì)象
文章網(wǎng)址：http://bm7419.com/article20/jccjco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、企業(yè)網(wǎng)站制作、ChatGPT、手機(jī)網(wǎng)站建設(shè)、定制開發(fā)、搜索引擎優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
