ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结

文章标题：ES6迭代器与for...of循环的奥秘：长沙网络推广带你一竟

一、揭开迭代器的神秘面纱

在编程的世界里，迭代器的概念可谓是独树一帜。你是否曾在Java、Python等语言中遇到过生成器这一概念？如今，ES6也将迭代器带入了JavaScript的怀抱。迭代器赋予我们无需初始化集合及索引变量的特权，只需调用迭代器的next方法，便可轻松获取集合的下一个值，这无疑更加偏向于程序化的操作。

迭代器是一种拥有特殊接口的对象，内含一个名为next()的方法。每次调用此方法时，它会返回一个包含两个属性的对象：value和done。value属性代表当前位置的值，而done则是一个标志，告诉我们是否已迭代完毕。当done为true时，再调用next方法已无任何意义。

在ES5时代，遍历集合通常依赖于for循环、数组的forEach方法以及for-in循环。随着ES6的到来，Map、Set等新型数据结构为我们提供了更为丰富的选择。迭代器，作为这些数据结构背后共同的接口，为我们提供了一种统一处理所有集合数据的方法。简而言之，只要数据结构拥有Iterator接口，即可实现迭代。而for...of循环，作为ES6新增的遍历命令，正是为了消费这些迭代器而诞生的。

二、迭代器实战：如何运用？

1. 默认的Iterator接口

你是否曾好奇，哪些数据结构可以供for...of消费？答案揭晓：只要数据结构部署了默认的Iterator接口，我们便可称之为“可遍历的”（Iterable）。换句话说，任何具有Symbol.iterator属性的数据结构，都可以被认为是“可遍历的”。

那么，哪些原生数据结构拥有这一属性呢？包括Array、Map、Set、String以及TypedArray等。有趣的是，你或许会注意到对象（Object）并未在列出的原生数据结构中现身。这是因为对象的属性遍历顺序是不确定的，需要开发者手动指定。

从本质上讲，迭代器是一种线性处理方式。对于任何非线性数据结构，部署迭代器接口就相当于进行一种线性变换。虽然对象在默认情况下并不具备可迭代性，但我们仍可以通过自定义的方式为其添加Iterator接口，从而实现迭代操作。

迭代器的魅力：for...of 循环与 Iterator 接口的应用

在编程的世界里，迭代是一种常见且强大的操作。在 JavaScript 中，Iterator 接口和 for...of 循环为我们提供了便捷的迭代解决方案。接下来，让我们一同如何通过对象来实现 Iterator 接口，并感受 for...of 循环的魅力。

一、对象供 for...of 消费的实现

设想我们有一个对象，每个对象实例都有值和下一个实例的引用。我们可以通过实现 Iterator 接口，让 for...of 循环能够遍历这些对象。

代码示例：

```javascript

function Obj(value) {

this.value = value;

this.next = null;

}

Obj.prototype[Symbol.iterator] = function() {

let current = this;

const iterator = {

next: function() {

if (current) {

const value = current.value;

current = current.next;

return { value, done: false };

} else {

return { done: true };

}

}

};

return iterator;

};

// 创建对象实例并连接它们

let one = new Obj(1);

let two = new Obj(2);

let three = new Obj(3);

one.next = two;

two.next = three;

// 使用 for...of 循环遍历对象

for (let i of one) {

console.log(i); // 输出 1, 2, 3

}

```

通过为对象实现 Iterator 接口，我们可以轻松地让 for...of 循环遍历对象的每一个值。这使得我们可以灵活地处理自定义数据结构，并将其整合到现有的迭代操作中。

二、Iterator 接口的调用场合

（一）解构赋值：通过使用 Iterator 接口，我们可以轻松地进行解构赋值操作。例如：Set 数据结构就是一个内置的可迭代对象。我们可以如下操作：

```javascript let set = new Set().add('a').add('b').add('c'); let [x,y] = set; // x='a'; y='b' ```解构赋值可以让我们轻松地获取迭代器产生的值。我们还可以使用剩余参数来收集多余的元素： ```javascript let [first, ...rest] = set; // first='a'; rest=['b','c'] ``` （二 ）（扩展运算符）：扩展运算符可用于字符串和数组等可迭代对象上。例如： ```javascript var str = 'hello'; [...str] // ['h','e','l','l','o'] ``` 扩展运算符可以将可迭代对象展开为多个元素，这在很多场合下非常有用。（三）Generator 函数中的 yield 表达式（下一章介绍）：Generator 函数可以返回一个特殊的迭代器对象，该对象可以在每次调用 next() 方法时生成一个值。（四）其它场合：除了上述场合外，还有许多其他场合也会用到 Iterator 接口，例如 for...of 循环、Array.from 方法以及 Map、Set 等数据结构相关的操作。 三、for...of 循环的优势 传统的数组 forEach 方法无法中途跳出循环，这在某些情况下可能会带来不便。而 for...of 循环则更加灵活，允许我们使用 break 或 return 命令来控制循环的流程。对于对象而言，for.. 循环会遍历对象的所有键名，包括数字键名以及手动添加的键名，甚至包括原型链上的键。而 for...of 循环则更加专注于数组或其他可迭代对象的值。这使得 for...of 循环在处理某些任务时更加高效和直观。 通过上述分析，我们可以看到 Iterator 接口和 for...of 循环在 JavaScript 中的强大功能。它们使得我们可以轻松地处理各种自定义数据结构，并在各种场合下实现灵活的迭代操作。在编程的过程中，充分利用这些功能可以大大提高我们的开发效率和代码质量。对于 `for..` 循环和 `for...of` 循环，它们在遍历对象时有着显著的差异。当我们讨论遍历数组时，`for..` 循环可能会以任意顺序遍历键名，这取决于具体的 JavaScript 引擎实现。而 `for...of` 循环则是专门为了遍历对象设计的，它能够保证按照数据结构的顺序进行遍历。

相较之下，`for...of` 循环的语法更为简洁，且不存在像 `for..` 循环那样可能遍历非数值属性的问题。它还可以与 `break`、`continue` 和 `return` 等控制语句配合使用，提供了更为灵活的遍历方式。这一循环结构为我们提供了统一的操作接口，无论是数组、Map 还是 Set，都可以轻松应对。

当我们深入 `for...of` 循环的实际应用时，可以发现它在各种数据类型上的使用方式。对于数组而言，`for...of` 循环能够遍历数组的每个元素，不同于 `for..` 循环会返回数字索引。这意味着当我们使用 `for...of` 时，可以专注于数组元素本身而非其索引。

当涉及到 Map 和 Set 数据结构时，`for...of` 循环的遍历顺序与成员被添加进数据结构的顺序保持一致。对于 Set 结构，遍历时返回的是单个成员的值；而对于 Map 结构，遍历时返回的是一个数组，其中包含键名和键值。这使得我们可以轻松提取并处理 Map 中的键值对。

让我们来看一段示例代码：

假设我们有一个数组 `arr`，其中包含字符串元素。使用 `for..` 循环遍历该数组时，可能会得到数字索引以及额外的属性（如 'foo'）。而使用 `for...of` 循环时，我们只会得到数组的元素本身。对于 Map 结构 `es6`，使用 `for...of` 循环遍历可以轻松地以键值对的形式输出每个条目。这些示例充分展示了 `for...of` 循环在处理各种数据结构时的灵活性和便利性。类数组对象与迭代器的应用

一、类数组对象的遍历

在JavaScript中，我们经常会遇到一些类似数组但并非数组的对象，例如字符串、DOM NodeList以及arguments对象等。这些对象虽然具有length属性和可索引的元素，但并不具备数组的所有方法和属性。对于这类对象，我们需要使用特定的方法来进行遍历。

对于普通的字符串，我们可以直接使用for...of循环进行遍历：

```javascript

let str = "yuan";

for (let s of str) {

console.log(s); // 输出 y u a n

}

```

而对于含有特殊字符的字符串，如表情符号，由于每个表情符号在UTF-16中被表示为两个字符，我们需要特别注意：

```javascript

for (let x of 'a\uD83D\uDC0A') {

console.log(x); // 输出 'a' 和 '\uD83D\uDC0A'

}

```

二、DOM NodeList对象的遍历

在DOM操作中，我们经常使用querySelectorAll方法获取一组元素，返回的是一个NodeList对象。这个对象也可以使用for...of循环进行遍历，并对每个元素进行操作：

```javascript

let paras = document.querySelectorAll("p");

for (let p of paras) {

p.classList.add("test"); // 对每个段落元素添加类名"test"

}

```

三、arguments对象的遍历

在函数参数不确定的情况下，我们可以使用arguments对象来接收任意数量的参数。这个对象同样可以使用for...of循环进行遍历：

```javascript

function printArgs() {

for (let x of arguments) {

console.log(x); // 输出函数接收到的所有参数

}

}

printArgs("a", "n"); // 输出 "a" 和 "n"

```

四、没有Iterator接口的类数组对象的遍历处理

对于没有Iterator接口的类数组对象，我们无法直接使用for...of循环进行遍历。这时，我们可以借助Array.from方法将其转化为数组再进行遍历：

```javascript

let arrayLike = {

length: 2,

0: 'a',

1: 'b'

};

// 报错直接遍历 arrayLike 对象

// 正确做法是通过 Array.from 方法转化为数组后再遍历

for (let x of Array.from(arrayLike)) { // 输出 'a' 和 'b' } 接着介绍对象部分的遍历问题。五、对象的遍历由于普通对象并不具有Iterator接口，我们无法直接使用for...of循环进行遍历。这时我们可以通过以下两种方法来实现对象的遍历：方法一：使用Object.keys方法将对象的键名生成一个数组，然后再对数组进行遍历。（需要ES6的支持）方法二：使用Generator函数将对象重新包装一下，生成一个新的迭代器对象，从而实现对象的遍历。接下来以方法二为例，展示如何使用Generator函数实现对象的遍历：假设我们有一个对象obj = {a: 1, b: 2, c: 3}，我们可以创建一个entries的Generator函数，将obj的键值对以数组的形势yield出来，然后我们在使用for...of循环去遍历这个由Generator函数生成的迭代器对象即可。代码如下：function entries(obj) { for (let key of Object.keys(obj)) { yield [key, obj[key]]; } } for (let [key, value] of entries(obj)) { console.log(key + " -> " + value); // 输出 "a -> 1"， "b -> 2"， "c -> 3" } 六、迭代器应用实例——斐波那契数列除了上述的遍历应用外，迭代器还可以用于生成一些特定的序列。比如斐波那契数列。我们可以利用迭代器的特性，自定义一个斐波那契数列的生成器。这个生成器每次被调用时，都会返回下一个斐波那契数。通过这种方式，我们可以轻松地生成一个斐波那契数列。以下是斐波那契数列生成器的示例代码：function fibonacci() { let a = 0, b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } // 使用示例 for (let num of fibonacci()) { console.log(num); // 输出斐波那契数列的前几个数 } 这样我们就利用迭代器实现了斐波那契数列的生成。这只是一个简单的示例，实际上迭代器的应用可以更加广泛和复杂。通过掌握迭代器的原理和使用方法，我们可以实现更多的功能和算法。任务队列迭代器的奇妙之旅

在这个充满代码的世界，我们时常需要处理各种任务。为了更有效地管理这些任务，我们可以利用迭代器的力量，构建一个任务队列迭代器。想象一下，这是一个可以生成任务序列的神奇工具，让我们深入了解它的工作原理。

我们来定义一个迭代器对象。这个对象拥有两个初始值n1和n2，分别设为0和1。这个迭代器拥有一个特殊的属性——Symbol.iterator，它返回迭代器对象本身，允许我们对其进行迭代操作。

接下来，我们定义了一个next方法。每次调用这个方法时，它会返回当前的n1值（也就是队列中的下一个任务），然后将n1和n2的值更新为特定的计算值。这种更新方式模拟了任务队列中不断添加新任务的过程。

现在，让我们启动这个神奇的迭代器，看看它如何生成斐波那契数列。通过简单的for循环，我们连续调用next方法，输出每个任务的值。从初始的0和1开始，每次迭代都会生成一个新的斐波那契数，直到我们达到预定的迭代次数。这个过程就像是见证一个故事的展开，每个数都是故事的一部分，引领我们走向下一个令人惊奇的结果。

那么，如何将这个概念应用到任务队列中呢？其实非常简单。我们可以将任务队列视为一个容器，可以容纳各种待处理的任务。当新的任务被添加到队列中时，它们就像是斐波那契数列中的数字一样，按照一定的顺序被处理。通过迭代器，我们可以轻松地遍历整个队列，依次处理每个任务。这就像是在指挥一场交响乐，每个任务都是乐章的一部分，共同创造出和谐的旋律。

这个迭代器的魅力在于它的灵活性和可扩展性。它可以处理任何类型的任务队列，无论是简单的数字序列还是复杂的异步操作。通过使用迭代器，我们可以更加高效地管理任务队列，确保每个任务都能得到妥善处理。在这个充满代码的世界里，让我们利用迭代器，更多的可能性吧！编程中的任务分发与延迟执行机制

在编程世界中，任务分发和延迟执行是两种重要的编程策略，它们能帮助我们更有效地管理和优化代码运行。让我们深入理解这两种机制的工作原理，并通过一些具体的代码示例来揭示它们的实现方式。

一、任务分发

在编程中，任务分发是一种重要的策略，特别是在处理异步任务或多任务时。这种方法将工作分解成多个小任务，每个任务单独处理，从而允许我们更有效地管理资源和流程。

这里有一个简单的示例代码，通过创建一个名为Task的对象来实现任务分发。Task对象有一个actions数组，可以存放不同的任务函数。这些任务函数在调用时，会依次执行并返回结果。这样，第一次传递的数据只会被任务1处理，第二次传递的只会被任务2处理，以此类推。

代码示例：

```javascript

var Task = {

actions: [],

// ...（省略了迭代器和next方法的实现）

};

// 向Task对象推送不同的任务函数

Task.actions.push(function task1(...args) {

console.log("任务一相乘");

return args.reduce(function(x, y) { return x y; }); // 任务一：相乘

}, function task2(...args) {

console.log("任务二相加");

return args.reduce(function(x, y) { return x + y; }); // 任务二：相加

}, function task3(...args) {

console.log("任务三相减");

return args.reduce(function(x, y) { return x - y; }); // 任务三：相减

});

// 使用Task对象执行任务并打印结果

var it = Task[Symbol.iterator]();

console.log(it.next(10, 100, 2)); // 输出任务一的结果

console.log(it.next(20, 50, 100)); // 输出任务二的结果

console.log(it.next(10, 2, 1)); // 输出任务三的结果

```

二、延迟执行

延迟执行是一种策略，允许我们在代码运行时按需执行某些操作。这在处理大量数据或需要按需加载资源时特别有用。例如，我们有一个数据表，我们想要按大小顺序获取数据，但我们不想提前排序它。我们可以在第一次使用时才进行排序，从而实现延迟执行。

代码示例：

```javascript

var table = { / ...（省略了具体的数据） / };

// 为table对象定义迭代器，实现延迟排序和迭代

table[Symbol.iterator] = function() { / ...（省略了具体实现） / };

// 使用for...of循环迭代table对象，第一次迭代时才会排序数据

for (var a of table) { console.log(a); } // 输出排序后的结果：a b c d

```

结语与展望

本章内容主要介绍了任务分发和延迟执行两种编程策略的实现方式。下一章节我们将介绍生成器函数Generator的相关知识。希望这些内容能对大家的学习有所帮助，也请大家多多支持我们的博客。对于编程世界中的更多奥秘等待大家去，让我们共同学习进步！