ES6新特性（三）： 可迭代对象和两种新增循环方式

ES6指的是ECMAScript 6，也被称为ES2015。它是JavaScript的一种版本，是ECMAScript标准的第六个版本，于2015年发布。ECMAScript是JavaScript的规范，定义了语言的核心特性和行为。ES6引入了许多新的语法特性和功能，以使JavaScript代码更加现代化、清晰和强大。 在此专栏中，我们会持续更新有关于ES6的新特性，感兴趣的小伙伴们可以订阅一下~

前言

今天我们来聊聊ES6新特性中的可迭代对象,迭代器是一种对象，用于提供一种有序访问集合元素的方式。两种新增的循环方式for of、·for in,这两种循环为 JavaScript 提供了更强大的迭代和遍历能力，使代码更加清晰和简洁。

可迭代对象

可迭代对象（Iterable）是具有迭代行为的对象。在JavaScript中，可迭代对象是一种实现了迭代器协议（Iterator Protocol）的对象。迭代器协议包括一个名为 Symbol.iterator 的方法，该方法返回一个迭代器对象。

1. next() 方法： 该方法返回一个包含两个属性的对象，这两个属性是：

   • value：表示迭代器返回的当前元素的值。
   • done：表示迭代器是否已经完成遍历集合。如果已完成，返回 true；否则返回 false。

2. return() 方法： 该方法用于提前终止迭代。当调用 return() 后，迭代器会立即完成，并返回一个带有 done: true 的对象，同时可以附带一个可选的 value 属性。

常见的可迭代对象

在 JavaScript 中，许多内置的数据结构和类型都是可迭代对象。我们一起来看看：

1. 数组 (Array): 数组是最常见的可迭代对象。

   const arr = [1, 2, 3, 4];

2. 字符串 (String): 字符串也是可迭代对象。

   const str = "Hello";

3. Map 和 Set: ES6 引入的 Map 和 Set 类型是可迭代对象。(我们下篇文章中会讲到)

   const map = new Map([[1, 'one'], [2, 'two']]);
   const set = new Set([1, 2, 3, 4]);

   自定义可迭代对象: 你可以通过实现 Symbol.iterator 方法创建自定义可迭代对象。

   const iterableObject = {
       data: [1, 2, 3, 4],
       [Symbol.iterator]: function() {
           let index = 0;
           return {
               next: () => {
                   if (index < this.data.length) {
                       return { value: this.data[index++], done: false };
                   } else {
                       return { done: true };
                   }
               }
           };
       }
   };

实际上，任何实现了迭代器协议（有 Symbol.iterator 方法）的对象都可以被视为可迭代对象

我们来一起看一下可迭代对象怎么使用方法遍历的：

1. 数组（Array）： 数组是最常见的可迭代对象。

   const arr = [1, 2, 3, 4];
   const iterator = arr[Symbol.iterator]();
   console.log(iterator.next()); // { value: 1, done: false }
   console.log(iterator.next()); // { value: 2, done: false }
   // ...

2. 字符串（String）： 字符串也是可迭代对象。

   const str = "Hello";
   const iterator = str[Symbol.iterator]();
   console.log(iterator.next()); // { value: 'H', done: false }
   console.log(iterator.next()); // { value: 'e', done: false }
   // ...

for...of

for...of 循环是 ECMAScript 6（ES6）引入的一种遍历可迭代对象元素的语法。它提供了一种更简洁、直观的方法来遍历集合，而不需要关心索引和迭代器的具体实现。

语法形式如下：

for (const element of iterable) {
    // 执行循环体，element 表示当前迭代的元素值
}

其中，iterable 是一个可迭代对象，而 element 是在每次迭代中表示当前元素的变量

遍历数组：

const iterableArray = [1, 2, 3, 4];

for (const element of iterableArray) {
    console.log(element);
}
// 输出:
// 1
// 2
// 3
// 4

遍历字符串：

const str = "Hello";

for (const char of str) {
    console.log(char);
}
// 输出:
// H
// e
// l
// l
// o

for...of 循环可以用于遍历数组、字符串、Map、Set、NodeList 等实现了迭代器协议的对象。 (Map、 Set这些我们在下篇文章中会讲到)

for...of不能遍历传统对象，因为传统对象并没有迭代器属性:

let obj = {
    a: 1,
    b: 2,
    c: 3
}

for (let item of arr) {
    console.log(item);
}

for (let item of obj) {
    console.log(item);      // 报错，传统对象不具有迭代器属性   obj is not iterable
}

for...in

for...in 循环是 JavaScript 中一种用于遍历对象属性的语法。这个循环不是用于遍历数组元素的，而是用于遍历对象的可枚举属性（包括自身的和继承的）。

语法形式如下：

for (const key in object) {
    // 执行循环体，key 表示当前属性名，object[key] 表示对应属性值
}

其中，object 是要遍历的对象，而 key 是在每次迭代中表示当前属性名的变量。

以下是一个简单的示例：

const myObject = { a: 1, b: 2, c: 3 };

for (const key in myObject) {
    console.log(key, myObject[key]);
}
// 输出:
// a 1
// b 2
// c 3

需要注意的是，for...in 循环不保证遍历对象属性的顺序，并且会遍历对象自身的可枚举属性以及从原型链上继承的属性。

对于数组，for...in 会遍历数组的索引，而不是数组元素。因此，对于数组遍历，更推荐使用 for...of 循环。

const myArray = [10, 20, 30];

for (const index in myArray) {
    console.log(index, myArray[index]);
}
// 输出:
// 0 10
// 1 20
// 2 30