一、字面量增强

如何理解Javascript中的字面量(literal)？
javascript字面量

• 更安全的二进制字面量（0b1111101）
• 更安全的八进制字面量（0o767）
• 字符串支持 Unicode

二、迭代器（Iterator）

所谓迭代器，其实就是一个具有next方法的对象，每次调用next都会返回一个结果对象，该结果对象有两个属性，value表示当前的值，done表示遍历是否结束。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

下面是用ES5实现的一个简单迭代器的例子。

function makeIterator() {
  var _value = 0
  var max = 5
  return {
    next: function() {
      _value += 1
      if (_value > max) { throw new Error('已经超过 5 了！') }
      if (_value === max) {
        return { value: _value, done: true }
      } else {
        return { value: _value, done: false }
      }
    }
  }
}

var it = makeIterator()

打印结果

三、生成器（Generator）

生成器其实就是生成迭代器的语法糖。形式上，Generator 函数是一个普通函数，但是有两个特征。

• function关键字与函数名之间有一个星号；
• 函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

上面代码定义了一个Generator函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world和return语句（结束执行）。

Generator函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

总结一下，调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

四、可迭代对象与for ... of

一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以用for...of循环遍历它的成员。如果一个对象具有Symbol.iterator属性，则就称这个对象是可迭代的对象。

for...of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象（比如arguments对象、DOM NodeList对象）、Generator 对象，以及字符串。

数组和普通对象都可以用for...in来遍历，但数组可以迭代，而普通对象不能迭代。而且 JS 原有的for...in循环，只能获得对象的键名，不能直接获取键值。

const arr = ['red', 'green', 'blue'];
for (let key in arr) {
  console.log(key) // 0, 1, 2
}

var obj = {
  name: 'JOJO',
  sex: '男',
  skills: '欧啦欧啦'
}
for (let key in obj) {
  console.log(key) // name, sex, skills
}

ES6 提供了for...of循环，允许遍历获得键值。

但是对于普通的对象，for...of结构不能直接使用，会报错

这是因为数组默认部署了Symbol.iterator属性，而对象却没有这个属性

有两个办法可以解决这个问题

一是使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组。

var obj = {
  name: 'JOJO',
  sex: '男',
  skills: '欧啦欧啦'
}

for (var key of Object.keys(obj)) {
  console.log(key + ': ' + obj[key]); // name: JOJO, sex: 男, skills: 欧啦欧啦
}

二是使用 Generator 函数将对象重新包装一下。

五、总结一下 JS 里的遍历方法

以数组为例，JS里有以下几种遍历方法

1. for循环

for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

缺点：写起来比较麻烦

2. forEach

myArray.forEach(function (value) {
  console.log(value);
});

缺点：无法中途跳出forEach循环，break命令或return命令都不能奏效。

3. for...in（遍历键名）

for (var index in myArray) {
  console.log(myArray[index]);
}

缺点：

• 数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
• for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
• 某些情况下，for...in循环会以任意顺序遍历键名。

总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

4. for...of（遍历键值）
   如果用for...of遍历对象，则必须是可迭代的对象。

for (let value of myArray) {
  console.log(value);
}

for...of循环相比上面几种做法，有一些显著的优点：

• 有着同for...in一样的简洁语法，但是没有for...in那些缺点。
• 不同于forEach方法，它可以与break、continue和return配合使用。
• 提供了遍历所有数据结构的统一操作接口。

参考：
迭代器与 for of的使用和原理
Iterator 和 for...of 循环
Generator 函数的语法
迭代器和生成器 MDN