ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)


Posted in Javascript onFebruary 08, 2018

一、什么是迭代器?

生成器概念在Java,Python等语言中都是具备的,ES6也添加到了JavaScript中。Iterator可以使我们不需要初始化集合,以及索引的变量,而是使用迭代器对象的 next 方法,返回集合的下一项的值,偏向程序化。

迭代器是带有特殊接口的对象。含有一个next()方法,调用返回一个包含两个属性的对象,分别是value和done,value表示当前位置的值,done表示是否迭代完,当为true的时候,调用next就无效了。

ES5中遍历集合通常都是 for循环,数组还有 forEach 方法,对象就是 for-in,ES6 中又添加了 Map 和 Set,而迭代器可以统一处理所有集合数据的方法。迭代器是一个接口,只要你这个数据结构暴露了一个iterator的接口,那就可以完成迭代。ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费。

二、如何使用迭代器?

1、默认 Iterator 接口

数据结构只要部署了 Iterator 接口,我们就成这种数据结构为“可遍历”(Iterable)。ES6 规定,默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性,或者说,一个数据结构只要具有 Symbol.iterator 数据,就可以认为是“可遍历的”(iterable)。

可以供 for...of 消费的原生数据结构

  1. Array
  2. Map
  3. Set
  4. String
  5. TypedArray(一种通用的固定长度缓冲区类型,允许读取缓冲区中的二进制数据)
  6. 函数中的 arguments 对象
  7. NodeList 对象

可以看上面的原生数据结构中并没有对象(Object),为什么呢?

那是因为对象属性的遍历先后顺序是不确定的,需要开发者手动指定。本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口就等于部署一种线性变换。

做如下处理,可以使对象供 for...of 消费:

// code1
function Obj(value) {
  this.value = value;
  this.next = null;
}
Obj.prototype[Symbol.iterator] = function() {
  var iterator = {
    next: next
  };
  var current = this;
  function next() {
    if (current) {
      var value = current.value;
      current = current.next;
      return {
        done: false,
        value: value
      };
    } else {
      return {
        done: true
      };
    }
  }
  return iterator;
}
var one = new Obj(1);
var two = new Obj(2);
var three = new Obj(3);
one.next = two;
two.next = three;
for (var i of one) {
  console.log(i);
}
// 1
// 2
// 3

2、调用 Iterator 接口的场合

(1) 解构赋值

// code2
let set = new Set().add('a').add('b').add('c');
let [x,y] = set;
// x='a'; y='b'
let [first, ...rest] = set;
// first='a'; rest=['b','c'];

(2) 扩展运算符

// code3
// 例一
var str = 'hello';
[...str] // ['h','e','l','l','o']
// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']

(3)Generator 函数中的 yield* 表达式(下一章介绍)

// code4
let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
var iterator = generator();
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }

(4)其它场合

  1. for..of
  2. Array.from
  3. Map()、Set()、WeakMap()、WeakSet()
  4. Promise.all()
  5. Promise.race()

3、for...of 循环的优势

先看看,数组 forEach 方法的缺点:

// code5
myArray.forEach(function (value) {
 console.log(value);
});

这个写法的问题在于,无法中途跳出 forEach 循环,break 命令或 return 命令都不能生效。

再看看,对象 for...in 的循环的缺点:

for (var index in myArray) {
 console.log(myArray[index]);
};
  1. 数组的键名是数字,但是 for...in 循环是以字符串作为键名,“0”、“1”、“2”等。
  2. for...in 循环不仅可以遍历数字键名,还会遍历手动添加的期推荐,甚至包括原型链上的键。
  3. 某些情况下,for...in 循环会议任意顺序遍历键名
  4. for...in 遍历主要是为遍历对象而设计的,不适用于遍历数组

那么,for...of 有哪些显著的优点呢?

  1. 有着同 for...in 一样的简洁语法,但是没有 for...in 那些缺点
  2. 不同于 forEach 方法,它可以与 break、continue 和 return 配合使用
  3. 提供了遍历所有数据结构的统一操作接口
for (var n of fibonacci) {
 if (n > 1000) {
  break;
  console.log(n);
 }
}

4、各数据类型如何使用 for...of 循环?

(1)数组

for...of 循环允许遍历数组获得键值

var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
  console.log(a); // 0 1 2 3
}
for (let a of arr) {
  console.log(a); // a b c d
}

for...of 循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的值

let arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}
for (let i of arr) {
  console.log(i); // "3", "5", "7"
}

