文章首发

本文已经默认你已经知道generator是什么以及for...of和数据类型map怎么用了。

前ES6的时代怎么遍历

先来一道思考题：

通过下面的变量

寻找xiaohong(假设名称唯一)是否喜欢basketball
所有同学的名字


const students = {
    xiaohong: {
        age: '22',
        fav: ['sleep', 'basketball'],
        teachers: {
            english: 'daming',
            chinense: 'helios',
            math: ['helios2', 'helios3']
        }
    },
    xiaoming: {
        age: '22',
        fav: ['sleep', 'basketball', 'football'],
        teachers: {
            english: 'daming',
            chinense: 'helios',
            math: ['helios2', 'helios3']
        }
    },
}

对于第一个问题来说，我们可以使用各种循环语句： for/while


for (let i =0 ;i < students[xiaoming].fav.length; i++) {
  if (students[xiaoming].fav[i] === 'basketball') console.log(true)
}


let i = 0;
while(i++ < students[xiaoming].fav.length) {
  if (students[xiaoming].fav[i] === 'basketball') console.log(true)
}

for...of


for (let item of students[xiaoming].fav ) {
  if (item === 'basketball') console.log(true)
}

那么对于第二个问题来说，因为for/while是不能遍历对象的，所以行不通，但是对象有一个专属的遍历方法 for...in

我们来看一下怎么通过for...in来遍历：


for (let stu in students) {
   console.log(stu)
}

你可能会想了，通过for...in去遍历数组会怎样呢？我们看一下通过for...in去遍历：

for (let item in students[xiaoming].fav) {
   console.log(item)
  // 或者去判断
}

哎呀，通过for...in不也照样能实现数组的遍历么，那为什么不归结到数组的遍历里面去呢！这里面还有一些细节需要去了解（这也是上面的“对象有一个专属的遍历方法”为什么加粗），我们通过一段代码去解释：


const num = [5, 6, 7]
for (let i in  num) {console.log(i + 1)}

// 01
// 11
// 21

这是因为for-in 是为普通对象({key: value})设计的，所以只能遍历到字符串类型的键。

还有下面这个虽然不常用，但是也是不得不说的：


const arr = [5, 6, 7]
arr.foo = function() {}
for (let i in arr) {
    console.log(i)
}

// 5
// 6
// 7
// foo !!!

foo属于arr上面的方法，被遍历出来是说的过去的。

那么用for...of我们来看看会怎么样


for (let stu of students){}
// Uncaught TypeError: students is not iterable

is not iterable，这个iterable是神马东西，我们接下来下面一步步的看。

先从可迭代（iterable）和迭代器（iterator）说起

iterable是ES6对iteration（迭代/遍历）引入的接口。

如果一个对象被视为iterable（可迭代）那么它一定有一个Symbol.iterator属性，这个属性返回一个iterator（迭代器）方法，这个方法返回一个规定的对象（这个后面会说）。也就是说iterable是iterator的工厂，iterable能够创建iterator。iterator是用于遍历数据结构中元素的指针。

两者之间的关系

Axel Rauschmaye大神的图简直不能再清晰了。

数据消费者： javascript本身提供的消费语句结构，例如for...of循环和spread operator (...) 数据源：数据消费者能够通过不同的源（Array，string）得到供数据消费者消费的值；

让数据消费者支持所有的数据源这是不可以行的，因为还可能增加新的数据消费者和数据源。因此ES6引入了Iterable接口数据源去实现，数据消费者去使用

可迭代协议（iterable protocol）和迭代器协议（iterator protocol）

可迭代协议（iterable protocol）

可迭代协议（iterable protocol） 是允许js对象能够自定义自己的迭代行为。

简单的说只要对象有Symbol.iterator这个属性就是可迭代的，我们可以通过重写（一些对象实现了iterable，比如Array，string）/添加（对于没有实现iterable的对象比如object，可以添加这个属性，使之变为可迭代的）该熟悉使之变为可迭代的。

当一个对象需要被迭代（for...of 或者 spread operator ）的时候，他的Symbol.iterator函数被调用并且无参数，然后返回一个迭代器。

迭代器协议（iterator protocol）

迭代器协议定义了一种标准的方式来产生一个有限或无限序列的值。

当一个对象被认为是一个迭代器的时候，它会至少实现next()方法，next()方法返回两个属性value(d迭代器返回的值)和done（迭代时候已经结束）。

还有几个可选的方法可以被实现，具体请看：sec-iterator-interface

iterable协议，iterator协议还有next之间的关系

来源于网络

然后谈谈ES6中的for...of说起

再文章的最开始我们已经说了再前ES6的时候，如何去遍历。现在我们说说ES6新增的for...of的作用。

for...in

在前面也已经说了，在ES6之前遍历object的时候用for...in循环，for...in会遍历对象上所有可枚举的值（包括原型(prototype)上的属性），比如下面这样：

function foo() {
    this.name = 'helios'
}

foo.prototype.sayName = function() {
    return this.name;
}
var o = new foo();
for (var i in o) {
    console.log(i)
}
// name
// sayName

如果我们只想遍历对象自身的属性，可以使用hasOwnProperty，如下：


function foo() {
    this.name = 'helios'
}

foo.prototype.sayName = function() {
    return this.name;
}
var o = new foo();
for (var i in o) {
    if (!o.hasOwnProperty(i)) continue;
    console.log(i)
}

