Iterator

Iterator 是 ES6 引入的一种新的遍历机制,迭代器有两个核心概念:

  • 迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为Symbol.iterator 的方法来实现。
  • 迭代器是用于遍历数据结构元素的指针(如数据库中的游标)。

迭代过程

迭代的过程如下:

  • 通过 Symbol.iterator 创建一个迭代器,指向当前数据结构的起始位置
  • 随后通过 next 方法进行向下迭代指向下一个位置, next 方法会返回当前位置的对象,对象包含了 value 和 done 两个属性, value 是当前属性的值, done 用于判断是否遍历结束
  • 当 done 为 true 时则遍历结束

下面通过一个简单的例子进行说明:

const items = ["zero", "one", "two"];
const it = items[Symbol.iterator](); console.log(it.next());//{value: "zero", done: false}
console.log(it.next());//{value: "one", done: false}
console.log(it.next());//{value: "two", done: false}
console.log(it.next());//{value: undefined, done: true}

上面的例子,首先创建一个数组,然后通过 Symbol.iterator 方法创建一个迭代器,之后不断的调用 next 方法对数组内部项进行访问,当属性 done 为 true 时访问结束。

迭代器是协议(使用它们的规则)的一部分,用于迭代。该协议的一个关键特性就是它是顺序的:迭代器一次返回一个值。这意味着如果可迭代数据结构是非线性的(例如树),迭代将会使其线性化。

可迭代的数据结构

以下是可迭代的值:

  • Array
  • String
  • Map
  • Set
  • Dom元素(正在进行中)

我们将使用 for...of 循环(参见下文的 for...of 循环)对数据结构进行迭代。

Array

数组 ( Array ) 和类型数组 ( TypedArray ) 他们是可迭代的。

for (let item of ["zero", "one", "two"]) {
console.log(item);
}
// output:
// zero
// one
// two

String

字符串是可迭代的,单他们遍历的是 Unicode 码,每个码可能包含一个到两个的 Javascript 字符。

for (const c of 'hello') {
console.log(c);
}
// h,e,l,l,o

Map

Map 主要是迭代它们的 entries ,每个 entry 都会被编码为 [key, value] 的项, entries 是以确定的形势进行迭代,其顺序是与添加的顺序相同。

const map = new Map();
map.set(0, "zero");
map.set(1, "one"); for (let item of map) {
console.log(item);
}
// [0, "zero"]
// [1, "one"]

注意: WeakMaps 不可迭代

Set

Set 是对其元素进行迭代,迭代的顺序与其添加的顺序相同

const set = new Set();
set.add("zero");
set.add("one"); for (let item of set) {
console.log(item);
}
// zero
// one

注意: WeakSets 不可迭代

arguments

arguments 目前在 ES6 中使用越来越少,但也是可遍历的

function args() {
for (let item of arguments) {
console.log(item);
}
}
args("zero", "one");
// zero
// one

普通对象不可迭代

普通对象是由 object 创建的,不可迭代:

// {} is not iterable
for (let item of {}) {
console.log(item);
}

for...of循环

for...of 是 ES6 新引入的循环,用于替代 for..in 和 forEach() ,并且支持新的迭代协议。它可用于迭代常规的数据类型,如 Array 、 String 、 Map 和 Set 等等。

迭代常规数据类型

Array

const nums = ["zero", "one", "two"];

for (let num of nums) {
console.log(num);//"zero", "one", "two"
}
// TypedArray
const typedArray1 = new Int8Array(6);
typedArray1[0] = 10;
typedArray1[1] = 11; for (let item of typedArray1) {
console.log(item);//10,11,0,0,0,0
}

String

const str = "zero";

for (let item of str) {
console.log(item);//z,e,r,o
}

Map

let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
myMap.set(2, "two"); // 遍历 key 和 value
for (let [key, value] of myMap) {
console.log(key + " = " + value);//0 = zero,1 = one,2 = two
}
for (let [key, value] of myMap.entries()) {
console.log(key + " = " + value);//0 = zero,1 = one,2 = two
} // 只遍历 key
for (let key of myMap.keys()) {
console.log(key);//0,1,2
} // 只遍历 value
for (let value of myMap.values()) {
console.log(value);//zero,one,two
}

Set