(2)Map 和 Set 结构

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit
var es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (var [name, value] of es6) {
  console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262

由上述的代码可以看出,for...of 循环遍历Map 和 Set 结构时,遍历的顺序是按照各个成员被添加进数据结构的顺序,Set 结构遍历时返回的是一个值,而 Map 结构遍历时返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。

(3)类数组对象

字符串

// 普通的字符串遍历
let str = "yuan";
for (let s of str) {
 console.log(s); // y u a n
}

// 遍历含有 32位 utf-16字符的字符串
for (let x of 'a\uD83D\uDC0A') {
 console.log(x);
}
// 'a'
// '\uD83D\uDC0A'

DOM NodeList 对象

let paras = document.querySelectorAll("p");
for (let p of paras) {
 p.classList.add("test");
}

arguments 对象

function printArgs() {
 for (let x of arguments) {
  console.log(x);
 }
}
printArgs("a", "n");
// "a"
// "n"

没有 Iterator 接口类数组对象的遍历处理

借用 Array.from 方法处理

let arrayLike = {
  length: 2,
  0 : 'a',
  1 : 'b'
};
// 报错
for (let x of arrayLike) {
  console.log(x);
}
// 正确
for (let x of Array.from(arrayLike)) {
  console.log(x);
}

(4)对象

对于普通对象,不能直接使用 for...of 遍历,否则会报错,必须部署了 Iterator 接口才能使用。如下两种方法部署:

// 方法一:使用 Object.keys 方法讲对象的键名生成一个数组
for (var key of Object.keys(someObject)) {
 console.log(key + ": " + someObject[key]);
}

// 方法二:使用Generator 函数将对象重新包装一下
function * entries(obj) {
  for (let key of Object.keys(obj)) {
    yield[key, obj[key]];
  }
}
for (let[key, value] of entries(obj)) {
  console.log(key, "->", value);
}
// a -> 1
// b -> 2
// c -> 3

三、迭代器应用实例

1、斐波那契数列

下面我们就使用迭代器来自定义自己的一个斐波那契数列组,我们直到斐波那契数列有两个运行前提,第一个前提是初始化的前两个数字为0,1,第二个前提是将来的每一个值都是前两个值的和。这样我们的目标就是每次都迭代输出一个新的值。

var it = { [Symbol.iterator]() {
    return this
  },
  n1: 0,
  n2: 1,
  next() {
    let temp1 = this.n1,
    temp2 = this.n2;
    [this.n1, this.n2] = [temp2, temp1 + temp2]
    return {
      value: temp1,
      done: false
    }
  }
}

for (var i = 0; i < 20; i++) {
  console.log(it.next())
}

// 
  "value": 0,
  "done": false
} {
  "value": 1,
  "done": false
} {
  "value": 1,
  "done": false
} {
  "value": 2,
  "done": false
} {
  "value": 3,
  "done": false
} {
  "value": 5,
  "done": false
}... {
  "value": 2584,
  "done": false
} {
  "value": 4181,
  "done": false
}

2、任务队列迭代器

我们可以定义一个任务队列,该队列初始化时为空,我们将待处理的任务传递后,传入数据进行处理。这样第一次传递的数据只会被任务1处理,第二次传递的只会被任务2处理… 代码如下:

var Task = {
  actions: [],
  [Symbol.iterator]() {
    var steps = this.actions.slice();
    return { [Symbol.iterator]() {
        return this;
      },
      next(...args) {
        if (steps.length > 0) {
          let res = steps.shift()(...args);
          return {
            value: res,
            done: false
          }
        } else {
          return {
            done: true
          }
        }
      }
    }
  }
}

Task.actions.push(function task1(...args) {
  console.log("任务一:相乘") return args.reduce(function(x, y) {
    return x * y
  })
},
function task2(...args) {
  console.log("任务二:相加") return args.reduce(function(x, y) {
    return x + y
  }) * 2
},
function task3(...args) {
  console.log("任务三:相减") return args.reduce(function(x, y) {
    return x - y
  })
});

var it = Task[Symbol.iterator]();
console.log(it.next(10, 100, 2));
console.log(it.next(20, 50, 100)) console.log(it.next(10, 2, 1))
 // 
任务一:相乘 {
  "value": 2000,
  "done": false
}任务二:相加 {
  "value": 340,
  "done": false
}任务三:相减 {
  "value": 7,
  "done": false
}

3、延迟执行

假设我们有一个数据表,我们想按大小顺序依次的获取数据,但是我们又不想提前给他排序,有可能我们根本就不去使用它,所以我们可以在第一次使用的时候再排序,做到延迟执行代码:

var table = {
  "d": 1,
  "b": 4,
  "c": 12,
  "a": 12
}
table[Symbol.iterator] = function() {
  var _this = this;
  var keys = null;
  var index = 0;

  return {
    next: function() {
      if (keys === null) {
        keys = Object.keys(_this).sort();
      }

      return {
        value: keys[index],
        done: index++>keys.length
      };
    }
  }
}

for (var a of table) {
  console.log(a)
} 
// a b c d

四、结语

本章内容,重点是明白 Iterator 接口的机制,以及 for...of 循环的使用方法。下一章介绍生成器函数 Generator 函数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
javascript事件冒泡实例分析
May 13 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 #Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 #Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 #Javascript
使用veloticy-ui生成文字动画效果
Feb 08 #Javascript
js中let和var定义变量的区别
Feb 08 #Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 #Javascript
VUE 使用中踩过的坑
Feb 08 #Javascript
You might like
Zend Guard一些常见问题解答
2008/09/11 PHP
php adodb介绍
2009/03/19 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
php页面防重复提交方法总结
2013/11/25 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
DOM精简教程
2006/10/03 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
python数组过滤实现方法
2015/07/27 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Python中logging日志库实例详解
2020/02/19 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
班级活动总结格式
2014/08/30 职场文书
学籍证明模板
2014/11/21 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
养成教育工作总结
2015/08/13 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书