ES6 Iterator 与 for...of 循环（五）

Iterator 特性：

统一的接口：无论是数组、字符串还是自定义对象，只要它们有默认的迭代器，就可以使用 for...of 循环进行遍历。
可迭代对象：具有 [Symbol.iterator] 属性的对象被认为是可迭代的。[Symbol.iterator] 是一个方法，返回一个迭代器。
迭代器对象：迭代器是一个具有 next() 方法的对象，该方法返回包含 value 和 done 属性的对象。value 是当前迭代的值，done 是一个布尔值，表示迭代是否完成。

for...of 循环特性：

简洁的语法：使用 for...of 可以遍历可迭代对象中的每个元素，而不需要编写额外的迭代逻辑。
自动迭代：for...of 循环自动调用迭代器的 next() 方法，获取下一个值。
异常处理：可以在 for...of 循环中使用 try...catch 来捕获在迭代过程中抛出的异常。

1：使用 for...of 遍历数组

javascript 复制代码

let numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
    console.log(number); // 依次输出 1 到 5
}

2：使用 for...of 遍历字符串

javascript 复制代码

let str = "Hello";

for (let char of str) {
    console.log(char); // 依次输出 'H', 'e', 'l', 'l', 'o'
}

3：自定义迭代器

javascript 复制代码

let myIterable = {
    [Symbol.iterator]: function* () {
        yield 1;
        yield 2;
        yield 3;
    }
};

for (let value of myIterable) {
    console.log(value); // 依次输出 1, 2, 3
}

4：使用 for...of 与自定义迭代器

javascript 复制代码

function* numberIterator(max) {
    let current = 1;
    while (current <= max) {
        yield current++;
    }
}

for (let number of numberIterator(5)) {
    console.log(number); // 依次输出 1 到 5
}

5：使用 for...of 捕获异常

javascript 复制代码

let iterable = [1, 2, 3, 4, 'error', 6];

for (let item of iterable) {
    try {
        if (typeof item === 'string') {
            throw new Error('Invalid value');
        }
        console.log(item * 2); // 依次输出 2, 4, 6, 8
    } catch (e) {
        console.error(e.message); // 输出：Invalid value
    }
}

6：使用 Array.from 将可迭代对象转换为数组

javascript 复制代码

let str = "Iterator";

let arrayFromIterable = Array.from(str);
console.log(arrayFromIterable); // 输出：['I', 't', 'e', 'r', 'a', 't', 'o', 'r']

注意

兼容性 ：for...of 循环在现代浏览器和 Node.js 中得到支持，但一些旧的 JavaScript 环境可能不支持。
性能：对于大型集合，for...of 循环可能不如传统的 for 循环高效，因为每次迭代都需要调用迭代器的 next() 方法。

7：数组的 Symbol.iterator

javascript 复制代码

let arr = [1, 2, 3];

// 数组是可迭代对象，具有默认的 Symbol.iterator 属性
let 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 }

8：字符串的 Symbol.iterator

javascript 复制代码

let str = "abc";

// 字符串也是可迭代对象
let strIterator = str[Symbol.iterator]();

console.log(strIterator.next()); // { value: "a", done: false }
console.log(strIterator.next()); // { value: "b", done: false }
console.log(strIterator.next()); // { value: "c", done: false }
console.log(strIterator.next()); // { value: undefined, done: true }

9：手动使用 Symbol.iterator

javascript 复制代码

let myObj = {
    items: [3, 5, 7],
    [Symbol.iterator]: function* () {
        for (let item of this.items) {
            yield item * 2; // 迭代器返回值的两倍
        }
    }
};

let iterator = myObj[Symbol.iterator]();

console.log(iterator.next()); // { value: 6, done: false }
console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 14, done: false }
console.log(iterator.next()); // { value: undefined, done: true }