注意： 对象不是一个可迭代对象，但是在ES9后对象可以通过{...obj} 展开运算符 进行遍历,还有对象的解构，都不是通过迭代器做到的，不同js引擎有不同实现，可以通过for实现，用obj.entries拿到对象的每一个键值对，放入到新的对象中，是ES9新增的一个特性，对对象的特殊处理。
1. 认识什么是迭代器
迭代器（iterator），是确使用户可在容器对象（container，例如链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节。
从迭代器的定义我们可以看出来，迭代器是帮助我们对某个数据结构进行遍历的对象。
在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议（iterator protocol）：
①迭代器协议定义了产生一系列值（无论是有限还是无限个）的标准方式；
②那么在js中这个标准就是一个特定的next方法；
next方法有如下的要求：
一个无参数或者一个参数的函数，返回一个应当拥有以下两个属性的对象：
done（boolean）
如果迭代器可以产生序列中的下一个值，则为 false。（这等价于没有指定 done 这个属性。）
如果迭代器已将序列迭代完毕，则为 true。这种情况下，value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。
value
迭代器返回的任何 JavaScript 值。done 为 true 时可省略。
// 编写的一个迭代器
const iterator = {
next: function() {
return { done: true, value: 123 }
}
}
// 数组
const names = ["abc", "cba", "nba"]
// 创建一个迭代器对象来访问数组
let index = 0
const namesIterator = {
next: function() {
if (index < names.length) {
return { done: false, value: names[index++] }
} else {
return { done: true, value: undefined }
}
}
}
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next()) // { done: false, value: "nba" }
console.log(namesIterator.next()) // { done: true, value: undefined }
console.log(namesIterator.next()) // { done: true, value: undefined }
console.log(namesIterator.next()) // { done: true, value: undefined }
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())2. 可迭代对象
它和迭代器是不同的概念：
当一个对象实现了iterable protocol协议时，它就是一个可迭代对象；
这个对象的要求是必须实现 @@iterator 方法，在代码中我们使用 Symbol.iterator 访问该属性；
当一个对象变成一个可迭代对象的时候，进行某些迭代操作，比如 for...of 操作时，其实就会调用它的 @@iterator 方法；
// 创建一个迭代器对象来访问数组
const iterableObj = {
names: ["abc", "cba", "nba"],
[Symbol.iterator]: function() {
let index = 0
return {
next: () => {
if (index < this.names.length) {
return { done: false, value: this.names[index++] }
} else {
return { done: true, value: undefined }
}
}
}
}
}
for (const item of iterableObj) {
console.log(item)
}3. 内置创建可迭代对象
事实上我们平时创建的很多原生对象已经实现了可迭代协议，会生成一个迭代器对象的： String、Array、Map、Set、arguments对象、NodeList集合；
const names = ["abc", "cba", "nba"]
console.log(names[Symbol.iterator])
// const iterator1 = names[Symbol.iterator]()
// console.log(iterator1.next())
// console.log(iterator1.next())
// console.log(iterator1.next())
// console.log(iterator1.next())
for (const item of names) {
console.log(item)
}
// Map/Set
const set = new Set()
set.add(10)
set.add(100)
set.add(1000)
console.log(set[Symbol.iterator])
for (const item of set) {
console.log(item)
}
// 函数中arguments也是一个可迭代对象
function foo(x, y, z) {
console.log(arguments[Symbol.iterator])
for (const arg of arguments) {
console.log(arg)
}
}
foo(10, 20, 30)
都是可迭代对象；
4. 可迭代对象的应用
那么这些可迭代对象可以被用在哪里呢？
①JavaScript中语法：for ...of、展开语法（spread syntax）、yield*（后面讲）、解构赋值（Destructuring_assignment）；
②创建一些对象时：new Map([Iterable])、new WeakMap([iterable])、new Set([iterable])、new WeakSet([iterable]);
③一些方法的调用：Promise.all(iterable)、Promise.race(iterable)、Array.from(iterable);
// 1.for of场景
// 2.展开语法(spread syntax)
const iterableObj = {
names: ["abc", "cba", "nba"],
[Symbol.iterator]: function() {
let index = 0
return {
next: () => {
if (index < this.names.length) {
return { done: false, value: this.names[index++] }
} else {
return { done: true, value: undefined }
}
}
}
}
}
const names = ["abc", "cba", "nba"]
const newNames = [...names, ...iterableObj]
console.log(newNames)
const obj = { name: "why", age: 18 }
// for (const item of obj) {
// }
// ES9(ES2018)中新增的一个特性: 用的不是迭代器
const newObj = { ...obj }
console.log(newObj)
// 3.解构语法
const [ name1, name2 ] = names
// const { name, age } = obj 不一样ES9新增的特性
// 4.创建一些其他对象时
const set1 = new Set(iterableObj)
const set2 = new Set(names)
const arr1 = Array.from(iterableObj)
// 5.Promise.all
Promise.all(iterableObj).then(res => {
console.log(res)
})