如果我们不想让一个对象的属性，在for...in中不被遍历出来，可是使用Object.defineProperty来定义对象上的属性是否可别枚举（更多的属性请看：Object.defineProperty()），具体如下面代码：

var obj = {name: 'helios'}

Object.defineProperty(obj, 'age', {
    enumerable: false
})

for (var i in obj) {
    console.log(i)
}

在这一小节的最后我们来说说for...in中的in操作符的含义：

prop in obj：

含义：判断prop是否在obj中
prop：对象的key属性的类型（string / Symbol）
返回值： boolean

我们来看一组例子：

var o = {
    name: 'heliso'
}
console.log('name' in o) // true
console.log(Symbol.iterator in o) // false
console.log('toString' in o)  // true

这个操作符虽然也适用于数组，但是尽量还是不要用在数组中，因为会比较奇怪,如下代码：

var arr = [6, 7,8]

console.log(7 in arr)  // false
console.log(1 in arr)  // true
console.log('length' in arr)  // true

主要是前两个比较奇怪对不对，因为对于数组prop代表的是数组的索引而为其存在的值。按照这样的思路，正在看的读者你能思考一下in操作符在字符串中是怎么的模式么？

for...of能遍历的集合

只要是实现了Interable接口的数据类型都能被遍历。

javascript内部实现的有：

Array
String
Map
Set
arguments
DOM data structures

并不是所有的iterable内容都来源于数据结构，也能通过在运行中计算出来，例如所有ES6的主要数据结构有三个方法能够返回iterable对象。

entries() 返回一个可遍历的entries
keys() 返回一个可遍历的 entries 的keys。
values() 返回一个可遍历的 entries 的values。

如果for...of不能遍历怎么办

那就数据结构（数据源）去实现iterable就可以了。

用通俗的话说就是，你如果要遍历一个对象的话，有一下几个步骤：

对象如果没实现Symbol.iterator那就去实现
对象的Symbol.iterator函数要返回一个iterator
iterator返回一个对象，对象中至少要包含一个next方法来获取
next方法返回两个值value和done

现在说说怎么使object变为可迭代的

上面我们已经铺垫了这么多了，我们说了javascript中object是不能被迭代了，因为没有实现iterable，现在让我们来实践一下让object变的可迭代。

第一步：先尝试着使用for...of遍历object

下面这样写肯定是不行的


const obj = {
    name: 'helios',
    age: 23
}

for (let it of obj) {
    console.log(it)
}
// TypeError: obj is not iterable

第二步：让object实现iterable接口


const obj = {
    name: 'helios',
    age: 23,
    [Symbol.iterator]: function() {
        let age = 23;
        const iterator = {
            next() {
                return {
                    value: age,
                    done: age++ > 24
                }
            }
        }
        return iterator
    }
}

如果iterable和iterable是一个对象的话，上面的代码可以简化为：


function iterOver() {
    let age = 23;
    const iterable = {
        [Symbol.iterator]() {return this},
        next() {
            return {
                value: age,
                done: age++ > 24
            }
        }
    }

    return iterable
}

for (let i of iterOver()) {
    console.log(i)
}

现在生成器（generator）可以出场了

我们如果每次想把一个不能迭代的对象变为可迭代的对象，在实现Symbol.iterator的时候，每次都要写返回一个对象，对象里面有对应的next方法，next方法必须返回valua和done两个值。

这样写的话每次都会很繁，好在ES6提供了generator（生成器）能生成迭代器，我们来看简化后的代码：


const obj = {
    name: 'helios',
    age: 23,
    [Symbol.iterator]: function* () {
        while (this.age <= 24) yield this.age++
    }
}

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

让object可迭代真的有意义么

知乎的这个回答是很有水平的了：为什么es6里的object不可迭代？

在stackoverflow中也有很高质量的回答：Why are Objects not Iterable in JavaScript?

在上面的回答中从技术方面说了为什么Object不能迭代（没有实现iterable），还说了以什么样的方式去遍历Object是个难题，所以把如何迭代的方式去留给了开发者。

但是还是要思考的一个问题就是：我们真有必要去迭代对象字面量么？

想一下我们要迭代对象字面量的什么呢？是keys还是values亦或者是entries，这三种方式在ES6提供的新的数据类型map里面都有呀，完全是可以代替object的。在这里不说object和map的区别，只是说说在ES6以后我们想把两个事物关联起来的时候，不一定要非得是用对象字面量了，map支持的更好一下。

对于什么时候用对象字面量（object）什么时候使用map我们可以做一下总结：

对象字面量（object）应该是静态的，也就是说我们应该已经知道了里面有多少个，和对象的属性有什么
使用对象字面量（object）的一般场景有：
- 不需要去遍历对象字面量（object）的所有属性的时候
- 我们知道了里面有多少个属性和对象的属性是什么的时候
- 需要去JSON.stringify和JSON.parse时候
其他的情况用map，其他的情况包括：
- key不是字符串或者symbol的时候
- 需要去遍历的时候
- 要得到长度的时候
- 遍历的时候对顺序有要求的（对象字面量（object）可能不是按照你写的顺序）

也并不说是map就肯定比对象字面量（object）好，map也有如下的缺点：

不能使用对象解构
不能JSON.stringify/JSON.parse

参考