ES6中for...of循环和可迭代对象

📝 个人简介

⭐ 个人主页：我是段段🙋‍
🍊 博客领域：编程基础、前端💻
🍅 写作风格：干货！干货！都是干货！
🍑 精选专栏：ES6
🛸 支持段段：点赞👍、收藏⭐、留言💬

在之前，有很多方法可以遍历数组和对象

最经典的就是for循环，它可以遍历数组或者有索引且具有length属性的对象

// 遍历数组
let arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++) {
    console.log( arr[i] )
}
// 结果
// 1
// 2
// 3

// 遍历对象
// 可以使用Object的keys()方法和values()方法分别获取键名和值进行遍历
let obj = {
    a: '1',
    b: '2',
    c: '3'
}
let arrK = Object.keys(obj)
let arrV = Object.values(obj)
console.log( arrK ) // [ 'a', 'b', 'c' ]
console.log( arrV ) // [ '1', '2', '3' ]

for (var i = 0; i < arrK.length; i++) {
    console.log( arrK[i] )
}
// 结果
// a
// b
// c

for (var j = 0; j < arrV.length; j++) {
   console.log( arrV[j] )
}
// 结果
// 1
// 2
// 3

除此之外，循环数组还可以用：while、do…while、forEach、map、every、some、fliter、for…in等，这里不再一一介绍；循环对象还可以用for...in

// for...in循环数组
let arr = [1, 2, 3]
for(let val in arr){
    console.log( val )
}
// 结果
// 0
// 1
// 2

// for...in循环对象
let obj = {
    a: '1',
    b: '2',
    c: '3'
}
for(let prop in obj){
    console.log( `${prop}: ${obj[prop]}` )
}
// 结果
// a: 1
// b: 2
// c: 3

而ES6中增加了一种新的遍历数据的方式：for...of，如若要使用for…of进行遍历，其原型链上必须有Symbol.iterator属性（Symbol是ES6中新增的一种数据类型，即第七种数据类型），iterator也是ES6中新增的遍历器，其本质上是一个接口，主要是为不同的数据结构提供统一的访问机制

具有iterator接口的数据结构：Array、Set、Map、NodeList、arguments、String等，以Array、Set、Map为例进行查看

在控制台输入一个空数组，然后回车点击其原型链即可查看

Set和Map本质上是一个构造函数，需要先通过new关键字创建实例，然后在控制台打印实例即可查看，Set构造函数的查看如下

Map构造函数的查看如下

而对象的原型链上是没有Symbol.iterator属性的，即对象是不能够使用for…of进行遍历的

如果使用for…of进行遍历，会在控制台报类型错误

let obj = {
	a: '11',
	b: '22'
}
for(let prop of obj){
	console.log( prop )
}
 // Uncaught TypeError: obj is not iterable 未捕获类型错误：obj是不可迭代的

iterator的遍历过程如下

1. 创建一个 指针对象，指向当前数据结构的起始位置
2. 第一次调用指针对象的next()方法，将指针对象指向数据结构的第一个成员
3. 第二次调用指针对象的next()方法，将指针对象指向数据结构的第二个成员
4. 然后就一直调用指针对象的next方法，直到其指向数据结构的结束位置

以数组为例进行分析：

我们知道数组的原型链上是有Symbol.iterator属性的，首先需要拿到Symbol.iterator对应的函数

let arr = [11, 22]
console.log( arr[Symbol.iterator] )

// 可以在控制台看到输出了：
// ƒ values() { [native code] }

// 而在原型链上看到的是这样的
// Symbol(Symbol.iterator): ƒ values()

目前已经拿到了Symbol.iterator对应的函数，接下来调用这个函数并将其赋值给变量，在控制台查看其返回值是什么？

let iteratorObj = arr[Symbol.iterator]()
console.log( iteratorObj ) 

可以看到该函数返回了一个对象，对象上有一个键值对，其键名为next，值为next()函数

那么调用变量的next()方法会发生什么呢？

不妨我们尝试调用变量iteratorObj的next()方法（第一次调用），并在控制台输出

let val1 = iteratorObj.next()
console.log( val1, 'val1' )

// 输出结果如下
// {value: 11, done: false} 'val1'

紧接着第二次调用变量的next()方法，并在控制台输出

let val2 = iteratorObj.next()
console.log( val2, 'val2' )

// 输出结果如下
// {value: 22, done: false} 'val2'

因为arr输出初始化时只有两项，那如果再调用一次next()方法呢？（第三次调用）

let val3 = iteratorObj.next()
console.log( val3, 'val3' )

// 输出结果如下
// {value: undefined, done: true} 'val3'

如果再调用一次呢？（第四次调用）

let val4 = iteratorObj.next()
console.log( val4, 'val4' )

// 输出结果如下
// {value: undefined, done: true} 'val4'

可以发现不管后面再调用几次，控制台输出的结果都是{value: undefined, done: true}，因为已经没有数据可以进行遍历了

接着用图片再来解释一遍

首先会创建一个指针对象

然后第一次调用next()方法，指针对象指向第一个成员，并返回{value: 11, done: false}

然后第二次调用next()方法，指针对象指向第一个成员，并返回{value: 22, done: false}

然后第三次调用next()方法，指向结束位置，并返回{value: undefined, done: true}

以上就是iterator遍历器在for…of遍历中起到的作用及遍历过程，可以看出当指针对象指向成员时，返回的数据结构是：{value: 值, done: false}，当指针对象指向结束位置时，返回的数据结构是：{value: undefined, done: true}，其中value表示当前指针对象指向的值，done相当于一个标识，标识当前位置是不是结束位置，false表示否，true表示是

那么我们可不可以写一个类似于Symbol.iterator的方法，让对象可以使用for…of遍历呢？

答案是肯定可以的

首先需要明确实现一个这样的方法需要分为几步

1. 首先需要给对象添加一个函数，即Symbol.iterator = function(){}
2. Symbol.iterator需要返回一个对象，对象上有一个键值对，其键名为next，值为next()方法
3. next()方法返回对的数据结构如下：{value: 值, done: false} || {value: undefined, done: true}

然后就可以开始实现了

let obj = {
	a: '33',
	b: '44'
}

将方法挂载到Object原型链上

Object.prototype[Symbol.iterator] = function(){
    let index = 0, // 用来判断指针是否指向了结束位置
        values = Object.values(obj) // 获取到对象中所有的值
    return {
        next: function() {
            return index >= values.length ? { value: undefined, done: true } : { value: values[index++], done: false }
        }
    }
}

// 用for...of循环对象
for(let prop of obj){
    console.log( prop )
}
// 输出结果
/// 33
// 44

也可以将写的方法挂载在当前对象上

obj[Symbol.iterator] = function () {
    let index = 0,
        values = Object.values(obj)
    return {
        next: function() {
            return index >= values.length ? { value: undefined, done: true } : { value: values[index++], done: false }
        }
    }
}

验证其执行过程也是正确的

let iteratorObj = obj[Symbol.iterator]()

let val1 = iteratorObj.next()
console.log( val1, 'val1' )

let val2 = iteratorObj.next()
console.log( val2, 'val2' )

let val3= iteratorObj.next()
console.log( val3, 'val3' )

for(let prop of obj){
    console.log( prop )
}

// 输出结果
// {value: '33', done: false} 'val1'
// {value: '44', done: false} 'val2'
// {value: undefined, done: true} 'val3'
// 33
// 44

至此，就实现了用for…of可以遍历对象，有什么问题欢迎大家评论留言~~