ES6 中 Iterable 和 Iterator 协议详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，Iterable 和 Iterator 协议是非常重要的协议，它们可以让我们更加方便地对数据进行遍历和操作。本文将详细介绍这两个协议的概念、用法及其在实际开发中的应用。

1. Iterable 协议

Iterable 协议是指一个对象实现了 @@iterator 方法，该方法返回一个 Iterator 对象，使得该对象可以被迭代。在 ES6 中，Array、Map、Set、String、TypedArray、arguments、NodeList 等对象都是 Iterable 的。

下面是一个简单的示例，展示了如何使用 Iterable 协议：

const arr = [1, 2, 3];
const 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 }

在上面的示例中，我们通过数组的 @@iterator 方法获取了一个 Iterator 对象，并使用 next 方法逐个遍历数组中的元素。

2. Iterator 协议

Iterator 协议是指一个对象实现了 next 方法，该方法返回一个包含 value 和 done 两个属性的对象，其中 value 表示当前迭代的值，done 表示迭代是否结束。在 ES6 中，所有实现了 Iterator 协议的对象都是 Iterable 的。

下面是一个简单的示例，展示了如何使用 Iterator 协议：

// javascriptcn.com 代码示例
const myIterator = {
  next: function() {
    return {
      value: Math.random(),
      done: false
    };
  }
};

console.log(myIterator.next()); // { value: 0.123456789, done: false }
console.log(myIterator.next()); // { value: 0.987654321, done: false }
console.log(myIterator.next()); // { value: 0.456789123, done: false }
console.log(myIterator.next()); // { value: 0.654321987, done: false }

在上面的示例中，我们定义了一个对象 myIterator，实现了 next 方法，每次调用 next 方法都会返回一个包含随机数和 false 的对象。

3. Iterable 和 Iterator 的应用

Iterable 和 Iterator 在实际开发中的应用非常广泛，例如在 for...of 循环中、使用扩展运算符、解构赋值等操作中都可以使用 Iterable 和 Iterator 协议。

3.1 for...of 循环

在 for...of 循环中，我们可以直接遍历实现了 Iterable 协议的对象，例如数组、Map、Set 等：

// javascriptcn.com 代码示例
const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}
// 1
// 2
// 3

const set = new Set([1, 2, 3]);
for (const item of set) {
  console.log(item);
}
// 1
// 2
// 3

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const [key, value] of map) {
  console.log(key, value);
}
// a 1
// b 2
// c 3

3.2 扩展运算符

在使用扩展运算符时，我们也可以直接使用实现了 Iterable 协议的对象，例如数组、Set 等：

// javascriptcn.com 代码示例
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

const set1 = new Set([1, 2, 3]);
const set2 = new Set([4, 5, 6]);
const set3 = new Set([...set1, ...set2]);
console.log(set3); // Set {1, 2, 3, 4, 5, 6}

3.3 解构赋值

在使用解构赋值时，我们也可以直接使用实现了 Iterable 协议的对象，例如数组、Set 等：

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

const set = new Set([1, 2, 3]);
const [x, y, z] = set;
console.log(x, y, z); // 1 2 3

4. 总结

Iterable 和 Iterator 协议是 ES6 中非常重要的协议，它们可以让我们更加方便地对数据进行遍历和操作。在实际开发中，我们可以通过 for...of 循环、扩展运算符、解构赋值等操作直接使用实现了 Iterable 协议的对象。掌握 Iterable 和 Iterator 协议对于提高前端开发效率、减少代码量、优化代码逻辑等方面都有很大的帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657bbbb0d2f5e1655d661aa2