js迭代器与生成器

最新推荐文章于 2024-08-10 10:45:35 发布
最新推荐文章于 2024-08-10 10:45:35 发布
阅读量673 收藏 3
点赞数 2
分类专栏： 前端 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46244470/article/details/132186949
版权
本文介绍了JavaScript中的迭代器、next方法、可迭代对象，以及如何通过生成器实现控制流程、返回值与参数传递。同时讲解了async和await的使用，展示了它们在异步编程中的应用，包括网络请求的异步处理。
摘要由CSDN通过智能技术生成

目录

迭代器

迭代器（iterator），可以把它当做是一个接口，用户可以使用该接口来遍历数据而不需关心数据内部的实现细节
在JavaScript中，迭代器是一个具体的对象
这个对象必须含有一个next方法
拥有迭代器的数据可以被用于for...of，展开运算符，解构赋值，创建对象，调用特定方法等等地方

next

next方法是一个无参数或者只有一个参数的函数，应当返回一个拥有done和value两个属性的对象
done属性是一个布尔值，它代表了迭代器是否将数据遍历完成，未完成的话值为false，完成或遍历终止的话值为true
value为迭代器每次在对数据遍历时取得的值，done为true时可以省略，值为undefined 我们可以实现一个数组的迭代器，通过这个迭代器来遍历数组

var arr = [1, 2, 3, 4, 5]
var arrIndex = 0
var arrIterator = {
    next: function () {
        if (arrIndex >= arr.length) {
            return { done: true, value: undefined }
        } else {
            return { done: false, value: `arr第${arrIndex}元素是${arr[arrIndex++]}` }
        }
    }
}
console.log(arrIterator.next())
console.log(arrIterator.next())
console.log(arrIterator.next())
console.log(arrIterator.next())
console.log(arrIterator.next())
console.log(arrIterator.next())

控制台结果如下

结果

可迭代对象

我们知道在JavaScript中对象本身是不可迭代的
如果一个对象实现了迭代器时那么这个对象就变成了一个可迭代对象
迭代器的名称必须为@@iterator，在代码中我们可以使用Symbol.iterator访问

var obj = {
    arr: [1, 2, 3, 4, 5],
    [Symbol.iterator]() {
        var index = 0
        return {
            next: () => {
                if (index >= this.arr.length) {
                    return { done: true, value: undefined }
                } else {
                    return { done: false, value: this.arr[index++] }
                }
            }
        }
    }
}
var objIterator = obj[Symbol.iterator]()
console.log(objIterator.next())
console.log(objIterator.next())
console.log(objIterator.next())
console.log(objIterator.next())
console.log(objIterator.next())
console.log(objIterator.next())
for (var item of obj) {
    console.log(item)
}

通过对对象实现迭代器的形式成功让对象可以迭代

自定义类的迭代

我们还可以创建一个类，所有通过这个类new出来的对象都是可迭代对象

class Person {
    constructor() {
        this.name = "张三"
        this.age = "18"
    }
    [Symbol.iterator]() {
        var index = 0;
        var items = Object.entries(this)
        return {
            next: () => {
                if (index >= items.length) {
                    return { done: true, value: undefined }
                } else {
                    return { done: false, value: items[index++] }
                }
            }
        }
    }
}
var p1 = new Person()
for (var item of p1) {
    console.log(item)
}

控制台结果如下

结果

迭代器的中断

在某些情况下遍历可能会中断
如在遍历的过程中使用了break，return，throw等等
我们想要监听中断的话可以添加return方法

class Person {
    constructor() {
        this.name = "张三"
        this.age = "18"
    }
    [Symbol.iterator]() {
        var index = 0;
        var items = Object.entries(this)
        return {
            next: () => {
                if (index >= items.length) {
                    return { done: true, value: undefined }
                } else {
                    return { done: false, value: items[index++] }
                }
            },
            return: () => {
                console.log("监听到了中断操作")
                return { done: true, value: undefined }
            }
        }
    }
}
var p1 = new Person()
for (var item of p1) {
    console.log(item)
    break
}

控制台结果如下
结果

生成器

生成器（Generator）是一种新的函数控制解决方案，它能够更加灵活的控制函数什么时候执行，什么时候暂停
生成器本质上是一个特殊的迭代器

生成器函数

生成器函数是一个特殊的函数，生成器函数需要在Function标识符的后面加一个*
生成器函数能通过yield控制函数执行流程
生成器函数会返回一个生成器对象

function* foo() {
    console.log("aaa")
    yield
    console.log("bbb")
    yield
    console.log("ccc")
    yield
    console.log("ddd")
}
var generator = foo()
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())

控制台结果如下
结果

返回值与传递参数

