首页 / ES6 / ES6迭代器和for.of循环（详细教程）

ES6迭代器和for.of循环（详细教程）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ES6迭代器和for.of循环（详细教程），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8243字，纯文字阅读大概需要12分钟。

内容图文

这篇文章主要介绍了ES6 迭代器(Iterator)和 for.of循环使用方法学习总结,现在分享给大家，也给大家做个参考。

一、什么是迭代器？

生成器概念在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 消费的原生数据结构

Array
Map
Set
String
TypedArray（一种通用的固定长度缓冲区类型，允许读取缓冲区中的二进制数据）
函数中的 arguments 对象
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）其它场合

for..of
Array.from
Map()、Set()、WeakMap()、WeakSet()
Promise.all()
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]);
};

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

那么，for...of 有哪些显著的优点呢？

有着同 for...in 一样的简洁语法，但是没有 for...in 那些缺点
不同于 forEach 方法，它可以与 break、continue 和 return 配合使用
提供了遍历所有数据结构的统一操作接口

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、任务队列迭代器

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

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

上面是我整理给大家的，希望今后会对大家有帮助。

在vue中如何实现微信分享朋友圈,发送朋友

详解如何实现vuex（详细教程）

通过vue.js实现微信支付

以上就是ES6 迭代器和 for.of循环（详细教程）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的ES6迭代器和for.of循环（详细教程）全部内容，希望文章能够帮你解决ES6迭代器和for.of循环（详细教程）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/287809.html

来源：【匿名】

【上一篇】ES6使用注意事项有哪些【下一篇】ES6系列之声明变量let与const

更多 ►

【ES6迭代器和for.of循环（详细教程）】教程文章相关的互联网学习教程文章

ES6中的迭代器(Iterator)和生成器(Generator)【代码】

用循环语句迭代数据时，必须要初始化一个变量来记录每一次迭代在数据集合中的位置，而在许多编程语言中，已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素　　迭代器的使用可以极大地简化数据操作，于是ES6也向JS中添加了这个迭代器特性。新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现，这个新特性对于高效的数据处理而言是不可或缺的，在语言的其他特性中也都有迭代器的身影：新的for-o...

ES6 迭代器【代码】

IteratorIterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念：迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。迭代过程迭代的过程如下：通过 Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置随后通过 next 方法进行向下迭代指向下一个位置， next 方法会返回当前位置的对象，...

详解ES6语法之可迭代协议和迭代器协议

ECMAScript 2015的几个补充，并不是新的内置或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。有两个协议：可迭代协议和迭代器协议。可迭代协议可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如（定义）在一个 for..of 结构中什么值可以被循环（得到）。一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) 。 Iterator 接口的目的，就是为...

ES6中迭代器的原理与可迭代对象的介绍（附示例）

本篇文章给大家带来的内容是关于ES6中迭代器的原理与可迭代对象的介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。ES6 新的数组方法、集合、for-of 循环、展开运算符（...）甚至异步编程都依赖于迭代器（Iterator ）实现。本文会详解 ES6 的迭代器与生成器，并进一步挖掘可迭代对象的内部原理与使用方法一、迭代器的原理在编程语言中处理数组或集合时，使用循环语句必须要初始化一个变量记录迭代位...

详细解读ES6语法中可迭代协议

这篇文章主要介绍了详解ES6语法之可迭代协议和迭代器协议,现在分享给大家，也给大家做个参考。ECMAScript 2015的几个补充，并不是新的内置或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。有两个协议：可迭代协议和迭代器协议。可迭代协议可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如（定义）在一个 for..of 结构中什么值可以被循环（得到）。一些内置类型都是内置的可迭代对象并且有默认的迭...

ES6迭代器和for.of循环（详细教程）

这篇文章主要介绍了ES6 迭代器(Iterator)和 for.of循环使用方法学习总结,现在分享给大家，也给大家做个参考。一、什么是迭代器？生成器概念在Java，Python等语言中都是具备的，ES6也添加到了JavaScript中。Iterator可以使我们不需要初始化集合，以及索引的变量，而是使用迭代器对象的 next 方法，返回集合的下一项的值，偏向程序化。迭代器是带有特殊接口的对象。含有一个next()方法，调用返回一个包含两个属性的对象，分别是value...

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

本文主要和大家介绍了ES6 迭代器(Iterator)和 for.of循环使用方法学习总结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。一、什么是迭代器？生成器概念在Java，Python等语言中都是具备的，ES6也添加到了JavaScript中。Iterator可以使我们不需要初始化集合，以及索引的变量，而是使用迭代器对象的 next 方法，返回集合的下一项的值，偏向程序化。迭代器是带有特殊接口的对象。含...

ES6可迭代协议和迭代器协议详解

本文主要介绍了详解ES6语法之可迭代协议和迭代器协议,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。ECMAScript 2015的几个补充，并不是新的内置或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。有两个协议：可迭代协议和迭代器协议。可迭代协议可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如（定义）在一个 for..of 结构中什么值可以被循环...

JavaScriptES6的迭代器与生成器介绍

本篇文章主要介绍了深入理解ES6的迭代器与生成器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧本文介绍了深入理解ES6的迭代器与生成器，分享给大家，具体如下：循环语句的问题var colors = ["red", "green", "blue"]; for(var i=0; i<colors.length; i++){console.log(colors[i]); }在ES6之前，这种标准的for循环，通过变量来跟踪数组的索引。如果多个循环嵌套就需要追踪多个变量，代码复杂度会大...

ES6中的迭代器、Generator函数及Generator函数的异步操作方法【图】

最近在写RN相关的东西，其中涉及到了redux-saga ，saga的实现原理就是ES6中的Generator函数，而Generator函数又和迭代器有着密不可分的关系。所以本篇博客先学习总结了iterator相关的东西，然后又介绍了Generator相关的内容，最后介绍了使用Generator进行异步编程。本篇博客所涉及的示例使用TypeScript语言编写，当然所涉及的特性是基于ES6规范的，使用TS语言不影响来阐述和总结ES6的相关特性。下篇博客准备系统梳理一下saga相关的...

ES6 迭代器与可迭代对象的实现

ES6 新的数组方法、集合、for-of 循环、展开运算符（...）甚至异步编程都依赖于迭代器（Iterator ）实现。本文会详解 ES6 的迭代器与生成器，并进一步挖掘可迭代对象的内部原理与使用方法一、迭代器的原理在编程语言中处理数组或集合时，使用循环语句必须要初始化一个变量记录迭代位置，而程序化地使用迭代器可以简化这种数据操作如何设计一个迭代器呢？迭代器的本身是一个对象，这个对象有 next( ) 方法返回结果对象，这个结果对...

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

一、什么是迭代器？生成器概念在Java，Python等语言中都是具备的，ES6也添加到了JavaScript中。Iterator可以使我们不需要初始化集合，以及索引的变量，而是使用迭代器对象的 next 方法，返回集合的下一项的值，偏向程序化。迭代器是带有特殊接口的对象。含有一个next()方法，调用返回一个包含两个属性的对象，分别是value和done，value表示当前位置的值，done表示是否迭代完，当为true的时候，调用next就无效了。 ES5中遍历集合通...

深入理解ES6的迭代器与生成器

本文介绍了深入理解ES6的迭代器与生成器，分享给大家，具体如下：循环语句的问题var colors = ["red", "green", "blue"]; for(var i=0; i<colors.length; i++){console.log(colors[i]); }在ES6之前，这种标准的for循环，通过变量来跟踪数组的索引。如果多个循环嵌套就需要追踪多个变量，代码复杂度会大大增加，也容易产生错用循环变量的bug。迭代器的出现旨在消除这种复杂性并减少循环中的错误。什么是迭代器我们先感受一下用ES5...

详谈ES6中的迭代器(Iterator)和生成器(Generator)

前面的话用循环语句迭代数据时，必须要初始化一个变量来记录每一次迭代在数据集合中的位置，而在许多编程语言中，已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素迭代器的使用可以极大地简化数据操作，于是ES6也向JS中添加了这个迭代器特性。新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现，这个新特性对于高效的数据处理而言是不可或缺的，在语言的其他特性中也都有迭代器的身影：新的...

javascript – ES6反向使用for..of迭代一个数组,我错过了规范中的内容吗？【代码】

在ES6中,我们现在有iterators和for..of来迭代它们.我们有一些arrays的内置插件;特别是keys,values和entries. 这些方法允许人们执行通常执行的大部分迭代.但是,反向迭代怎么样？这也是一个非常常见的任务,我在spec中没有看到任何具体的内容吗？或许我错过了？好吧,我们有Array.prototype.reverse但是我不一定想要在适当的位置反转一个大型数组,然后在完成时再次反转它.我也不想使用Array.prototype.slice来制作一个临时浅拷贝并反转...

ES6 - 相关标签

ES6 - 最热教程

express中使用es6的方法介绍（详细）详解JavaScript ES6中的模板字符串微信小程序ES6——箭头函数中的this问题 Vue开发中可以使用的ES6新特征 ES6中全新的数字方法总结（必看）React中ES5与ES6写法的区别总结 ES6新数据结构Map功能与用法示例 ES6 javascript中class类的get与set用法...JS实现集合的交集、补集、差集、去重运...怎样让VueEs6解析为Es5语法

首页 / ES6 / ES6迭代器和for.of循环（详细教程）

ES6迭代器和for.of循环（详细教程）

内容导读

内容图文

内容总结

内容备注

内容手机端

【ES6迭代器和for.of循环（详细教程）】教程文章相关的互联网学习教程文章

ES6中的迭代器(Iterator)和生成器(Generator)【代码】

ES6 迭代器【代码】

详解ES6语法之可迭代协议和迭代器协议

ES6中迭代器的原理与可迭代对象的介绍（附示例）

详细解读ES6语法中可迭代协议

ES6迭代器和for.of循环（详细教程）

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

ES6可迭代协议和迭代器协议详解

JavaScriptES6的迭代器与生成器介绍

ES6中的迭代器、Generator函数及Generator函数的异步操作方法【图】

ES6 迭代器与可迭代对象的实现

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

深入理解ES6的迭代器与生成器

详谈ES6中的迭代器(Iterator)和生成器(Generator)

javascript – ES6反向使用for..of迭代一个数组,我错过了规范中的内容吗？【代码】

ES6 - 相关标签

循环 - 相关标签

ES6 - 最新教程

ES6 - 最热教程