js 迭代器 生成器 异步代码处理 promise+生成器 -＞ await/async

已于 2022-05-28 09:41:56 修改
阅读量356 收藏 1
点赞数 1
文章标签： javascript 前端 typescript
于 2022-05-25 22:49:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Anna_Liqi/article/details/124974033
版权

一、迭代器

迭代器本身就是一个对象，可以帮助我们遍历另外一个对象在这里插入图片描述

1、认识迭代器
// 下面是我们编写的一个迭代器,就是一个对象。帮我们遍历容器结构
// const iterator = {
//   next: function () {
//     return {
//       done: true,
//       value: 123,
//     };
//   },
// };

// 数组
const names = ["a", "b", "c"];
const iterator = names[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
// 控制台依次打印：
// { value: 'a', done: false }
// { value: 'b', done: false }
// { value: 'c', done: false }
// { value: undefined, done: true }

console.log("================================");
// 创建一个迭代器对象来访问数组
let index = 0;
const namesIterator = {
  next: function () {
    // return { done: false, value: "a" };
    // return { done: false, value: "b" };
    // return { done: false, value: "c" };
    if (index < names.length) {
      return { done: false, value: names[index++] };
    } else {
      return { done: true, value: undefined };
    }
  },
};
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
2 、迭代器函数
const names = ["a", "b", "c"];
const num = [10, 20, 30];

function createArrayIterator(arr) {
  let index = 0;
  return {
    next: function () {
      if (index < arr.length) {
        return {
          done: false,
          value: arr[index++],
        };
      } else {
        return { done: true, value: undefined };
      }
    },
  };
}
const namesIterator = createArrayIterator(names);
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());

const numIterator = createArrayIterator(num);
console.log(numIterator.next());
console.log(numIterator.next());
console.log(numIterator.next());
console.log(numIterator.next());
3、可迭代对象

在这里插入图片描述

for-of就是迭代器本质啦

// const names = ["a", "b", "c"];
// // 创建一个迭代器对象来访问数组
// let index = 0;
// const namesIterator = {
//   next: function () {
//     if (index < names.length) {
//       return { done: false, value: names[index++] };
//     } else {
//       return { done: true, value: undefined };
//     }
//   },
// };

// 可迭代对象
const iteratorObj = {
  names: ["a", "b", "c"],
  // 满足可迭代协议
  [Symbol.iterator]: function () {
    let index = 0;
    return {
      // 这里需要改成箭头函数
      next: () => {
        if (index < this.names.length) {
          return { done: false, value: this.names[index++] };
        } else {
          return { done: true, value: undefined };
        }
      },
    };
  },
};
console.log(iteratorObj[Symbol.iterator]);

// 1.第一次调用iteratorObj[Symbol.iterator]
const iterator = iteratorObj[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

// 第二次调用iteratorObj[Symbol.iterator]： 生成新的迭代器
const iterator1 = iteratorObj[Symbol.iterator]();
console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());

// 3.for...of 可以遍历的东西必须是一个可迭代对象
// for其实是语法糖，做的就是iterator.next()，拿到对象，然后在取.value。当done:false,就把value取出来。done为true的时候，就停止遍历
const obj = {
  name: "chen",
  age: 23,
};
for (const item of obj) {
  console.log(item); //TypeError: obj is not iterable
}
4、原生迭代器对象

String、Array、Map、Set、arguments对象、NodeList集合都是， 注意：对象就不是了

// 内置创建可迭代对象
// 1、数组
const names = ["a", "b", "c"];
console.log(names[Symbol.iterator]);

const iterator = names[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

// 2、Map / Set
const set = new Set();
set.add(10);
set.add(100);
set.add(1000);
console.log(set[Symbol.iterator]().next());

for (const item of set) {
  console.log(item)
}

console.log('-----------')
// 3、函数中arguments也是一个可迭代对象
function foo(x, y, z) {
  for (const arg of arguments) {
    console.log(arg)
  }
}
foo(10, 20, 30)
5、可迭代器对象的应用场景
// 1、for-of
// 2、展开运算符

const names = ["a", "b", "c"];
const obj = {
  name: 'chen',
  age: 23
}
// 不可以迭代
// for (const item of obj) {
//   console.log(item)
// }

// 值得注意的是，下面这样是可以的
// 这是ES9中新增的一个特性，专门针对对象展开做的特殊处理，用的也不是迭代器。通过obj.entries()
const newObj = { ...obj }
console.log(newObj) //{ name: 'chen', age: 23 }
// 这种也不是使用迭代器,使用的还是entries()
const { name, age } = obj

// 3、解构语法，使用的还是迭代器，调的是next().value
const [name1, name2, name3] = names
console.log(name1, name2, name3) // a b c

// 4、创建一些对象时
const set1 = new Set(names)
// const set2 = new Set(1334); //报错
// 创建数组
const arr1 = Array.from(names)

// 5、Promise.all
Promise.all(names).then(res => {
  console.log(res) //[ 'a', 'b', 'c' ]
})
6、自定义类的可迭代性
// class Person {

// }

// // 不是可迭代对象
// const p1 = new Person();
// const p2 = new Person();

// 案例： 创建一个教师类，创建出来的对象都是可迭代对象
class Classroom {
  constructor(address, name, students) {
    this.address = address;
    this.name = name;
    this.students = students;
  }
  entry(newStudent) {
    this.students.push(newStudent);
  }
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.students.length) {
          return { done: false, value: this.students[index++] };
        } else {
          return { done: true, value: undefined }
        }
      }
    }
  }
}
const classroom = new Classroom('北京', '计算机教室', ['zhangsan', 'lisi', 'wangwu']);
classroom.entry('jianren')

