前言
在 ES6 中，我们已经学习了一些新的 Array 方法，比如 Array.from 和 Array.of。而在 ES7 中，Array.prototype 也新增了一个非常有用的方法 —— [Symbol.iterator]。这个方法可以让我们更方便地遍历数组中的元素，而不需要使用传统的 for 循环或 forEach 方法。
在本篇文章中，我们将会详细介绍 [Symbol.iterator] 方法的使用方法，以及它的深度和学习意义。同时，我们也会提供一些示例代码，让读者更好地理解这个方法。
什么是 [Symbol.iterator] 方法？
在 ES6 中，我们已经学习了 Symbol 类型的概念。Symbol 是一种新的基本数据类型，它可以作为对象属性的唯一标识符。在 ES6 中，我们可以使用 Symbol.iterator 来创建一个迭代器对象。而在 ES7 中，Array.prototype 也新增了一个 [Symbol.iterator] 方法，用来返回这个迭代器对象。
迭代器对象是一个包含 next() 方法的对象。在遍历数组时，我们可以使用这个方法来依次访问数组中的每一个元素。每次调用 next() 方法时，它都会返回一个包含 value 和 done 两个属性的对象。其中 value 表示当前元素的值，done 表示是否已经遍历完了整个数组。
如何使用 [Symbol.iterator] 方法？
在 ES7 中，我们可以使用 for...of 循环来遍历一个数组。这个循环会自动调用数组的 [Symbol.iterator] 方法，返回一个迭代器对象。然后，我们就可以使用这个迭代器对象来依次访问数组中的每一个元素。
下面是一个简单的示例代码：
const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
console.log(item);
}这段代码会输出数组中的每一个元素：1、2、3、4、5。
除了使用 for...of 循环外，我们还可以手动调用 [Symbol.iterator] 方法来获取迭代器对象。下面是一个示例代码：
// javascriptcn.com 代码示例
const arr = [1, 2, 3, 4, 5];
const iterator = arr[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
console.log(result.value);
result = iterator.next();
}这段代码和上面的示例代码是等价的。它手动调用了 [Symbol.iterator] 方法，并使用 while 循环来依次访问数组中的每一个元素。
[Symbol.iterator] 方法的深度和学习意义
[Symbol.iterator] 方法的深度和学习意义在于，它让我们可以更方便地遍历数组中的元素。不仅如此，它还可以与其他 ES6 和 ES7 的新特性配合使用，比如：
- 使用 Array.prototype.entries() 方法来获取数组中每个元素的键值对。
- 使用 Array.prototype.keys() 方法来获取数组中每个元素的索引。
- 使用 Array.prototype.values() 方法来获取数组中每个元素的值。
这些新特性的出现，让我们可以更灵活地操作数组，提高代码的可读性和效率。
示例代码
下面是一些示例代码，展示了如何使用 [Symbol.iterator] 方法和其他新特性来操作数组。
1. 使用 for...of 循环遍历数组
const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
console.log(item);
}2. 使用 Array.prototype.entries() 方法获取数组中每个元素的键值对
const arr = [1, 2, 3, 4, 5];
for (const [index, value] of arr.entries()) {
console.log(index, value);
}3. 使用 Array.prototype.keys() 方法获取数组中每个元素的索引
// javascriptcn.com 代码示例
const arr = [1, 2, 3, 4, 5];
const keys = arr.keys();
let result = keys.next();
while (!result.done) {
console.log(result.value);
result = keys.next();
}4. 使用 Array.prototype.values() 方法获取数组中每个元素的值
// javascriptcn.com 代码示例
const arr = [1, 2, 3, 4, 5];
const values = arr.values();
let result = values.next();
while (!result.done) {
console.log(result.value);
result = values.next();
}总结
[Symbol.iterator] 方法是 ES7 中 Array.prototype 新增的一个非常有用的方法。它让我们可以更方便地遍历数组中的元素，并与其他 ES6 和 ES7 的新特性配合使用，提高代码的可读性和效率。在实际开发中，我们可以根据需要选择使用不同的方法，来完成对数组的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650f63a395b1f8cacd82a1bf