美文网首页全栈记让前端飞
9 ES6 迭代器、生成器

9 ES6 迭代器、生成器

作者: 官清岁月 | 来源:发表于2019-05-13 08:25 被阅读2次

    1、Iterator迭代器 ->遵循迭代模式思想实现,分为内部迭代器、外部迭代器,聚焦点:添加迭代接口

    (1).迭代模式:其提供一种方法可顺序获得聚合对象中的各个元素,其可让用户通过特定的接口巡防集合中的每个元素而不需了解底层实现,例如for, for..in..forEach();等; -> 最简单、常见的设计模式

    (2).迭代器兴起原因:最初后端提供数组数据给前端,前端for循环遍历即可,但由于业务逐渐变复杂,数据结构也在逐步发生变化,例如对象、Set、Map等,导致前端遍历接口大量重写 -> ES6提出了Iterator迭代器[Symbol.iterator];

    内部迭代器:for;  for...in..;  forEach();  $.each();  $().each();等  -> 系统提供好的;

    外部迭代器:ES6中引入Iterator迭代器,将其部署在了Array, 字符串,NodeList, arguments, Set, Map等数据的Symbol.iterator属性上,使它们具备“迭代接口”;-> 对象没有迭代接口,我们可以手动添加;

    迭代接口数据的“遍历方法”: for...of..; Array.from(); ...运算符; -> ES6提供的“更专业”的遍历方法;

    补充:日常开发中 -> 普通数据使用for循环遍历(聚焦点:循环圈数);对象使用for..in遍历操作(prop是属性名,不确定循环圈数,不建议使用for循环);数组使用forEach();Map();filter();系列方法;jQuery还提供了$.each(); $().each(); Array, 字符串,NodeList, arguments, Set, Map等数据使用for..of(prop为属性值); Array.from(); ...运算符即可; -> 实际它们底层封装的都是for循环;

    (3).添加迭代接口;

    2、Generator生成器 -> 返回迭代对象,函数内配合yield使用,其会分段执行,遇到yield即暂停 

    - - - >>> 开发中经常采用 "Generator生成器+promise对象+Co库" 更加优雅的解决回调地狱,巧妙的利用了Generator的特性,但Generator生成器的主要功能是生成“迭代对象”;ES7 async+await 底层实现有部分是Generator生成器+promise对象+Co库,所以它可以理解为“语法糖”,但其内部不仅仅限于处理回调地狱,其还可以解决try..catch..捕获异步错误,以及解决同步并发的异步问题(有些牵强,可理解为解决一些特殊需求),开发中主要是解决回调地狱;

    相关文章

      网友评论

        本文标题:9 ES6 迭代器、生成器

        本文链接:https://www.haomeiwen.com/subject/kvmilqtx.html