// classroom不是可迭代的对象，如果想迭代，需要在类中加上[Symbol.iterator]
for (const item of classroom) {
  console.log(item)
}
// 下面输出：
// zhangsan
// lisi
// wangwu
// jianren

// 如果是function，也是一样的
// function Person () {

// }
// Person.prototype[Symbol.iterator] = function(){

// }

二、生成器

1、什么是生成器 - 生成器函数

在这里插入图片描述

// 生成器函数， 有* ，通过yield控制代码执行流程，返回值就是一个迭代器
function* foo() {
  console.log('函数开始执行~')

  // 代码执行的时候暂停
  // 第一段代码
  const value = 100
  console.log(value)
  yield

   // 第二段代码
  const value1 = 200
  console.log(value1)
  yield

   // 第三段代码
  const value2 = 300
  console.log(value2)
  yield

  console.log('函数执行结束！')
}

// 这么调用，一行代码不会执行
foo()

// 当我们调用生成器函数时，会返回一个生成器（特殊的迭代器）
const generator = foo()
// 执行第一段代码
generator.next()
// 执行第二段代码
generator.next()
// 执行第三段代码
generator.next()
2、生成器函数的执行流程
// 当遇到yield的时候只暂停函数的执行
// 当遇到return的时候，生成器就停止执行
function* foo() {
  console.log('函数开始执行~')

  const value = 100
  console.log(value)
  // return value，停止了。如果想返回，直接跟在后面
  yield value * 200

  const value1 = 200
  console.log(value1)
  yield

  const value2 = 300
  console.log(value2)
  yield

  console.log('函数执行结束！')
}

foo()

const generator = foo()
// generator.next()//100
// generator.next()//200
// generator.next()//300
// generator.next()

console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
// 依次打印：
// { value: undefined, done: true }
// { value: undefined, done: true }
// { value: undefined, done: true }
// { value: undefined, done: true }


// 返回的就是迭代器：
// 100
// { value: undefined, done: false }     
// 200
// { value: undefined, done: false }     
// 300
// { value: undefined, done: false }     
// 函数执行结束！
// { value: undefined, done: true }
3、生成器的next传递参数
function* foo() {
  console.log('函数开始执行~')

  const value = 100
  console.log(value)
  const n = yield value

  const value1 = n * 10
  console.log(value1)
  yield

  const value2 = 300
  console.log(value2)
  yield

  console.log('函数执行结束！')
}

foo()


// 1. 生成器上的next方法可以传递参数
const generator = foo()
console.log(generator.next())
console.log(generator.next(10))
console.log(generator.next())
console.log(generator.next())
4、生成器替代迭代器的使用1
// 生成器替代迭代器
function* createArrayIterator(arr) {
  let index = 0;

  // 写法一：
  // yield arr[index++]; //{ done: true, value: undefined };
  // yield arr[index++];
  // yield arr[index++];
  
  // 写法二：
  // yield 'a'; 
  // yield 'b'; 
  // yield 'c'; 

  // 写法三：
  // for (const item of arr) {
  //   yield item;
  // }

  // 写法四： yield* 可迭代对象
  yield* arr

  // return {
  //   next: function () {
  //     if (index < arr.length) {
  //       return {
  //         done: false,
  //         value: arr[index++],
  //       };
  //     } else {
  //       return { done: true, value: undefined };
  //     }
  //   },
  // };
}

const names = ["a", "b", "c"]
const namesIterator = createArrayIterator(names);
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
5、生成器替代迭代器的使用2
// 生成器替代迭代器
function* createArrayIterator(arr) {
  let index = 0;
  yield* arr;
}

// 2.创建一个函数，这个函数可以迭代一个范围内的数字
// 10 20
// function createRangeIterator(start, end) {
//   // 写法一：
//   let index = start;
//   return {
//     next: function () {
//       if (index < end) {
//         return {
//           done: false,
//           value: index++,
//         };
//       } else {
//         return { done: true, value: undefined };
//       }
//     },
//   };
// }

function* createRangeIterator(start, end) {
  // 写法一：
  let index = start;
  while (index < end) {
    yield index++;
  }
}


const iterator = createRangeIterator(10, 20);
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

// 输出如下：
// { done: false, value: 10 }
// { done: false, value: 11 }
// { done: false, value: 12 }
// { done: false, value: 13 }
6、异步代码的处理方案
function requestData(url) {
  // 异步请求的代码会被放入到executor中
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url);
    }, 1000);
  });
}

// 1.第一种方案： 多次回调
// 回调地狱
// requestData('chen').then(res => {
//   requestData(res + '/aaaa').then(res => {
//     requestData(res + '/bbbb').then(res => {
//       console.log(res);
//     })
//   })
// })

// 2.第二种方案： Promise中then的返回值来解决
// requestData('chen').then(res => {
//   return requestData(res + '/aaaa')
// }).then(res => {
//  return requestData(res + '/bbbb');
// }).then((res) => {
//   console.log(res);
// })

// 3.第三种方案： Promise + generator实现(手动执行)
// function* getData() {
//   const res1 = yield requestData("chen");
//   const res2 = yield requestData(res1 + "/aaaa");
//   const res3 = yield requestData(res2 + "/bbbb");
//   console.log(res3);
// }

// const generator = getData();
// generator.next().value.then((res) => {
//   // console.log(res); //如果想要拿到这个res，需要执行下一次next()，并把值传回去
//   generator.next(res).value.then((res) => {
//     // console.log(res);
//     generator.next(res).value.then((res) => {
//       console.log(res);
//     });
//   });
// });

// 3.第三种方案： Promise + generator实现（自动执行）
// function execGenerator(getFn) {
//   const generator = getFn();
//   // 使用递归
//   function exec(res) {
//     const result = generator.next(res);
//     if (result.done) {
//       return result.value;
//     } else {
//       result.value.then(res => {
//         exec(res);
//       })
//     }
//   }
//   exec();
// }
// execGenerator(getData);


