JS - ES2015/ES6新特性详解1(let、const、For..of循环、迭代器、生成器)
相关文章系列:
[当前文章] JS - ES2015/ES6新特性详解1(let、const、For..of循环、迭代器、生成器)
JS - ES2015/ES6新特性详解2(Set, WeakSet, Map, WeakMap、箭头函数)
JS - ES2015/ES6新特性详解3(默认参数、不定参数、扩展运算符、解构)
JS - ES2015/ES6新特性详解4(类、模块、Promises、模板字符串)
JS - ES2015/ES6新特性详解5(代理、反射、Symbols、Unicode编码)
JS - ES2015/ES6新特性详解6(二进制和八进制、尾调用、其他新增的API)
[当前文章] JS - ES2015/ES6新特性详解1(let、const、For..of循环、迭代器、生成器)
JS - ES2015/ES6新特性详解2(Set, WeakSet, Map, WeakMap、箭头函数)
JS - ES2015/ES6新特性详解3(默认参数、不定参数、扩展运算符、解构)
JS - ES2015/ES6新特性详解4(类、模块、Promises、模板字符串)
JS - ES2015/ES6新特性详解5(代理、反射、Symbols、Unicode编码)
JS - ES2015/ES6新特性详解6(二进制和八进制、尾调用、其他新增的API)
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
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 进行循环获取数组值:
(2)或者使用 for..in 遍历对象属性(或索引)
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); }运行结果如下:
