ES6新特性二：Iterator(遍历器)和for-of循环详解

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

本文实例讲述了ES6新特性之Iterator(遍历器)和for-of循环。分享给大家供大家参考，具体如下：

1. 遍历数组

for-of工作原理：迭代器有一个next方法，for循环会不断调用这个iterator.next方法来获取下一个值,直到返回值中的 done属性为true的时候结束循环。

① 在ES6之前

var arr = [1,2,3,4,5,6];
arr.name = 'a';
for (var index = 0; index < arr.length; index++) {
  console.log(arr[index]);
}
arr.forEach(function (value) { //ES5 内建的forEach方法 缺陷：无法使用break 中断 ，也不能使用return 语句返回到外层函数
  console.log(value);
});

结果都是：1,2,3,4,5,6

② 用 for-in ：作用于数组的 forfor -in 循环体除了遍历数组元素外,还会遍历自定义属性。比如数组有一个可枚举属性arr.a,循环将额外执行一次

for (var index in arr) { // 千万别这样做
 console.log(arr[index]);
}

结果：1,2,3,4,5,6，a

for-in 是为普通对象设计的，赋值给index的值不是实际的数字1、2，而是字符串‘1'，‘2'

var b = 0;
for (var index in arr) {
 b = b+ index;
 console.log(b)
}

结果：00，001，0012，00123，001234，0012345，0012345name

③ 使用 for-of：避开了for-in 的所有缺陷，可以正确响应 break、return 语句

for(var value of arr){
  console.log(value)
}

结果：1,2,3,4,5,6

2.for-of 循环便利其他集合

① 遍历Set

var words = 'a';
var s = new Set();
s.add("a");
s.add(1);
for(var word of s){
  console.log(word);
}

结果：a，1

② 遍历Map

var map = new Map();
map.set('a',1);
map.set('b',2);
map.set('c',3);
map.set('d',4);
for(var [key,value] of map){
  console.log(key+':'+value);
}

结果：a：1，b：2，c：3，d：4

3. Iterator（遍历器）

① 遍历器（Iterator）是一种接口规格，任何对象只要部署这个接口，就可以完成遍历操作。它的作用有两个，一是为各种数据结构，提供一个统一的、简便的接口，二是使得对象的属性能够按某种次序排列。

② 遍历器的原理：遍历器提供了一个指针，指向当前对象的某个属性，使用next方法，就可以将指针移动到下一个属性。next方法返回一个包含value和done两个属性的对象。其中，value属性是当前遍历位置的值，done属性是一个布尔值，表示遍历是否结束。

//模拟遍历器原理
function makeIterator(array){
  var nextIndex = 0;
  return {
    next: function(){
      return nextIndex < array.length "htmlcode">

var map = new Map();
console.log(map[Symbol.iterator] === map.entries)//true
var arr = new Array();
console.log(arr[Symbol.iterator] === arr.values)//true
var set = new Set();
console.log(set[Symbol.iterator] === set.values)//true




> 其他数据结构（主要是对象）如果需要Iterator接口,都需要自己部署。


var students = {}
students[Symbol.iterator] = function() {
 let index = 1;
 return {
  next() {
   return {done: index>10, value: index++}
  }
 }
}
for(var i of students) {
 console.log(i);
}//




希望本文所述对大家ECMAScript程序设计有所帮助。

ES6,新特性,Iterator(遍历器),for-of循环

标签：

ES6,新特性,Iterator(遍历器),for-of循环

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“ES6新特性二：Iterator(遍历器)和for-of循环详解”

暂无ES6新特性二：Iterator(遍历器)和for-of循环详解的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

ES6新特性二：Iterator(遍历器)和for-of循环详解

ES6,新特性,Iterator(遍历器),for-of循环

微信小程序 setData的使用方法详解

微信小程序中form 表单提交和取值实例详解

评论“ES6新特性二：Iterator(遍历器)和for-of循环详解”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接