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循环提供了一种强大而灵活的方式来遍历和处理各种类型的数据结构。

相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript