说起迭代器, 那就要先了解迭代模式

迭代模式: 提供一种方法可以顺序获得聚合对象中的各个元素, 是一种最简单,

      也是最常见的设计模式,它可以让用户通过特定的接口寻访集合中的每一个元素

      而不用了解底层的实现。

迭代器 : 依照迭代模式的思想而实现,

    分为内部迭代器和外部迭代器,

内部迭代器: 本身是函数, 该函数内部定义好迭代规则,完全接手整个迭代过程

       外部只需要一次初始调用,如Array.prototype.forEach,  Jquery.each

外部迭代器: 本身是函数, 执行返回迭代对象,迭代下一个元素必须显示调用,

      调用复杂度增加,但灵活性增强。

我们主要来了解一下外部迭代器:

外部迭代器本身是一个函数, 执行这个函数就相当于启动了这个迭代器,

然后我们每次迭代需要手动调用next()方法,返回一个对象,

基于此我们来自己实现一个外部迭代器

const arr = [2,3,4];
function OuterIterator(o) {
let curIndex = 0;
let next = () => {
return {
value: o[curIndex],
done: o.length === ++curIndex,
}
};
return {
next
}
}
const oIt = OuterIterator(arr);
console.log(oIt.next());
console.log(oIt.next());
console.log(oIt.next());

结果:

我们为什么要用外部迭代器呢 ?

想象一个场景, 后端给前端返回一个数组形式的数据, 前端通过for 循环遍历

       当业务变动时, 后端传给前端的不再是数组了, 而是一个对象又

      或者是一个Map/Set 结构的数据, 那前端的遍历代码就需要大规模重写。

所以我们要标准化迭代操作,

解决方案: ES6  引入Iterator, 部署在NodeLlist,  argument,  Array, Set, Map , 字符串

      等数据上的Symbol.iterator属性   , 使得这些数据是可迭代的, 并可进行

      for...of   ,    ...   ,  Array.from等操作。

这里插播一个内容Symbol:  js 第七种 基本数据结构

         特点: 唯一, 可作为对象属性, 有静态方法Symbol.iterator

Symbol如果传入的是对象的话,会隐式调用对象的toString() 方法,比如:

let os = Symbol({'name': 'liu'});
console.log(os);
let os2 = Symbol({'name': 'liu', toString() {
return "我最帅"
}});
console.log(os2);

我们重写了对象的toString方法, 结果:

回到主题, 原生有iterator接口的只有NodeLlist,  argument,  Array, Set, Map , 字符串等数据

对象上是没有iterator的, 所以它不能被迭代, 也不能进行for...of   ,    ...   ,  Array.from等操作

那我们要迭代对象怎么办呢 ?

没错, 就是给它加上我们自己按照ES6规范写外部迭代器:

const obj = {
  0: 'liu',
  1: '18',
  2: 'man',
 }; console.log([...obj]);

直接用...操作符报错, obj 不可迭代

const obj = {
0: 'liu',
1: '18',
2: 'man',
length: 4,
[Symbol.iterator] : function () {
let curIndex = 0;
let next = () => {
return {
value: this[curIndex],
done: this.length === ++curIndex,
}
};
return {
next
}
}
};
console.log([...obj]);

结果:

obj必须是类数组, 就是属性是数字 , 且有length属性 才能这样写。

我们下一篇来讨论generator生成器, 它可以生成一个迭代对象。

ES6迭代器的更多相关文章

  1. ES6 迭代器和生成器

    设计为了更高效的数据处理,避免过多for循环嵌套(代码复杂度,跟踪多个循环变量) 1. 迭代器: 为迭代过程设计的接口 所有的迭代器对象都有next()方法,每次调用都返回一个结果对象,对象有两个属性 ...

  2. ES6 迭代器

    Iterator Iterator 是 ES6 引入的一种新的遍历机制,迭代器有两个核心概念: 迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为Symbol.itera ...

  3. ES6迭代器和生成器

    一.迭代器 JavaScript 原有的表示"集合"的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就需要一种统一的接口机制,来处理 ...

  4. 切图崽的自我修养-[ES6] 迭代器Iterator浅析

    Iterator 这真是毅种循环 Iterator不是array,也不是set,不是map, 它不是一个实体,而是一种访问机制,是一个用来访问某个对象的接口规范,为各种不同的数据结构提供统一的访问机制 ...

  5. ES6中的迭代器(Iterator)和生成器(Generator)

    前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简 ...

  6. ES6中的迭代器(Iterator)和生成器(Generator)(一)

    用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作 ...

  7. ES6入门十:iterator迭代器

    迭代模式 ES6迭代器标准化接口 迭代循环 自定义迭代器 迭代器消耗 一.迭代模式 迭代模式中,通常有一个包含某种数据集合的对象.该数据可能存在一个复杂数据结构内部,而要提供一种简单的方法能够访问数据 ...

  8. ES6生成器与迭代器

    ES6迭代器的一个例子 function run(taskDef) { var task = taskDef(); var result = task.next(); // 递归执行迭代 functi ...

  9. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

随机推荐

  1. linux (06) redis安装

    redis安装 一.在linux安装redis,通过源码编译安装redis 1.下载源码包 wget http://download.redis.io/releases/redis-4.0.10.ta ...

  2. JDK8在接口中引入的default

    default关键字介绍 default是在java8中引入的关键字,也可称为Virtual extension methods——虚拟扩展方法.是指,在接口内部包含了一些默认的方法实现(也就是接口中 ...

  3. [网络] 在浏览器输入URL回车之后发生了什么

    目录 一  前言 二  URL解析 三  DNS域名解析 1  IP 地址 2  什么是域名解析 3  浏览器如何通过域名去查询 URL 对应的 IP 呢 4  小结 四  建立连接 1  TCP三次 ...

  4. 201871010104-陈园园 《面向对象程序设计(java)》第十四周学习总结

    201871010104-陈园园 <面向对象程序设计(java)>第十四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  5. 201871010121-王方-《面向对象程序设计java》第十六周实验总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...

  6. 逆向工程文件example完美结合使用PageHelper分页插件及分页不成功原因

    原生的mybatis需要手写sql语句,项目数据库表多了之后,可以让你写sql语句写到手软,于是mybatis官方提供了mybatis-generator:mybatis逆向工程代码生成工具,用于简化 ...

  7. adb连接夜神模拟器与adb常用操作命令

    adb connect 127.0.0.1:62001 adb kill-server 在关闭adb服务后,要使用如下的命令启动adb服务. adb start-servermore than one ...

  8. 并发、并行、同步、异步、全局解释锁GIL、同步锁Lock、死锁、递归锁、同步对象/条件、信号量、队列、生产者消费者、多进程模块、进程的调用、Process类、

    并发:是指系统具有处理多个任务/动作的能力. 并行:是指系统具有同时处理多个任务/动作的能力. 并行是并发的子集. 同步:当进程执行到一个IO(等待外部数据)的时候. 异步:当进程执行到一个IO不等到 ...

  9. USACO Stock Market

    洛谷 P2938 [USACO09FEB]股票市场Stock Market 洛谷传送门 JDOJ 2625: USACO 2009 Feb Gold 2.Stock Market JDOJ传送门 题目 ...

  10. LG5357 「模板」AC自动机(二次加强版) AC自动机+fail树

    问题描述 LG5357 题解 不是fail树的AC自动机复杂度是假的. 把AC自动机搞出来,建立Trie树,树上爆搜一遍就好了. \(\mathrm{Code}\) #include<bits/ ...