【JavaScript】具有 iterable 接口的数据结构

具有 iterable 接口的数据结构指的是可以通过迭代器(Iterator)访问其成员的数据结构 。在 JavaScript 中,具有 iterable 接口的数据结构包括数组(Array)字符串(String)SetMap 等。这些数据结构可以使用 for...of 循环进行遍历,也可以通过解构赋值、扩展操作符等方式获取其元素。

一个对象要成为 iterable ,必须实现一个名为 Symbol.iterator 的方法,该方法返回一个迭代器对象 。迭代器对象需要包含一个 next() 方法,每次调用 next() 方法都会返回一个包含 valuedone 属性的对象:

  • value 表示迭代器返回的当前元素的值。
  • done 表示迭代器是否已经迭代完所有元素,如果为 true,则表示迭代结束。

例如,一个简单的 iterable 对象示例可以是:

javascript 复制代码
let iterableObj = {
  [Symbol.iterator]() {
    let index = 0;
    return {
      next() {
        if (index < 3) {
          return { value: index++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (let item of iterableObj) {
  console.log(item); // 输出 0, 1, 2
}

在这个例子中,iterableObj 对象实现了 Symbol.iterator 方法,返回一个迭代器对象,通过 for...of 循环遍历时,依次输出迭代器返回的值。

因此,具有 iterable 接口的数据结构是指支持迭代器协议,可以通过 for...of 循环或其他遍历方法遍历其成员的数据结构。

相关推荐
一张假钞3 天前
Hexo Next主题集成百度统计
hexo·next
苟非10 天前
暂停一下,给Next.js项目配置一下ESLint(Next+tailwind项目)
开发语言·前端·javascript·next
氦客2 个月前
浅谈华为 HarmonyOS Next
android·华为·移动开发·harmonyos·next·概念·万物互联
白雾茫茫丶7 个月前
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
react·next·tailwindcss·nextui
诗雅颂10 个月前
常见的Web前端开发框架推荐
javascript·前端框架·vue·ts·nuxt·angular·next
_Jyann_1 年前
ES6 Iterator 和 for...of 循环
es6·iterator·symbol.iterator·for...of循环
少莫千华1 年前
【JS】一道解构面试题
javascript·symbol·iterator·yield·next·object.values