【ES6】迭代器Iterator

JavaScript中的Iterator是一种特殊对象,它允许我们访问并操作对象的每一个元素。Iterator对象由具有next方法的对象创建,next方法返回一个包含两个属性的对象:value和done。value属性是当前元素的值,done属性是一个布尔值,当迭代结束时为true。

在JavaScript中,许多内建的集合对象,如数组、字符串、Map、Set等,都实现了迭代器接口。我们也可以自定义迭代器对象。

自定义迭代器

下面是一个简单的自定义迭代器的例子:

javascript 复制代码
function createIterator(array) {
  let nextIndex = 0;
  
  return {
    next: function() {
      return nextIndex < array.length ? { value: array[nextIndex++], done: false } : { done: true };
    }
  };
}

let iterator = createIterator([1, 2, 3]);

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { done: true }

在这个例子中,我们定义了一个createIterator函数,它接收一个数组作为参数,并返回一个具有next方法的对象。next方法在每次调用时返回一个包含当前元素和done属性的对象,当所有元素都被访问后,done属性将为true。

使用for...of循环

在ES6中引入的for...of循环可以用于遍历具有next方法的对象,如上面的自定义迭代器:

javascript 复制代码
let iterator = createIterator([1, 2, 3]);

for (let value of iterator) {
  console.log(value); // 1, 2, 3
}

for...of循环会不断调用迭代器的next方法,直到返回的done属性为true。在每次迭代中,当前元素的值会被赋值给value变量,然后被输出到控制台。

内建迭代器

除了自定义迭代器,JavaScript还提供了许多内建的迭代器,如数组迭代器、Map迭代器和Set迭代器等。这些内建的迭代器都实现了Iterator接口,可以使用for...of循环进行遍历。

下面是一个使用数组迭代器的例子:

javascript 复制代码
let array = [1, 2, 3];

for (let value of array) {
  console.log(value); // 1, 2, 3
}

在这个例子中,for...of循环直接遍历了数组array。由于数组实现了Iterator接口,所以可以直接使用for...of循环。

相关推荐
烬羽7 小时前
React Router v7 完全指南:一个 Demo 吃透前端路由
javascript·react.js·前端框架
烬羽8 小时前
从"整个页面刷新"到"丝滑切换":手写一个 HashRouter 彻底搞懂前端路由
javascript·前端框架·全栈
用户938515635078 小时前
从零理解 React Router v6:每一个 API 都是怎么工作的
前端·javascript·全栈
kyriewen11 小时前
别再这样写条件渲染了——你的React组件里藏着这5种定时炸弹
前端·javascript·react.js
梦想CAD控件12 小时前
网页端CAD的图形选择、编辑与夹点操作教程
前端·javascript·node.js
月月大王的3D日记12 小时前
Three.js 入门系列(8):六种光源全解析 —— 关灯了,开光!
前端·javascript
自然 醒13 小时前
v-tooltip自定义指令封装
前端·javascript·vue.js
其美杰布-富贵-李15 小时前
第 10 篇:灯光与阴影
javascript·three.js
小高00716 小时前
🔥🔥🔥TypeScript 7 正式版来了:别只看 10 倍速度,这 4 个迁移坑更值得注意
前端·javascript·面试
di24k24k17 小时前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui