ES6 中 Iterator 和 for...of 的应用实例-JavaScript中文网-JavaScript教程资源分享门户

前言

在 ES6 中，Iterator 和 for...of 是非常重要的概念，它们为我们提供了一种新的迭代方式。它们的使用可以让我们更加方便地遍历数组、字符串、Map、Set 等数据结构，并且可以让我们写出更加简洁、优雅的代码。在本文中，我们将介绍 Iterator 和 for...of 的应用实例，帮助大家更好地理解它们的使用方法。

Iterator

在 ES6 中，Iterator 是一个接口，它提供了一种统一的访问数据结构的方式。任何数据结构只要部署了 Iterator 接口，就可以使用 for...of 循环进行遍历。Iterator 接口主要包含两个方法，分别是 next() 和 Symbol.iterator。

next()

next() 方法用于返回当前位置的成员，并且将内部指针向前移动一位。该方法返回一个对象，包含两个属性，分别是 value 和 done。其中，value 表示当前位置的成员的值，done 表示遍历是否结束。如果遍历结束，done 的值为 true，否则为 false。

下面是一个简单的 Iterator 实现，用于遍历数组：

let arr = [1, 2, 3];

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 }

Symbol.iterator

Symbol.iterator 方法返回当前数据结构的 Iterator 对象。该方法可以让我们自定义 Iterator 的行为，从而实现对数据结构的遍历。

下面是一个简单的 Iterator 实现，用于遍历对象的属性：

// javascriptcn.com 代码示例
let obj = { a: 1, b: 2, c: 3 };

obj[Symbol.iterator] = function() {
  let keys = Object.keys(this);
  let index = 0;
  return {
    next: () => {
      if (index < keys.length) {
        return { value: this[keys[index++]], done: false };
      } else {
        return { value: undefined, done: true };
      }
    }
  };
};

for (let value of obj) {
  console.log(value);
}
// 1
// 2
// 3

在上面的代码中，我们通过设置 obj 的 Symbol.iterator 方法，创建了一个自定义的 Iterator，用于遍历对象的属性。

for...of

在 ES6 中，for...of 循环用于遍历可迭代对象（即部署了 Iterator 接口的对象）。它可以遍历数组、字符串、Map、Set 等数据结构，并且可以让我们写出更加简洁、优雅的代码。

下面是一个使用 for...of 循环遍历数组的例子：

let arr = [1, 2, 3];

for (let value of arr) {
  console.log(value);
}
// 1
// 2
// 3

下面是一个使用 for...of 循环遍历字符串的例子：

// javascriptcn.com 代码示例
let str = 'hello';

for (let char of str) {
  console.log(char);
}
// h
// e
// l
// l
// o

下面是一个使用 for...of 循环遍历 Map 的例子：

// javascriptcn.com 代码示例
let map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

for (let [key, value] of map) {
  console.log(key, value);
}
// a 1
// b 2
// c 3

应用实例

实例一：遍历 DOM 元素

在前端开发中，我们经常需要遍历 DOM 元素，以便对它们进行操作。使用 for...of 循环可以让我们更加方便地遍历 DOM 元素。

下面是一个使用 for...of 循环遍历 DOM 元素的例子：

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

let list = document.querySelectorAll('#list li');

for (let item of list) {
  console.log(item.textContent);
}
// item 1
// item 2
// item 3

在上面的代码中，我们使用 document.querySelectorAll 方法获取了 id 为 list 的 ul 元素下的所有 li 元素，然后使用 for...of 循环遍历这些 li 元素，并输出它们的文本内容。

实例二：遍历异步操作

在前端开发中，我们经常需要进行异步操作，例如使用 Promise 进行异步请求。使用 for...of 循环可以让我们更加方便地遍历异步操作，并且可以让我们写出更加简洁、优雅的代码。

下面是一个使用 for...of 循环遍历异步操作的例子：

// javascriptcn.com 代码示例
function delay(time) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(time);
    }, time);
  });
}

async function test() {
  let arr = [1000, 2000, 3000];

  for (let time of arr) {
    let result = await delay(time);
    console.log(result);
  }
}

test();
// 1000
// 2000
// 3000

在上面的代码中，我们使用 Promise 和 setTimeout 模拟了一个异步操作，然后使用 for...of 循环遍历了一个包含三个时间的数组，并且依次输出了每个时间。

总结

在本文中，我们介绍了 Iterator 和 for...of 的应用实例，帮助大家更好地理解它们的使用方法。Iterator 和 for...of 提供了一种新的迭代方式，可以让我们更加方便地遍历数组、字符串、Map、Set 等数据结构，并且可以让我们写出更加简洁、优雅的代码。在实际开发中，我们可以根据需要灵活地使用 Iterator 和 for...of，从而提高代码的可读性和可维护性。

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