ES7 新增 iterable 对象
在 ES7 中，新增了 iterable 对象，它是一种严格意义上的可迭代对象类型，相比于之前的数组和类数组对象，它还可以支持自定义迭代器，提供更灵活的迭代访问方式。
为什么需要 iterable 对象？
在 JavaScript 中，我们经常需要进行数据的迭代处理操作，例如遍历数组中的每一个元素，用 forEach() 方法实现：
let arr = [1, 2, 3] arr.forEach((value, index) => { console.log(value, index) })
但是，这样的处理方式仅限于数组类型，如果我们要处理类数组对象或者自定义对象，就需要通过转换成数组来进行遍历：
let obj = {0: 'a', 1: 'b', length: 2} Array.from(obj).forEach((value, index) => { console.log(value, index) })
或者使用 for...in 循环来遍历：
for(let key in obj) { console.log(obj[key]) }
但是，这样的处理方式又会带来不必要的性能损耗和转换成数组后的额外开销。于是，ES6 中引入了新的迭代协议，定义了一个迭代对象类型，即 Iterable 类型，使我们可以更灵活地进行数据迭代操作。
Iterable 对象的定义
Iterable 对象有两个重要的相关的概念，分别是迭代器（Iterator）和迭代协议（Iterator Protocol）。
迭代器是一种对象，它可以根据迭代协议返回一个值的序列。每一个 Iterable 对象都可以使用迭代器进行操作，返回的值序列可以是任何类型的数据。
迭代协议定义了迭代器对象的接口规范，包含一个 next() 方法，用于返回一个序列值对象，序列值对象包含两个属性，value 代表返回的值，done 代表这个序列是否结束，如果结束，done 的值为 true，否则为 false。
Iterable 对象的示例代码
下面是一个基本示例，展示如何创建 Iterable 对象及其定义的迭代器协议：
let obj = { data: [1, 2, 3], [Symbol.iterator]: function() { let index = 0 let arr = this.data return { next: function() { if (index < arr.length) { return {value: arr[index++], done: false} } else { return {value: undefined, done: true} } } } } } for (let value of obj) { console.log(value) }
这个例子中创建了一个 obj 对象，定义了一个 Symbol.iterator 方法，返回一个 iterator 对象，iterator 对象定义了一个 next 方法，通过 next 方法来实现数据迭代遍历，最终返回序列值对象，实现了数据的迭代操作。
Iterable 对象和 for...of 循环
ES6 中引入了 for...of 循环，可以更方便地进行数据迭代操作，for...of 循环遍历的必须是可迭代对象，同时会自动获取迭代器对象并执行 next 方法，直至序列结束。
下面是一个 for...of 循环示例代码，展示如何使用 iterable 对象：
let str = 'abc' for (let value of str) { console.log(value) }
在这个例子中，字符串类型本身就是一个 iterable 对象类型，for...of 循环读取字符串中的每一个字符并输出。
Iterable 对象和解构赋值
解构赋值也可以用于 iterable 对象，例如：
let [a, b] = [1, 2] let [x, y] = new Set(['a', 'b'])
这个示例展示了解构赋值如何利用 iterable 的特性，分别将数组和 Set 类型的对象进行解构并赋值给变量。
Iterable 对象的指导意义
Iterable 对象提供了一种更灵活、更高效的数据遍历方式，对于开发者来说，更多地掌握使用 Iterable 对象的技巧和方法，有助于提高代码的可读性和质量。
目前，Iterable 对象已得到广泛的支持和应用，在大部分 web 前端开发语言中都得到了原生的支持，比如 ES6、TypeScript 等。随着新技术的不断更新和发展，相信 Iterable 对象的应用场景也会日益丰富。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bad82e306f20b3a69f0cf7
