在 JavaScript 的世界里,迭代器(Iterator)是一个至关重要的概念。在 ES6 中,Iterator 的出现给我们带来了更方便、更精确的迭代操作。但是,Iterator 中的名称却让人感到有些迷惑。在本文中,我们将为您介绍 ES6 中 Iterator 相关的名称,帮助您更好地理解和应用迭代器。
名称指南
Iterable
在 ES6 中,迭代器需要一个可迭代对象(Iterable)。可迭代对象是指具有 @@iterator 属性的对象。@@iterator 属性定义了一个函数,这个函数返回一个迭代器对象(Iterator)。
// javascriptcn.com 代码示例 const obj = { *[Symbol.iterator]() { yield 1; yield 2; yield 3; } }; for (let value of obj) { console.log(value); } // 1 // 2 // 3
在上面的代码中,obj 对象是一个可迭代对象,因为它有一个 @@iterator 属性,这个属性返回一个迭代器对象。
Iterator
迭代器(Iterator)是一个对象,它定义了一个方法 next(),每次调用它都会返回一个值对象(IteratorResult)。值对象有两个属性,value 和 done。value 表示返回的值,done 表示迭代器是否已经完成。
// javascriptcn.com 代码示例 const obj = { *[Symbol.iterator]() { yield 1; yield 2; yield 3; } }; const iterator = obj[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 }
在上面的代码中,我们调用 obj 的 @@iterator 属性获取迭代器对象,然后调用 next() 方法依次获取每个值。
Generator
Generator 是 ES6 中新增的一种函数类型,它可以通过 yield 关键字实现迭代器功能。Generator 函数返回的就是一个迭代器对象。
// javascriptcn.com 代码示例 function* generatorFunc() { yield 1; yield 2; yield 3; } const iterator = generatorFunc(); 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 }
在上面的代码中,我们定义了一个 Generator 函数 generatorFunc,它通过 yield 实现了迭代器功能,它返回的就是一个迭代器对象。
IterableIterator
IterableIterator 是一个接口,它定义了一个 next() 方法和一个 @@iterator 属性。这个接口可以用于定义自己的迭代器,并且保证这个迭代器是可迭代的。
// javascriptcn.com 代码示例 class MyIterator { constructor(start, end) { this.start = start; this.end = end; } *[Symbol.iterator]() { for (let i = this.start; i < this.end; i++) { yield i; } } next() { if (this.start < this.end) { return { value: this.start++, done: false }; } else { return { value: undefined, done: true }; } } } const iterator = new MyIterator(1, 4); for (let value of iterator) { console.log(value); } // 1 // 2 // 3
在上面的代码中,我们定义了一个 MyIterator 类,它实现了 Iterable 和 Iterator 接口,定义了自己的迭代器功能。这个类之后实例化的对象也是迭代器,实现了迭代功能。
Array 和 Map 的迭代器
在 ES6 中,Array 和 Map 都实现了 @@iterator 属性,所以它们都是可迭代对象。
// javascriptcn.com 代码示例 const arr = [1, 2, 3]; const arrIterator = arr[Symbol.iterator](); console.log(arrIterator.next()); // { value: 1, done: false } console.log(arrIterator.next()); // { value: 2, done: false } console.log(arrIterator.next()); // { value: 3, done: false } console.log(arrIterator.next()); // { value: undefined, done: true } const map = new Map(); map.set('a', 1); map.set('b', 2); map.set('c', 3); const mapIterator = map[Symbol.iterator](); console.log(mapIterator.next()); // { value: ['a', 1], done: false } console.log(mapIterator.next()); // { value: ['b', 2], done: false } console.log(mapIterator.next()); // { value: ['c', 3], done: false } console.log(mapIterator.next()); // { value: undefined, done: true }
在上面的代码中,我们分别获取了 Array 和 Map 的迭代器并进行迭代,实现了对它们的循环操作。
总结
本文为您介绍了 ES6 中的迭代器相关的名称和知识点,通过对它们的详细讲解和示例代码展示,相信您已经对它们有了更深入的理解并可以灵活应用。 Iterator 相关的知识点掌握,将帮助您更好地编写代码,提高开发效率。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6533aec17d4982a6eb73f0be