ES6的Iterator 和 for...of 循环

写在前面

在JavaScript中,Iterator(遍历器)是一种接口,用于遍历数据结构(如数组、对象等)中的元素。它提供了一种统一的方式来访问集合中的每个项,包括值和位置。

默认 Iterator 接口

许多内置的JavaScript对象都有默认的Iterator接口,例如:

  • Array对象:可以使用for...of循环或Array.prototype[Symbol.iterator]()方法来获取其Iterator对象。
  • Map和Set对象:同样可以使用for...of循环或Map.prototype[Symbol.iterator]()Set.prototype[Symbol.iterator]()方法来获取其Iterator对象。
  • String对象:可以使用for...of循环或String.prototype[Symbol.iterator]()方法来获取其Iterator对象。

调用 Iterator 接口的场合

当你需要遍历一个数据结构中的所有元素时,可以使用Iterator接口。例如:

javascript 复制代码
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();

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()); // { value: undefined, done: true }

字符串的 Iterator 接口

字符串的Iterator接口允许我们逐个字符地遍历字符串。例如:

javascript 复制代码
const str = 'hello';
const iterator = str[Symbol.iterator]();

console.log(iterator.next()); // { value: 'h', done: false }
console.log(iterator.next()); // { value: 'e', done: false }
console.log(iterator.next()); // { value: 'l', done: false }
console.log(iterator.next()); // { value: 'l', done: false }
console.log(iterator.next()); // { value: 'o', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Iterator 接口与 Generator 函数

Generator函数是一种特殊的函数,它可以用来生成Iterator对象。例如:

javascript 复制代码
function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = generateNumbers();

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()); // { value: undefined, done: true }

遍历器对象的 return() 和 throw()

遍历器对象有两个额外的方法:return()throw()

  • return():可以在遍历器完成之前强制结束遍历,并返回一个指定的值。
  • throw():可以在遍历器中抛出一个错误。

例如:

javascript 复制代码
function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = generateNumbers();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.return(42)); // { value: 42, done: true }
console.log(iterator.next()); // { value: undefined, done: true }

// throw() example
try {
  console.log(iterator.throw(new Error('Something went wrong')));
} catch (error) {
  console.error(error); // Something went wrong
}

for...of 循环

for...of循环是JavaScript中的一种语法结构,用于遍历可迭代对象(如数组、字符串、Map、Set等)。它会自动调用对象的Iterator接口来获取每个元素。例如:

javascript 复制代码
const arr = [1, 2, 3];

for (const num of arr) {
  console.log(num);
}
// Output: 1, 2, 3

const str = 'hello';

for (const char of str) {
  console.log(char);
}
// Output: h, e, l, l, o

总之,Iterator和for...of循环提供了一种强大而灵活的方式来遍历和处理各种类型的数据结构。

相关推荐
王景程几秒前
如何测试短信接口
java·服务器·前端
安冬的码畜日常24 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中29 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木33 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端