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

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

发布时间 - 2026-01-11 00:45:08 点击率：次

本文实例讲述了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 ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  }
}
var it = makeIterator(['a', 'b']);
console.log(it.next());//{ value: 'a', done: false }
console.log(it.next());//{ value: 'b', done: false }
console.log(it.next());//{ value: undefined, done: true }

③ Iterator接口返回的遍历器，原生具备next方法。

> 有三类数据结构原生具备Iterator接口：数组、类似数组的对象、Set和Map结构。

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中非常实用的新特性介绍 # JavaScript ES6的新特性使用新方法定义Class # JavaScript中的Reflect对象详解(ES6新特性) # 深入浅出ES6新特性之函数默认参数和箭头函数 # 简单谈谈ES6的六个小特性 # ES6新特性之Symbol类型用法分析 # ES6(ECMAScript 6)新特性之模板字符串用法分析 # ES6新特性之变量和字符串用法示例 # ES6新特性之模块Module用法详解 # ES6新特性之字符串的扩展实例分析 # ES6新特性六：promise对象实例详解 # ES6新特性七：数组的扩充详解 # ES6新特性八：async函数用法实例详解 # ES6新特性之类(Class)和继承(Extends)相关概念与用法分析 # 让微信小程序支持ES6中Promise特性的方法详解 # ES6新特性：使用export和import实现模块化详解 # es6新特性之 class 基本用法解析 # ES6 13个新特性总结 # 遍历 # 数据结构 # 就可以 # 有一个 # 都是 # 是一个 # 也不 # 是一种 # 一是 # 还会 # 开了 # 这样做 # 给大家 # 自定义 # 千万别 # 提供一个 # 内建 # 方法来 # 所述 # 三类

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：《文旅通》注册账号方法

下一篇：Linux文件复制命令cp实用技巧

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：《文旅通》注册账号方法

下一篇：Linux文件复制命令cp实用技巧