let mySet = new Set();
mySet.add("zero");
mySet.add("one");
mySet.add("two"); // 遍历整个 set
for (let item of mySet) {
console.log(item);//zero,one,two
} // 只遍历 key 值
for (let key of mySet.keys()) {
console.log(key);//zero,one,two
} // 只遍历 value
for (let value of mySet.values()) {
console.log(value);//zero,one,two
} // 遍历 key 和 value ,两者会相等
for (let [key, value] of mySet.entries()) {
console.log(key + " = " + value);//zero=zero,one=one,two=two
}

可迭代的数据结构

of 操作数必须是可迭代,这意味着如果是普通对象则无法进行迭代。如果数据结构类似于数组的形式,则可以借助 Array.from() 方法进行转换迭代。

const arrayLink = {length: 2, 0: "zero", 1: "one"};//创建一个类数组对象,可迭代,必须有length属性
// 报 TypeError 异常
for (let item of arrayLink) {
console.log(item);
} // 正常运行
for (let item of Array.from(arrayLink)) {
console.log(item);//zero,one
}
console.log(Array.from(arrayLink) instanceof Array);//true

let 、const 和 var 用于 for..of

如果使用 let 和 const ,每次迭代将会创建一个新的存储空间,这可以保证作用域在迭代的内部。

const nums = ["zero", "one", "two"];

for (const num of nums) {
console.log(num);
}
// 报 ReferenceError
console.log(num);

从上面的例子我们看到,最后一句会报异常,原因 num 的作用域只在循环体内部,外部无效,具体可查阅 let 与 const 章节。使用 var 则不会出现上述情况,因为 var 会作用于全局,迭代将不会每次都创建一个新的存储空间。

const nums = ["zero", "one", "two"];

for (var num of nums) {
console.log(num);
}
console.log(num);// two

ES6 迭代器的更多相关文章

  1. ES6 迭代器和生成器

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

  2. ES6迭代器

    说起迭代器, 那就要先了解迭代模式 迭代模式: 提供一种方法可以顺序获得聚合对象中的各个元素, 是一种最简单, 也是最常见的设计模式,它可以让用户通过特定的接口寻访集合中的每一个元素 而不用了解底层的 ...

  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内核剖析(五)Linux内核的构建过程

    参考 一次实验引发的故事 – kernel build system探索—vmlinux是如何炼成的– kernel makefile 深度探索Linux操作系统:系统构建和原理解析.pdf 问题 在 ...

  2. Atitit s2018.5 s5 doc list on com pc.docx  Acc 112237553.docx Acc baidu netdisk.docx Acc csdn 18821766710 attilax main num.docx Atiitt put post 工具 开发工具dev tool test.docx Atiitt 腾讯图像分类相册管家.docx

    Atitit s2018.5 s5  doc list on com pc.docx  Acc  112237553.docx Acc baidu netdisk.docx Acc csdn 1882 ...

  3. understanding-raid-setup-in-linux/

    https://www.tecmint.com/understanding-raid-setup-in-linux/ Part 1:Introduction to RAID, Concepts of ...

  4. Windows 10 Manager v2.3.3

    Windows 10 Manager 是专门用于微软 Windows10 的集所有功能于一身的实用工具,它包括了40多个不同的实用程序来优化.调整.清理.加快和修复您的 Windows 10,可以让你 ...

  5. dma子系统 dmac

    DMA子是CPU中实现数据传输的一种方式,CPU配置好DMA控制器之后发起数据传输,CPU本身不参与数据传输的动作中去. DMA种类: 分为外设DMA和DMA控制器.其中外设DMA实现的为特定的外设与 ...

  6. 怎么让self.view的Y从navigationBar下面开始计算

    原文地址 http://blog.sina.com.cn/s/blog_1410870560102wu9a.html 在iOS 7中,苹果引入了一个新的属性,叫做[UIViewController s ...

  7. Attacks for RL

    1. http://rll.berkeley.edu/adversarial/   Adversarial Attacks on Neural Network Policies 就是对test时候的p ...

  8. Android学习Scroller(五)——具体解释Scroller调用过程以及View的重绘

    PS: 该篇博客已经deprecated,不再维护.详情请參见  站在源代码的肩膀上全解Scroller工作机制  http://blog.csdn.net/lfdfhl/article/detail ...

  9. LeetCode - Subarray sum equals k

    Given an array of integers and an integer k, you need to find the total number of continuous subarra ...

  10. Linux下的搜索查找命令的详解(whereis)

    2.whereis  和find相比,whereis查找的速度非常快,这是因为linux系统会将 系统内的所有文件都记录在一个数据库文件中,当使用whereis和下面即将介绍的locate时,会从数据 ...