【co】ES6-20/21 iterator与generator

最新推荐文章于 2021-08-03 19:57:52 发布
最新推荐文章于 2021-08-03 19:57:52 发布
阅读量104 收藏
点赞数
分类专栏： # ES6 系统学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43503511/article/details/119098538
版权

在这里插入图片描述

ES6-20 iterator与generator
ES6-21 async与await、ES6的模块化

try catch不能捕获异步异常

  • try catch是同步代码
try {
    setTimeout(() => {
        console.log(a)
    })
} catch (e) {
    console.log(e)
}

在这里插入图片描述

iterator

内部迭代器：系统定义好的迭代器接口（如数组Symbol.iterator）
外部迭代器：手动部署（可以给obj定义外部迭代器）

对于遍历器对象来说，done: false和value: undefined属性都是可以省略的

内部迭代器：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 除了next之外还可以增加return(){}，在for…of循环中凡是使用break或者throw new Errow()来终止循环的，会走return
let obj = {
    a: 1,
    b: 2,
    c: 3,
    [Symbol.iterator]() {
        let nextIndex = 0
        let map = new Map()
        for (let [key, value] of Object.entries(this)) {
            map.set(key, value)
        }
        let mapEntries = [...map.entries()],
            len = mapEntries.length
        return {
            next() {
                return nextIndex < len ?
                    { value: mapEntries[nextIndex++], done: false } :
                    { value: undefined, done: true }
            }
        }
    }
}
for (let i of obj) {
    console.log(i)
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

默认调用iterator接口

  • ...
  • for...of
  • Array.from()
  • map\set
  • Promise.all() Promise.race()
  • yield

generator

  • 生成器
  • 用于返回迭代器对象
  • yield只能出现在生成器中
  • yield执行的返回值是undefined（并不产生值）
  • 结合yield使用，能结合next拿到
  • yield暂停代码运行，有记忆功能
  • return代码终止
  • 不调用next时，不会运行test内的代码
function * test(){
    yield 'a'
    console.log('第二次调用next时才打印')
    yield 'b'
    yield 'c'
    return 'd'

}
let iter = test()
// 不调用next时，不会运行test内的代码
console.log(iter.next()) // 暂停
console.log(iter.next())
console.log(iter.next())
console.log(iter.next()) // 终止 done为true了

在这里插入图片描述

  • 打印iter
    在这里插入图片描述

return

  • 终止迭代，done为true，value取决于是否有返回值
  • 内部return
function* test() {
    yield 1;
    return;// 再次调用next，return之后value都是undefined
    yield 2;
}
let it = test()
console.log(it.next())
console.log(it.next())
console.log(it.next())

在这里插入图片描述

function* test() {
    yield 1;
    return 10;// 返回值
    yield 2;
}
let it = test()
console.log(it.next())
console.log(it.next())

在这里插入图片描述

  • 外部return，实例调用
function* test() {
    yield 1;
    yield 2;
}
let it = test()
console.log(it.next())
console.log(it.return(10))
console.log(it.next())

在这里插入图片描述

throw

  • 必须要在第一次调用next之后调用throw，才能被捕获（捕获区间在try里的第一个yield之后）
  • throw的表达式本身要是正确的
function* test() {
    try {
        yield 1;
        yield 2;
    } catch (e) {
        console.log('生成器内部异常', e)
    }
}
let it = test()
console.log(it.next())
console.log(it.throw(1))
console.log(it.next())

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 多次抛出只会捕获一个
function* test() {
    try {
        yield 1;
        yield 2;
    } catch (e) {
        console.log('生成器内部异常', e)
    }
}
let it = test()
console.log(it.next())
console.log(it.throw(1))
console.log(it.throw(2))

在这里插入图片描述

  • throw的同时，也会往下走一步
function* test() {
    try {
        yield 1;
        yield 2;
    } catch (e) {
        console.log('生成器内部异常', e)
    }
    yield 3;
}
let it = test()
console.log(it.next())
console.log(it.throw(1)) // 产出的是3不是2

在这里插入图片描述

  • 捕获异步代码
const fs = require('fs')
const util = require('util')
const co = require('co')
let readFile = util.promisify(fs.readFile)
function* read() {
    try {
        let val1 = yield readFile('firsttxt', 'utf-8')
        let val2 = yield readFile(val1, 'utf-8')
        let val3 = yield readFile(val2, 'utf-8')
        console.log('inner', val3)
    } catch (e) {
        console.log('异常捕获', e)
    }
    console.log('正常执行')
}
let it = read()
let promise = co(it)
promise.then((val) => {
    console.log(val)
})

在这里插入图片描述

for…of循环

  • 直接拿到值了，不是done/value了
function* foo() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
  return 6;
}

for (let v of foo()) {
  console.log(v); // 返回的是yield产出的值
}
// 1 2 3 4 5

实现斐波那契

function* fibonacci() {
  let [prev, curr] = [0, 1];
  for (;;) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

for (let n of fibonacci()) {
  if (n > 1000) break;
  console.log(n);
}

遍历对象

const obj = {
    a: 1,
    b: 2,
    c: 3
}
function* test(obj) {
    for (let key in obj) {
        yield [key, obj[key]]
    }
}
for (let [key, val] of test(obj)) {
    console.log(key + ':' + val)
}

const obj = {
    a: 1,
    b: 2,
    c: 3,
    [Symbol.iterator]: test
}
function* test() {
    for (let key in this) {
        yield [key, this[key]]
    }
}
for (let [key, val] of obj) {
    console.log(key + ':' + val)
}

yield执行返回值

  • 只能通过next的第二次调用拿到值
const fs = require('fs')

function promisifyAll(obj) {
    for (let [key, fn] of Object.entries(obj)) {
        if (typeof fn === 'function') {
            obj[key + 'Async'] = promisify(fn)
        }
    }
}
promisifyAll(fs)
function promisify(func) {
    return function (...args) {
        return new Promise((resolve, reject) => {
            func(...args, (err, data) => {
                if (err) {
                    reject(new Error(err))
                } else {
                    resolve(data)
                }
            })
        })
    }
}
let readFile = fs.readFileAsync
function* read() {
    let val1 = yield readFile('first.txt', 'utf-8')
    let val2 = yield readFile(val1, 'utf-8')
    let val3 = yield readFile(val2, 'utf-8')
    console.log('inner', val3)

}
let it = read()
let { value } = it.next()
value.then((val1) => {
    let { value } = it.next(val1)
    value.then((val2) => {
        let { value } = it.next(val2)
        value.then((val3) => {
            console.log('val3', val3)
            it.next(val3)
        })
    })
})
// val3 66
// inner 66

let it = read()
function Co(it) {
    return new Promise((resolve, reject) => {
        let next = (data) => {
            let { value, done } = it.next(data)
            if (done) {
                resolve(value)
            } else {
                value.then((val) => {
                    next(val)
                })
            }
        }
        next()
    })
}
let promise = Co(it)
promise.then((val) => {
    console.log(val)
})
  • 直接使用co包
// npm i co
let co = require('co')
let promise = co(it)
promise.then((val) => {
    console.log(val)
})

yield*

  • ES6 提供了yield*表达式，用来在一个 Generator 函数里面执行另一个 Generator 函数。
function* bar() {
  yield 'x';
  yield* foo();
  yield 'y';
}

// 等同于
function* bar() {
  yield 'x';
  yield 'a';
  yield 'b';
  yield 'y';
}

async await

  • async替换*
  • await替换yield
  • async函数内无论写return什么，返回值都是promise（隐式通过Promise.resolve()包装了返回值）
const fs = require('fs')
const util = require('util')
const co = require('co')
let readFile = util.promisify(fs.readFile)
async function read() {
    try {
        let val1 = await readFile('first.txt', 'utf-8')
        let val2 = await readFile(val1, 'utf-8')
        let val3 = await readFile(val2, 'utf-8')
        console.log('inner', val3)
    } catch (e) {
        console.log('异常捕获', e)
    }
    console.log('正常执行')

}
// let it = read()
// let promise = co(it)
// async await内置执行器 co
let promise = read()
promise.then((val) => {
    console.log(val)
})
// 也可以在返回的promise.catch里捕获异常

在这里插入图片描述

  • promise内部异常
const fs = require('fs')
const util = require('util')
const co = require('co')
let readFile = util.promisify(fs.readFile)
async function read() {
    let val1 = await readFile('first.txt', 'utf-8')
    console.log(a)
    let val2 = await readFile(val1, 'utf-8')
    let val3 = await readFile(val2, 'utf-8')
    console.log('inner', val3)
    console.log('正常执行')
}
let promise = read()
promise.then((val) => {
    console.log(val)
}).catch((e) => {
    console.log('catch到异常', e)
})

在这里插入图片描述

Promise.all

  • 一个出错，在then里都拿不到，会在catch里捕获到第一个错误
const fs = require('fs')
const util = require('util')
let readFile = util.promisify(fs.readFile)
let f = Promise.all([
    readFile('first.txt', 'utf-8'),
    readFile('secondtxt', 'utf-8'),
    readFile('thirdtxt', 'utf-8'),
])
f.then((val) => {
    console.log('then', val)
}).catch((err) => {
    console.log('err', err)
})

在这里插入图片描述

Stephy_Yy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6-learning：学习ES6的笔记
02-05
目录 思维导图第一章块级绑定第二章弦和正则表达式第三章函数第四章扩展的对象功能第五章解构：更方便的数据访问第六章符号和符号属性第七章与地图第八章迭代器（Iterator）和生成器（Generator）第九章JavaScript中...
js-es6-icons
05-26
这个库可能包含了一系列与ES6特性相关的图标，每个图标代表一个特定的语法或概念。 ### ES6 核心特性 1. **let 和 const 声明** - `let` 用于块级作用域变量声明，解决了var导致的变量提升和作用域污染问题。 - ...
java提高篇（三十）-----Iterator
热门推荐
chenssy 的技术博客
07-07 7万+
迭代对于我们搞Java的来说绝对不陌生。我们常常使用JDK提供的迭代接口进行Java集合的迭代。Iterator iterator = list.iterator(); while(iterator.hasNext()){ String string = iterator.next(); //do something
Iterator
jwz934738949的博客
07-04 86
概念 iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制 作用 为各种数据结构，提供一个统一的、简便的访问接口 使得数据结构的成员能够按某种次序排列 Iterator接口主要供for of消费 工作原理 创建一个指针对象，指向数据结构的起始位置 第一次调用next方法，指针自动指向数据结构的第一个位置 接下来不断调用next方法，指针自动后移，直到指向最后一个成员 每调用一次next方法，都会返回一个对象。对象包含value与done两个属性，value为指针所指向成员的值，而
es6 iterator和for...of循环
京都玩家
03-23 512
es6 中的 Iterator 和for...of循环
ES6-init-rocketseat
02-15
**ES6-init-rocketseat** 是一个学习项目，旨在引导初学者深入了解JavaScript的ES6（ECMAScript 2015）新特性。这个项目由知名编程教育平台Rocketseat提供，帮助开发者提升对现代JavaScript的理解和应用能力。下面将...
ES6-test-B:一个测试
06-02
**ES6 测试-B: 深入理解 JavaScript 新特性** 在编程领域，JavaScript 作为最广泛使用的前端语言之一，其发展迅速且不断进化。ES6（ECMAScript 2015）是 JavaScript 的一个重要版本，引入了大量新特性，极大地提升...
iterator
编程鸟
11-22 1857
1、迭代器的概念 迭代器（iterator）是一种抽象的设计概念，是设计模式的一种，其定义如下：提供一种方法，使之能够依次寻访某个容器所包含的所有元素，而又无需暴露该容器底层的结构。 2、迭代器的本质 迭代器实际是一种行为类似指针的对象，因此指针的所有操作迭代器都支持，使用迭代器时向使用指针一样去使用。比如：指针的解引用、成员访问、前置/后置++、前置/后置–、==、!=等迭代器支持，但是迭代器是...
迭代器(iterator)看这篇就够了
若葉的博客
08-03 10万+
迭代器很重要，是遍历线性数据结构（链表）的重要方法之一。迭代器仅仅是遍历输出语句！本身并没有任何排序等其他功能，在数据结构的二叉树中别认为迭代器输出二叉树是因为迭代器会排序，是因为排序二叉树本身有序，迭代器仅仅是按照排序二叉树本身的排序规则输出罢了。
ECMAScript6新特性详解-Iterator和Generator
"光学分辨率检验板-实现了Iterator接口的对象，主要涉及ES6中的迭代器和数组转换" 在JavaScript的世界里，ES6（ECMAScript 2015）引入了许多新特性，极大地提升了语言的表达能力和开发效率。其中，Iterator接口是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值