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

作者：半夏时间：2026-10-22 12:33:37浏览：341

本文深入解析ES6中Iterator迭代器接口的工作原理及其与for...of循环的配合机制。详细列举了Array、Map、Set等原生可遍历数据结构，对比了for...of与forEach、for...in在跳出循环、键名处理上的差异，并展示了如何在普通对象中部署Iterator接口，最后通过斐波那契数列等实例说明其实际应用。

迭代器概念与原理

一、什么是迭代器？

生成器概念在Java、Python等编程语言中早已存在，ES6也将其引入到了JavaScript中。Iterator（迭代器）允许我们无需手动初始化集合或索引变量，而是通过迭代器对象的 next 方法来获取集合中的下一项值，这种方式更偏向于程序化的控制流程。

迭代器本质上是一个具有特定接口的对象，它包含一个 next() 方法。调用该方法会返回一个包含两个属性的对象：value 和 done。其中，value 表示当前迭代位置的值，done 是一个布尔值，用于指示迭代是否结束。当 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()

for...of 循环的优势分析

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

总结与展望

四、结语

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13