在本教程中,您将借助示例了解 JavaScript 迭代器和可迭代对象。
JavaScript 迭代器和可迭代对象
JavaScript 提供了一种迭代数据结构的协议。该协议定义了如何使用 for…of 的循环。
协议的概念可分为:
- 可迭代对象
- 迭代器
可迭代协议提到可迭代对象应具有 Symbol.iterator 键。
JavaScript 可迭代对象
具有 Symbol.iterator() 方法的数据结构称为可迭代对象。例如,数组、字符串、集合等。
JavaScript 迭代器
迭代器是由 Symbol.iterator() 方法返回的对象。
迭代器协议提供了 next() 方法,可以一次访问可迭代对象(数据结构)的每个元素。
让我们看一个拥有 Symbol.Iterator() 可迭代对象的例子:
const arr = [1, 2 ,3];
// calling the Symbol.iterator() method
const arrIterator = arr[Symbol.iterator]();
// gives Array Iterator
console.log(arrIterator);
const str = 'hello';
// calling the Symbol.iterator() method
const strIterator = str[Symbol.iterator]();
// gives String Iterator
console.log(strIterator);
输出
Array Iterator {}
StringIterator {}
这里,调用数组和字符串的 Symbol.iterator() 方法将返回各自的迭代器。
遍历可迭代对象
您可以使用 for…of 循环来遍历这些可迭代对象。可以像这样迭代 Symbol.iterator() 方法:
const number = [ 1, 2, 3];
for (let n of number[Symbol.iterator]()) {
console.log(n);
}
输出
1
2
3
或者您可以像这样简单地遍历数组:
const number = [ 1, 2, 3];
for (let n of number) {
console.log(n);
}
这里,迭代器允许 for…of 循环遍历数组并返回每个值。
JavaScript next() 方法
迭代器对象有一个 next() 方法,该方法返回序列中的下一项。next() 方法包含两个属性:value 和 done。
- value
value 属性可以是任何数据类型,并表示序列中的当前值。 - done
done 属性是一个布尔值,指示迭代是否完成。如果迭代不完整,则 done 属性设置为 false,否则设置为 true。
让我们看一个数组迭代的例子:
const arr = ['h', 'e', 'l', 'l', 'o'];
let arrIterator = arr[Symbol.iterator]();
console.log(arrIterator.next()); // {value: "h", done: false}
console.log(arrIterator.next()); // {value: "e", done: false}
console.log(arrIterator.next()); // {value: "l", done: false}
console.log(arrIterator.next()); // {value: "l", done: false}
console.log(arrIterator.next()); // {value: "o", done: false}
console.log(arrIterator.next()); // {value: undefined, done: true}
您可以重复调用 next() 来迭代 arrIterator 对象。
- next() 方法返回一个具有两个属性的对象:value 和 done。
- 当 next() 方法到达序列末尾时,done 属性设置为 false。
让我们看看 for…of 循环是如何执行上述程序的。例如,
const arr = ['h', 'e', 'l', 'l', 'o'];
for (let i of arr) {
console.log(i);
}
输出
h
e
l
l
o
for…of 循环的作用与上面的程序完全相同。
for…of 循环一直在迭代器上调用 next() 方法。一旦 done:true,for…of 循环中止。
用户定义的迭代器
您还可以创建自己的迭代器并调用 next() 来访问下一个元素。例如,
function displayElements(arr) {
// to update the iteration
let n = 0;
return {
// implementing the next() function
next() {
if(n < arr.length) {
return {
value: arr[n++],
done: false
}
}
return {
value: undefined,
done: true
}
}
}
}
const arr = ['h', 'e', 'l', 'l', 'o'];
const arrIterator = displayElements(arr);
console.log(arrIterator.next());
console.log(arrIterator.next());
console.log(arrIterator.next());
console.log(arrIterator.next());
console.log(arrIterator.next());
console.log(arrIterator.next());
输出
{value: "h", done: false}
{value: "e", done: false}
{value: "l", done: false}
{value: "l", done: false}
{value: "o", done: false}
{value: undefined, done: true}
在上面的程序中,我们创建了自己的迭代器。displayElements() 函数返回 value 和 done 属性。
- 每次调用 next() 方法时,该函数执行一次并显示数组的值。
- 最后,当数组的所有元素都耗尽时,done 属性设置为 true,value 设置为 undefined。
上一教程 :JS use-strict 下一教程 :JS Generators
参考文档
[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/iterators-iterables