生成器同样有返回值与传递参数

function* foo(next1) {
    console.log("aaa", next1)
    var next2 = yield "return1"
    console.log("bbb", next2)
    var next3 = yield "return2"
    console.log("ccc", next3)
    var next4 = yield "return3"
    console.log("ddd", next4)
}
var generator = foo("next1")
console.log(generator.next())
console.log(generator.next("next2"))
console.log(generator.next("next3"))
console.log(generator.next("next4"))
console.log(generator.next("next5"))

控制台结果如下

结果
可以看到在next中传入参数时会被放入yield前接收的变量中
值得注意的是第一次调用next时是不用传递参数的，因为没有yield前面的变量接收参数
如果想要在第一次调用next就传递参数的话需要再foo中传递
每个yield后面都是返回值，这些返回值被存放在value中
当生成器函数执行完毕后默认的返回值是undefined

生成器的提前结束

如果希望生成器提前结束的话可以调用return方法和throw方法

function* foo(next1) {
    console.log("aaa", next1)
    var next2 = yield "return1"
    console.log("bbb", next2)
    var next3 = yield "return2"
    console.log("ccc", next3)
    var next4 = yield "return3"
    console.log("ddd", next4)
}
var generator = foo("next1")
console.log(generator.next())
console.log(generator.next("next2"))
console.log(generator.return("next3"))
console.log("-------------------------------")
var generator2 = foo("next1")
console.log(generator2.next())
console.log(generator2.next("next2"))
console.log(generator2.throw(new Error("生成器抛出异常")))

控制台结果如下
结果

return方法调用后这个生成器函数就不会再执行了
而throw方法则会向生成器函数内部抛出一个异常
生成器函数内部可以使用try catch捕获异常
如果不捕获异常的话生成器函数会停止运行
使用try catch捕获的话在catch内部无法继续yield，在catch外部可以继续函数的执行

生成器的语法糖

如果我们想用生成器来遍历数组的话可以这么写

var arr = [1, 2, 3, 4, 5]
function* foo(arr) {
    yield* arr
}
var generator = foo(arr)
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())

控制台结果如下
结果
上面这种代码本质上是下面这种代码的语法糖写法

var arr = [1, 2, 3, 4, 5]
function* foo(arr) {
    for (var i = 0; i < arr.length; i++) {
        yield arr[i]
    }
}
var generator = foo(arr)
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())

使用生成器实现自定义类迭代

class Person {
    constructor() {
        this.name = "张三"
        this.age = "18"
    }
    *[Symbol.iterator]() {
        yield* Object.entries(this)
    }
}
var p1 = new Person()
for (var item of p1) {
    console.log(item)
}

控制台结果如下
结果
值得注意的是，如果想在类中实现生成器函数，可以在[Symbol.iterator]前加上一个*

async和await

async用于声明一个异步函数
当一个函数前面添加了async关键字时，这个函数就变成了异步函数
异步函数中的代码默认同步执行
异步函数同样有返回值

  1. 返回一个普通值
    这个值会被包裹到Promise.resolve()中
  2. 返回一个Promise
    返回一个Promise则状态由Promise决定
  3. 返回一个thenable
    返回一个thenable则状态由then方法决定
    如果在异步函数中抛出异常，会作为reject来处理
    在异步函数中最大的特点就是可以使用await关键字

await

await关键字通常会跟一个表达式，表达式返回一个Promise
await会等待Promise状态变为fulfilled之后再继续执行代码
await返回的值跟表达式有关

  1. 如果await后面是一个普通的值，那么会直接返回这个值
  2. 如果await后面是一个thenable的对象，那么会根据then方法调用来决定后续的值
  3. 如果await后面的表达式返回的Promise的状态是reject，那么会将这个reject结果直接作为异步函数的Promise的reject值

回到我们最开始的一个问题，我们想要发送一个网络请求并用一个变量接收网络请求的结果
在Promise中是这种写法
具体关于Promise可以看我这篇文章
Promise

function request(url) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve("success:" + url)
        }, 1000)
    })
}
function getRequests() {
    var datas = []
    request("http://yes.com").then((res) => {
        datas.push(res)
        return request("http://no.com")
    }).then((res) => {
        datas.push(res)
        return request("http://null.com")
    }).then((res) => {
        datas.push(res)
        return request("http://foo.com")
    }).then((res) => {
        datas.push(res)
    })
    console.log(datas)
}
getRequests()

使用生成器和迭代器的写法

function request(url) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve("success:" + url)
        }, 1000)
    })
}
function* getRequests() {
    var datas = []
    var temp
    temp = yield request("http://yes.com")
    datas.push(temp)
    temp = yield request("http://no.com")
    datas.push(temp)
    temp = yield request("http://null.com")
    datas.push(temp)
    temp = yield request("http://foo.com")
    datas.push(temp)
    console.log(datas)
}
var generator = getRequests()
generator.next().value.then((res) => {
    generator.next(res).value.then((res) => {
        generator.next(res).value.then((res) => {
            generator.next(res).value.then((res => {
                generator.next(res)
            }))
        })
    })
})

而如果使用async和await的话这么写

function request(url) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve("success:" + url)
        }, 1000)
    })
}
async function getRequests() {
    var datas = []
    var temp
    temp = await request("http://yes.com")
    datas.push(temp)
    temp = await request("http://no.com")
    datas.push(temp)
    temp = await request("http://null.com")
    datas.push(temp)
    temp = await request("http://foo.com")
    datas.push(temp)
    console.log(datas)
}
getRequests()

这就是异步的最终解决方案

法玛梅林
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS迭代器与生成器
tifa_tifa的博客
01-08 383
一、迭代器 在 JavaScript 中，迭代器是一个对象，它定义一个序列，并在终止时可能返回一个返回值。 更具体地说，迭代器是通过使用next()方法实现Iterator protocol的任何一个对象，该方法返回具有两个属性的对象：value，这是序列中的 next 值；和done，如果已经迭代到序列中的最后一个值，则它为true。如果value和done一起存在，则它是迭代器的返回值。 一旦创建，迭代器对象可以通过重复调用next（）显式地迭代。 迭代一个迭代器被称为消耗...
js中的迭代器与生成器(详解)
m0_63831957的博客
07-17 1912
自定义遍历数据，要想起迭代器name'yiban',friend['duan','zhou','zhang','wei'],//索引变量//创建一个指针对象return{//创建next方法(必须)next()=>{//这里箭头函数解决this指向问题valuedonefalse};index++;}else{return{valuedonetrue}}}}}}}...
2024-07-21 深入JavaScript高级语法九——迭代器和生成器
qq_41068717的博客
08-01 962
迭代器（ iterator )，是确使用户可在容器对象（ container ，例如链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节。其行为像数据库中的光标，迭代器最早出现在1974年设计的 CLU 编程语言中；在各种编程语言的实现中，迭代器的实现方式各不相同，但是基本都有迭代器，比如 Java 、 Python 等；从迭代器的定义我们可以看出来，迭代器是帮助我们对某个数据结构进行遍历的对象。
js红宝书-第七章-迭代器与生成器
weixin_44069607的博客
11-28 481
红宝书-第七章-迭代器与生成器 迭代器 在软件开发领域，“迭代”的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件。 Array.prototype.forEach() 方法对数组的每个元素执行一次给定的函数，但没有办法标识迭代何时终止，且只适用于数组。 迭代器模式描述了一个方案，即可以把有些结构称为“可迭代对象”（iterable），因为它们实现了正式的Iterable 接口，而且可以通过迭代器Iterator 消费。 任何实现Iterable 接口的数据结构都可以被实现Iter
JavaScript的迭代器与生成器
小罗的博客
07-05 978
迭代器（iterator），是确使用户可在容器对象(container，例如链表或数组)上遍访的对象，使用该接口无需关系对象的内部实现细节。其行为像数据库中的光标，迭代器最早出现在1974年设计的CLU编程语言中；在各种编程语言的实现中，迭代器的实现方式各不相同，但是基本都有迭代器，比如Java，Python等； 在迭代器......
JavaScript中的迭代器和生成器详解
10-25
在JavaScript中，迭代器（Iterator）和生成器（Generator）是一种处理集合中每个元素的机制。迭代器允许开发者按顺序访问集合的元素，并在达到集合末尾时停止。而生成器则是一种特殊类型的迭代器，它提供了一种更...
迭代器与生成器
qq_53841687的博客
07-19 1588
迭代器(lterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口，就可以完成遍历操作，ES6新增遍历方式for...of。原生具备lterator接口的数据有Array，Arguments，Set，Map，String，NodeList。...
JS中的迭代器和生成器 （生成器）
恋上苦咖啡
04-28 1139
JS中的迭代器和生成器 （生成器） one. 生成器 one. 什么是生成器？ 生成器是通过构造函数Generator创建函数，它既是一个迭代器，也是一个可迭代对象。就是一个对象。 two. 怎么创建生成器？ 生成器不能通过构造函数Generator来创建，这种创建方式是Javascript内部自己使用的。如果需要创建应该使用下面代码,*号在function关键字后，在方法名前都可以。 function* test(){ } function *test(){ } **注意： 如果*号在function
JavaScript高级程序设计第四版学习记录-第七章迭代器与生成器
qiao_qiao_happy的博客
02-10 614
在软件开发领域，“迭代”的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件。 ECMAScript 6 规范新增了两个高级特性：迭代器和生成器。使用这两个特性，能够更清晰、高效、方便地实现迭代。 7.1 理解迭代 在 JavaScript 中，计数循环就是一种最简单的迭代： for (let i = 1; i <= 10; ++i) { console.log(i); } 循环是迭代机制的基础，这是因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之
js生成器迭代器
孩子不懒的博客
02-18 223
迭代器 迭代器可以理解为是一种规范，所有的对象都有next方法， next方法的参数是对象的返回value值， done的Boolean值判断是否继续迭代。迭代器语法也可以自己封装。 生成器 function关键字后的星号( * )来表示，函数中会用到新的关键字yield var obj = { *createIterator( arr ){ for( var i = ...
JavaScript—迭代器和生成器
此博客已停用，博文会逐渐转移到新地址，http://blog.csdn.net/liupeifeng3514
03-04 905
对集合中的任意项进行处理是很常见的操作。JavaScript 提供了好几种方法来遍历一个集合，从简单的 for  循环至 map()和filter() 。 迭代器和生成器将迭代的概念纳入的javascritp的核心语言中，并提供了一种自定义 for...of 循环体的机制 。 迭代器EDIT 一个迭代器对象 ，知道如何每次访问集合中的一项， 并记录它的当前在序列中所在的位置。在
JS中的迭代器和生成器
最新发布
xllllll___的博客
08-10 354
1.通过调用生成器函数来创建迭代器（这个时候生成器函数不会执行）2.通过迭代器调用next执行生成器函数里面的代码3.执行到yield暂时跳出函数并且把yield后面是值加工成对象返回到调用next的地方。
JS中的迭代器(iterator)和生成器(generator)
weixin_44416058的博客
02-20 5050
迭代器 迭代器是一个对象，是确使用户可在容器对象（container，例如链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节。 next方法有如下的要求： 一个无参数或者一个参数的函数，返回一个应当拥有以下两个属性的对象： done（boolean） ü 如果迭代器可以产生序列中的下一个值，则为 false。（这等价于没有指定 done 这个属性。）如果迭代器已将序列迭代完毕，则为 true。这种情况下，value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。 value 迭代器返
JavaScript之迭代器and生成器
贤蛋大眼萌
07-11 237
迭代器（iterator），使用户在容器对象（container，例如链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节即：迭代器是帮助我们队某个数据结构进行遍历的对象迭代器也是一个具体的对象，这个对象需要符合迭代器协议—一个特定的next方法next方法有如下要求：注意：迭代器≠可迭代对象总结：当一个对象内部实现了迭代器协议时候（对象内部实现迭代器），它就是一个可迭代对象。当一个对象变成了可迭代对象时，就可以进行某些操作(例如: for…of)。代码中我们使用 访问该属性应用：生成器函数也是一
JS的迭代器和生成器
zebghfv的博客
07-08 138
迭代器（Iterator） 迭代器就是一种机制，一种接口，就是给各种不同的数据结构提供访问机制。一种包含数据的结构实现了迭代器接口就可以通过for…of遍历。 Iterator的遍历过程如下： 1.会创建一个指针对象，指向此数据结构的起始位置，遍历器对象本身就是一个指 针对象。 2.它就是去调用Iterator实现的next()方法，第一次调用，就把指针指向数据的 第一个成员，且返回。第二次调用就指向第二个成员，直到最后。 每次返回的是一个对象，{value:成员数据，done:布尔值}，value就是该
JavaScript 迭代器（Iterator）和生成器（Generator）
梅花寺
05-29 1185
说起迭代，或许大多数人想到的就是循环，但是迭代和循环并不是等价的，循环是迭代机制的基础。那么什么是迭代呢？个人理解的是按照顺序重复多次执行同一段程序，通常会有明确的中止条件。 在ECMAScript 6规范中新增了两个高级特性：迭代器和生成器，将迭代的概念直接带入核心语言，并提供了一种机制来自定义for...of循环的行为。 本文就来探寻一下这两个新特性。 一、迭代协议 迭代协议具体分为可迭代协议和迭代器协议。 1.1 可迭代协议 （1）什么是可迭代协议 可迭代协议允许 JavaScript 对象定义或定
ES6迭代器与生成器深度解析
"深入理解ES6的迭代器与生成器，迭代器用于简化循环操作，减少错误，生成器则提供了一种生成可迭代序列的新方式，它们是ES6中提升代码可读性和效率的重要特性。" 在JavaScript的ES6中，迭代器和生成器是两种非常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值