外贸网站域名,海外网站怎么浏览,wordpress电影分享,社交电商系统开发Iterator#xff08;迭代器#xff09;是 ES6 引入的一种 接口#xff0c;用于 顺序访问 可迭代对象#xff08;Array、Set、Map、String、arguments、自定义对象等#xff09;。 Iterator#xff08;迭代器#xff09;的作用有三个#xff1a;
为各种数据结构提供一个…Iterator迭代器是 ES6 引入的一种 接口用于 顺序访问 可迭代对象Array、Set、Map、String、arguments、自定义对象等。 Iterator迭代器的作用有三个
为各种数据结构提供一个统一的、简便的访问接口使数据结构的成员能够按某种次序排列ES6 创造了一种新的遍历命令 for…of 循环Iterator 接口主要供 for…of 消费 1. 迭代器的基本概念
(1) 迭代器是什么
迭代器是一种 特殊对象提供 next() 方法每次调用都会返回{ value: 当前值, done: 是否完成 }当 done: true 时表示迭代结束。 Iterator 的遍历过程
// Iterator 的遍历过程如下:
1. 创建一个指针对象指向当前数据结构的起始位置
2. 第一次调用指针对象的 next 方法可以将指针指向数据结构的第一个成员
3. 第二次调用指针对象的 next 方法指针就指向数据结构的第二个成员
4. 不断调用指针对象的 next 方法直到它指向数据结构的结束位置// 每一次调用 next 方法都会返回一个包含 value 和 done 两个属性的对象
{value: 当前成员的值,done: 布尔值表示遍历是否结束
}2. 生成迭代器
(1) 手动创建迭代器
function createIterator(arr) {let index 0;return {next: function () {return index arr.length? { value: arr[index], done: false }: { value: undefined, done: true };}};
}let iterator createIterator([a, b, c]);
console.log(iterator.next()); // { value: a, done: false }
console.log(iterator.next()); // { value: b, done: false }
console.log(iterator.next()); // { value: c, done: false }
console.log(iterator.next()); // { value: undefined, done: true }每次 next() 调用都会返回 value 并前进。 (2) 使用 Symbol.iterator
所有 可迭代对象Array、Set、Map 等都有 默认的迭代器可以用 Symbol.iterator 访问
let arr [x, y, z];
let iterator arr[Symbol.iterator]();console.log(iterator.next()); // { value: x, done: false }
console.log(iterator.next()); // { value: y, done: false }
console.log(iterator.next()); // { value: z, done: false }
console.log(iterator.next()); // { value: undefined, done: true }数组、字符串、Set、Map 都有 Symbol.iterator可直接迭代。 (3) 自定义对象的迭代器
普通对象没有默认迭代器需手动实现
let myObj {data: [10, 20, 30],[Symbol.iterator]: function () {let index 0;return {next: () {return index this.data.length? { value: this.data[index], done: false }: { value: undefined, done: true };}};}
};let iter myObj[Symbol.iterator]();
console.log(iter.next()); // { value: 10, done: false }
console.log(iter.next()); // { value: 20, done: false }
console.log(iter.next()); // { value: 30, done: false }
console.log(iter.next()); // { value: undefined, done: true }对象没有默认迭代器需实现 Symbol.iterator 才能用 for...of。 3. for...of 遍历迭代器
所有 实现 Symbol.iterator 的对象都可以用 for...of 遍历
let arr [A, B, C];for (let char of arr) {console.log(char);
}
// A
// B
// C相比 forEach()for...of 可与 break、continue 配合使用。 4. 可迭代对象
✅ 可以使用 for...of、Symbol.iterator 的对象
ArrayStringSetMapargumentsNodeList自定义对象需实现 Symbol.iterator 5. Set 和 Map 的迭代器
(1) Set 迭代
let mySet new Set([apple, banana, cherry]);
let setIter mySet[Symbol.iterator]();console.log(setIter.next()); // { value: apple, done: false }
console.log(setIter.next()); // { value: banana, done: false }
console.log(setIter.next()); // { value: cherry, done: false }
console.log(setIter.next()); // { value: undefined, done: true }Set 按插入顺序存储迭代返回唯一值。 (2) Map 迭代
let myMap new Map([[name, Alice],[age, 25]
]);for (let [key, value] of myMap) {console.log(key, value);
}
// name Alice
// age 25Map 迭代时返回 [key, value] 数组。 6. 迭代器 vs 生成器
特性迭代器 (Iterator)生成器 (Generator)创建方式手动实现 next()function* 生成使用 Symbol.iterator需要手动实现生成器自动实现可暂停执行❌ 否✅ 是可 yield
示例生成器
function* generatorFunction() {yield A;yield B;yield C;
}let gen generatorFunction();
console.log(gen.next()); // { value: A, done: false }
console.log(gen.next()); // { value: B, done: false }
console.log(gen.next()); // { value: C, done: false }
console.log(gen.next()); // { value: undefined, done: true }生成器更简洁支持 yield 暂停执行。 7. Iterator 使用场景
7.1 解构赋值
// 对数组和 Set 结构进行解构赋值时会默认调用 Iterator 接口
let set new Set().add(a).add(b).add(c);
let [x, y] set; // xa; yb7.2 扩展运算符
// 扩展运算符...也会调用默认的 Iterator 接口
let str hello;
[...str] // [h, e, l, l, o]let arr [b, c];
[a, ...arr, d]
// [a, b, c, d]7.3 yield*
// yield* 后面跟的是一个可遍历的结构它会调用该结构的遍历器接口
let generator function* () {yield 1;yield* [2, 3, 4];yield 5;
};for (let v of generator()) {console.log(v);
}
// 1, 2, 3, 4, 58. 注意事项
8.1 对象的 for…of 循环
// 对象默认不具备 Iterator 接口不能直接使用 for...of
let obj { a: 1, b: 2, c: 3 };
for (let value of obj) {console.log(value); // TypeError: obj is not iterable
}// 正确的遍历对象方式
// 1. 使用 Object.keys()
for (let key of Object.keys(obj)) {console.log(key : obj[key]);
}// 2. 使用 Object.entries()
for (let [key, value] of Object.entries(obj)) {console.log(key : value);
}8.2 Iterator 接口与 Generator 函数
// 使用 Generator 函数实现 Iterator 接口
let obj {*[Symbol.iterator]() {yield hello;yield world;}
};for (let x of obj) {console.log(x);
}
// hello
// world9. 最佳实践
9.1 为类部署 Iterator 接口
class Collection {constructor() {this.items [];}add(item) {this.items.push(item);}*[Symbol.iterator]() {for (let item of this.items) {yield item;}}
}let collection new Collection();
collection.add(foo);
collection.add(bar);for (let value of collection) {console.log(value);
}
// foo
// bar9.2 异步迭代器
// ES2018 引入了异步迭代器
const asyncIterable {async *[Symbol.asyncIterator]() {yield hello;yield async;yield iteration;}
};(async () {for await (const x of asyncIterable) {console.log(x);}
})();
// hello
// async
// iteration10. 适用场景
✅ 适用于
遍历数组、字符串、Set、Map自定义可迭代对象流式处理数据类似分页加载避免一次性加载大数据生成器 11. 总结
Iterator 是 ES6 提供的一种接口用于顺序访问集合。Symbol.iterator 让对象变成可迭代可用于 for...of、spread。Set、Map、Array、String 默认实现 Symbol.iterator可直接迭代。生成器 (Generator) 自动创建迭代器可暂停执行 (yield)更强大。
