JS - ES2015/ES6新特性详解1（let、const、For..of循环、迭代器、生成器）

作者：hangge | 2017-06-13 08:10

ECMAScript 6 是目前最新的 ECMAScript 标准，于 2015 年 6 月被批准。ES2015 是该语言的一个显著更新，也是自 2009 年 ES5 标准确定后的第一个重大更新。现在，这些功能正逐渐在主要的 JavaScript 引擎上实现。

ES2015 给开发人员带来了很多惊喜，小到受欢迎的语法糖，例如箭头函数（arrow functions）和简单的字符串插值（string interpolation），大到烧脑的新概念，例如代理（proxies）和生成器（generators）。

为了让大家更好地了解这些新特性，下面我通过一系列文章来对它们做一个大盘点。

一、let 与 const

过去我们使用 var 声明变量，而到了 ES6 中改用 let 和 const。

1，let（块变量）

（1）var 的问题在于它会泄露变量到其他代码块中，比如下面 for 循环或者 if 语句：

for (var i=0; i<5; i++) {
  console.log('sm')
}
console.log(i) // 5

由于 ES5 只有全局作用域和函数作用域，没有块级作用域，下面代码执行后，我们会发现内层变量覆盖外层变量。

var name = 'hangge.com';
if(true) {
    var name = '航歌';
    console.log(name);  //航歌
}
console.log(name);  //航歌

（2）而使用 let 所声明的变量，只在 let 命令所在的代码块内有效。

let name = 'hangge.com';
if(true) {
    let name = '航歌';
    console.log(name);  //航歌
}
console.log(name);  //hangge.com

2，const（常量）

（1）const 是用来定义常量，或者说是只读变量。

const hangge = {};
hangge = new Array(1, 2, 3);

（2）要注意的是，const 对象仍然可以被改变的。

const hangge = {};
hangge.name = '航歌'
console.log(hangge.name) // 航歌

二、For..of循环

（1）过去我们可以使用 for 或者 foreach 进行循环获取数组值：

var array = ['a', 'b', 'c', 'd'];

console.log("--- for循环 ---");
for (var i = 0; i < array.length; i++) {
  var element = array[i];
  console.log(element);
}

console.log("--- forEach循环 ---");
array.forEach(function (element) {
  console.log(element);
});

（2）或者使用 for..in 遍历对象属性（或索引）

var array = ['a', 'b', 'c', 'd'];

console.log("--- for in循环 ---");
for (var key in array) {
    console.log(key);
}

（3）ES6 新增了 for..of 迭代器，它与 for..in 的区别是：它返回的是值而不是 keys

const array = ['a', 'b', 'c', 'd'];

console.log("--- for of循环 ---");
for (const element of array) {
    console.log(element);
}

三、迭代器（Iterators）

迭代器对象允许像 CLR IEnumerable 或者 Java Iterable 一样自定义迭代器。它是一个比数组更动态的类型，支持像 LINQ 一样的惰性设计模式。

下面是一个简单的使用样例：

let infinite = {
  [Symbol.iterator]() {
    let c = 0;
    return {
      next() {
        c++;
        return { done: false, value: c }
      }
    }
  }
}


for (var n of infinite) {
  if (n > 5)
    break;
  console.log(n);
}

运行结果如下：

四、生成器（Generators）

Generator 通过使用 function* 和 yield 关键字简化了迭代器的编写。一个通过 function* 声明的函数会返回一个 Generators 实例。

Generator 是迭代器包含额外的 next 和 throw 方法的子类型。这些特性使得值可以流回 Generator，故 yield 是一个可以返回（或抛出）值的表达式。

var infinity = {
  [Symbol.iterator]: function*() {
    var c = 1;
    for (;;) {
      yield c++;
    }
  }
}

for (var n of infinity) {
  if (n > 5)
    break;
  console.log(n);
}