当前位置：首页 > JavaScript

js实现forof

2026-02-01 06:23:55JavaScript

for...of 循环的实现原理

for...of 循环是 ES6 引入的遍历可迭代对象的语法糖。其底层依赖于迭代器协议（Iterator Protocol）。

实现自定义 for...of 行为

要使得对象可被 for...of 遍历，需要实现 [Symbol.iterator] 方法：

const iterableObject = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step <= 5) {
          return { value: step, done: false };
        }
        return { done: true };
      }
    };
  }
};

for (const value of iterableObject) {
  console.log(value); // 输出 1 2 3 4 5
}

手动实现 for...of 的等价功能

不使用 for...of 语法，手动实现相同功能：

function customForOf(iterable, callback) {
  const iterator = iterable[Symbol.iterator]();
  let result = iterator.next();

  while (!result.done) {
    callback(result.value);
    result = iterator.next();
  }
}

const arr = [1, 2, 3];
customForOf(arr, value => console.log(value)); // 输出 1 2 3

常见可迭代对象

以下对象原生支持 for...of：

Array
String
Map
Set
TypedArray
NodeList (DOM 集合)
arguments 对象

与 for...in 的区别

for...of 遍历值，for...in 遍历键：

const arr = ['a', 'b', 'c'];

// for...of 输出值
for (const value of arr) {
  console.log(value); // 'a', 'b', 'c'
}

// for...in 输出索引
for (const index in arr) {
  console.log(index); // '0', '1', '2'
}

提前终止迭代

迭代器可以实现 return() 方法响应 break 或异常：

js实现forof

const iterable = {
  [Symbol.iterator]() {
    return {
      next() { /* ... */ },
      return() {
        console.log('迭代提前终止');
        return { done: true };
      }
    };
  }
};