在本教程中，您将借助示例了解 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