当前位置：首页 > news >正文

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

news 2025/7/7 13:27:45

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 遍历数组

let numbers = [1, 2, 3, 4, 5];for (let number of numbers) {console.log(number); // 依次输出 1 到 5
}

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

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

3：自定义迭代器

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 与自定义迭代器

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 捕获异常

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 将可迭代对象转换为数组

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

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

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

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 }