前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

链接：https://juejin.im/post/5c8739b4f265da2dd94ce54a

前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

链接：https://juejin.im/post/5c8739b4f265da2dd94ce54a