当前位置: > > > JS - ES2015/ES6新特性详解1(let、const、For..of循环、迭代器、生成器)

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)

ECMAScript 6 是目前最新的 ECMAScript 标准,于 20156 月被批准。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);
}
运行结果如下:
评论0