// 4.第四种方案： await/async
// function* getData() {
//   const res1 = yield requestData("chen");
//   const res2 = yield requestData(res1 + "/aaaa");
//   const res3 = yield requestData(res2 + "/bbbb");
//   console.log(res3);
// }
// 其实是yield的语法糖
async function getData() {
  const res1 = await requestData("chen");
  const res2 = await requestData(res1 + "/aaaa");
  const res3 = await requestData(res2 + "/bbbb");
  console.log(res3);
}
getData()
大海里没有水
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js代码-生成器函数模拟async/await
07-15
js代码-生成器函数模拟async/await
ASP.Net中的async+await异步编程的实现
12-17
在.NET Framework4.5框架、C#5.0语法中，通过async和await两个关键字，引入了一种新的基于任务的异步编程模型（TAP）。在这种方式下，可以通过类似同步方式编写异步代码，极大简化了异步编程模型。 用法： public ...
JavaScript(八)——Promise基本用法 async/await使用
rjlmylover_zyw的博客
02-14 3039
文章目录什么是PromisePromise用法resolve和rejectthencatchPromise好处 什么是Promise promise是异步编程的一种解决方案 , 是一个构造函数 , 它有resolve , reject , race 等静态方法 , 它的原型上有then , catch 方法 promise有三种状态 , pending（进行中）、fulfilled（已成功）和rejected（已失败） 也只有两种结果 , 从pending到fulfilled , 或者从pending到r
生成器和promise推导async和await
weixin_47450807的博客
03-11 305
一、写在前面 Promise异步处理，我们通常使用await和async来进行处理。下面我们将深入探究一下await和async的原理。我们使用一个例子进行说明。 二、例子 我们现在模拟一个场景，当我们先请求完一个请求之后，拿到返回值，再加上-----去继续发起请求。然后再次拿到返回值之后，再加上+++++去发起请求。 一、最基本的写法 function RequestData(url) { return new Promise((resolve, reject) => { setTime
用生成器+promise实现async，await
zsnpromsie的博客
04-25 443
// 用生成器+promise实现async，await function run(gen) { let args = [].slice.call(arguments, 1), it it = gen.apply(this, args) return Promise.resolve().then(function handleNext(value) { var next = ...
js中forEach与for循环实现按顺序输出promise
weixin_43801836的博客
10-05 2378
首先拿到4个pending的promise对象，然后分别.then注册成功的回调，一秒后res1、res2、res3, res4状态变为fulfilled，最后从上到下依次打印结果，四块代码会同时执行。如果使用for循环，就能够按顺序输出1，2，3，4。隔9秒输出1， 隔8秒输出2， 隔7秒输出3， 隔6秒输出4。题干：通过数组中的值设定第一个promise使用9秒，第二个使用八秒，第三个使用七秒，第四个使用六秒。先隔七秒输出4，然后每隔一秒输出一个3，2，1。4 forEach没有for循环效率高。
js map遍历与promise一起使用会出现的问题，怎么解决？
qq_33235680的博客
02-07 1112
js map遍历与promise一起使用会出现的问题，怎么解决？
JavaScript 异步迭代器
m0_54829066的博客
12-22 498
JavaScript 异步迭代器是一种特殊的对象，它允许你在异步地迭代一组值。异步迭代器的使用方法类似于同步迭代器，但是它使用了。如果你还不熟悉异步迭代器，建议你阅读有关异步迭代器的文档以及其他相关资料，以便更好地理解这个概念。每次迭代时，会将当前的值赋给。函数返回一个异步迭代器对象，然后使用。变量，然后打印出来。
手把手带你掌握迭代器、生成器和异步函数，以及优雅的异步处理方案 -- async/await
weixin_44995391的博客
06-30 161
手把手带你掌握迭代器、生成器和异步函数，以及优雅的异步处理方案 -- async/await
JavaScript--同步和异步迭代器
m0_74293254的博客
07-31 538
异步迭代器对于处理异步操作，比如网络请求或读取大型文件等场景非常有用，可以避免阻塞代码执行。而同步迭代器适用于处理同步的、一次性获取全部数据的情况。需要注意的是，异步迭代器通常涉及到使用异步函数或 Promise 来处理迭代操作。这些功能是ES2018引入的，并在处理具有异步或延迟操作的情况下非常有用。
babel-plugin-better-async-await：Babel插件可使用异步await更好地处理错误
01-30
编写更好的async await并避免try catch语句如果使用以下预设则此插件可以很好。 :light_bulb: 对于与CRA以及任何依赖@ babel / env或依赖于预设和插件的应用程序一起使用，我们强烈建议使用 注意：如果使用的是...
详解ES6之async+await 同步/异步方案
12-12
关于异步方案， ES6 先是出现了 基于状态管理的 Promise，然后出现了 Generator 函数 + co 函数，紧接着又出现了 ES7 的 async + await 方案。 本文力求以最简明的方式来疏通 async + await。 异步编程的几个场景 先...
详解JS的四种异步解决方案！（新增了相亲小栏目~）
u012384510的博客
06-15 987
大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信lxchuan12参与，每周大家一起学习200行左右的源码，共同进步。新增两位小姐姐和一位小哥哥：现有【L01】,【L02】,【L03】三个小姐姐，【N01】 一个小哥哥。具体在我的#公众号：若川视野 发消息回复 相应的关键词 获取微信号，或者查看文末。「异步编程」是前端工程师日常开发中经常会用到的技术，也是校...
详解JS的四种异步解决方案！
chengbo_eva的博客
07-16 5809
详解JS的四种异步解决方案！
JS迭代器及异步
KEEP CODING
10-16 222
可迭代对象及其相关的迭代器是ES6的一个特性。ES6新增的期约让编写异步代码更容易。关键字async和await是ES2017中引入的，为了简化异步编程提供的新语法，最后，异步迭代器和for/aswait循环是ES2018中引入的，允许在看起来同步的简单循环中操作异步事件流。
JS中生成器处理异步的方案
m0_71485750的博客
06-27 415
学完了我们前面的Promise、生成器等，我们目前通过一个案例来看一下异步代码的处理方案。案例需求 :方式一 : 层层嵌套(回调地狱) 方式二: 使用Promise进行优化, 解决回调地狱(链式编程) 生成器方案 上面的代码即使方式二使用Promise对代码进行了重构, 但是代码看起来也是阅读性依然比较差的，有没有办法可以继续来对上面的代码进行优化呢？ 目前我们的方案三写法有两个问题：所以，我们可以封装一个工具函数execGenerator自动执行生成器函数(了解)：......
js 异步迭代器
dongcehao的博客
05-17 1519
同步的迭代器模式 众所周知，迭代器模式就是在已有的 对象里 增加一个 迭代函数，然后 通过迭代函数 来执行 对应的函数 const obj = { arr1: [1,2,3,4,5], arr2: [1,2,3,4,5], next(fn) { const arr = [...this.arr1, ...this.arr2] for (val of arr) { fn(val) } } } obj.next(console.log) 异步的迭代器
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 120
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
生成器与async-await
07-14
而 async-await 则是用于异步编程，可以方便地处理异步操作的结果，使得代码更加易读和易于维护。 需要注意的是，生成器是同步的，而 async-await 是基于异步的。生成器通过 yield 语句来暂停执行和返回值，但不能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值