怎么通过HTML的Symbol.iterator为自定义结构实现for...of遍历能力-html教程-PHP中文网

因为for...of要求对象满足可迭代协议：symbol.iterator必须是返回全新迭代器对象的无参函数，该迭代器需有next()方法并返回{value,done}结构；常见错误是未实现next()或返回非迭代器对象。

怎么通过html的symbol.iterator为自定义结构实现for...of遍历能力

为什么直接给对象加 `[Symbol.iterator]` 还是报错“is not iterable”

因为 for...of 只认「可迭代协议」的完整结构：必须返回一个符合迭代器协议的对象（即有 next() 方法，且返回 { value, done } 形式的对象），而不仅仅是挂一个函数。常见错误是只写了 [Symbol.iterator]() { return this; } 却没实现 next()，或者返回了普通对象而非迭代器对象。

实操建议：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

确保 [Symbol.iterator] 是一个无参函数，且每次调用都返回**全新**的迭代器对象（否则多次 for...of 会共享状态，第二次遍历可能立即结束）
迭代器对象必须有 next() 方法，不能是箭头函数（需访问闭包状态）
不要在 next() 中抛错来终止，而是返回 { value: undefined, done: true }

如何为类数组结构（如自定义 List）实现 `[Symbol.iterator]`

典型场景：你封装了一个 List 类，内部用数组存数据，但想让实例能被 for...of 直接遍历，而不是暴露 .items。

实操建议：

在类中定义 [Symbol.iterator]() 方法，内部用 let index = 0 和闭包捕获当前实例的 this.items
返回对象包含 next() { ... }，每次调用推进 index，检查越界后设 done: true
避免直接返回 this.items[Symbol.iterator]() —— 虽然可行，但会暴露底层数组，失去封装性；若需复用，可用 return this.items[Symbol.iterator]();，但要确保 this.items 确实存在且是可迭代的

class List {
  constructor(items) {
    this.items = items || [];
  }
  [Symbol.iterator]() {
    let index = 0;
    const items = this.items;
    return {
      next() {
        if (index 

<h3>遇到 <code>TypeError: xxx is not a function</code> 怎么定位</h3>
<p>这个错误通常出现在 <code>for...of</code> 尝试调用 <code>[Symbol.iterator]</code> 返回值的 <code>next()</code> 时，发现它不是函数 —— 比如你误把 <code>next</code> 写成 <code>Next</code>，或忘了用 <code>function</code> / 箭头函数声明，导致属性值是 <code>undefined</code>。</p>
<p>实操建议：</p>

在浏览器控制台手动执行 obj[Symbol.iterator]().next，看是否为函数；不是？说明迭代器对象没正确定义 next
检查是否用了 getter 但没加括号：比如写成 get next() { ... } 却没在 return 里调用，应改为 next() { ... }
注意严格模式下，obj[Symbol.iterator]() 返回 null 或 undefined 也会触发该错误（for...of 会尝试调用 .next()）