ES6迭代器
说起迭代器, 那就要先了解迭代模式
迭代模式: 提供一种方法可以顺序获得聚合对象中的各个元素, 是一种最简单,
也是最常见的设计模式,它可以让用户通过特定的接口寻访集合中的每一个元素
而不用了解底层的实现。
迭代器 : 依照迭代模式的思想而实现,
分为内部迭代器和外部迭代器,
内部迭代器: 本身是函数, 该函数内部定义好迭代规则,完全接手整个迭代过程
外部只需要一次初始调用,如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迭代器的更多相关文章
- ES6 迭代器和生成器
设计为了更高效的数据处理,避免过多for循环嵌套(代码复杂度,跟踪多个循环变量) 1. 迭代器: 为迭代过程设计的接口 所有的迭代器对象都有next()方法,每次调用都返回一个结果对象,对象有两个属性 ...
- ES6 迭代器
Iterator Iterator 是 ES6 引入的一种新的遍历机制,迭代器有两个核心概念: 迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为Symbol.itera ...
- ES6迭代器和生成器
一.迭代器 JavaScript 原有的表示"集合"的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就需要一种统一的接口机制,来处理 ...
- 切图崽的自我修养-[ES6] 迭代器Iterator浅析
Iterator 这真是毅种循环 Iterator不是array,也不是set,不是map, 它不是一个实体,而是一种访问机制,是一个用来访问某个对象的接口规范,为各种不同的数据结构提供统一的访问机制 ...
- ES6中的迭代器(Iterator)和生成器(Generator)
前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简 ...
- ES6中的迭代器(Iterator)和生成器(Generator)(一)
用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作 ...
- ES6入门十:iterator迭代器
迭代模式 ES6迭代器标准化接口 迭代循环 自定义迭代器 迭代器消耗 一.迭代模式 迭代模式中,通常有一个包含某种数据集合的对象.该数据可能存在一个复杂数据结构内部,而要提供一种简单的方法能够访问数据 ...
- ES6生成器与迭代器
ES6迭代器的一个例子 function run(taskDef) { var task = taskDef(); var result = task.next(); // 递归执行迭代 functi ...
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
随机推荐
- IDEA结合Maven的profile构建不同开发环境(SpringBoot)
一.概述 在开发过程中,我们的项目会存在不同的开发环境,比如开发环境.生产环境.测试环境,而我们的项目在不同的环境中有些配置也是不一样的,比如数据源配置.日志文件配置等,假如我们每次将软件部署到不同的 ...
- 使用IDEA创建Maven项目和Maven使用入门(配图详解)
本文详解的讲解了使用IDEA创建Maven项目,及Maven的基础入门. 1.打开IDEA,右上角选择File->New->Project 2.如图中所示选择Maven(可按自己所需添加, ...
- django学习-数据库配置-创建模型
数据库配置 在mysite/settings.py中,包含了django项目设置的python模块 通常,这个配置文件使用SQLite作为默认数据库.如果你不熟悉数据库,或者只是想尝试下django, ...
- [笔记] nice-upload 与 nice-static-server
1.request 支持流模式,管道流pipe,抓取图片并保存就很方便了 request('https://s.gravatar.com/avatar/184a1f14c759795b94ae1d01 ...
- spring cloud fegin传递request header
本文链接:https://blog.csdn.net/zhongzunfa/article/details/82791903 1.概述 今天一个朋友, 遇到一个如何在使用spring cloud fe ...
- 【redis】安装redis
1.什么是redis? 非关系型数据库 2.为什么用redis? 非关系型数据库的一些优势,我这里用于缓存 3.怎么用redis? 安装,配置,用 4.怎么安装? 下载:http://download ...
- 复杂模拟 | 1017 模拟N个顾客M个柜台进行排队
#include <stdio.h> #include <memory.h> #include <math.h> #include <string> # ...
- DP问题(1) : hdu 2577
题目转自hdu 2577,题目传送门 题目大意: 现给你n个区分大小写的字符串,大小写可用Caps Lock和shift切换(学过计算机的都知道) 但是有一点需要注意(shift是切换,若现在是大写锁 ...
- [LeetCode] 287. Find the Duplicate Number 寻找重复数
Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), pro ...
- windows7 - windows10开启802.1x md5质询
(win7 win10通用)20190324 全程不需重启 注:如果导入后没有看到md5,那得去注册表看看是否真的有键值(我的一开始提示成功,但是注册表里看不到,后来发现复制时候多了一些不可见的字 ...