Blog source code on GitHub

ES6(ECMAScript 6.0)新特征

0xinhua 发布于

#目录

ECMAScript 6.0已经在2015年6月17日正式发布（以下简称ES6）到现在已经过去了2年时间，发布的很多新的特征已成为了标准，如今ES8草案也公布了，Javascript的未来还是值得期待的；我从去年下半年开始接触ES6的，在代码上搭配babel来开发基于React框架的应用，发现其中许多特性确实简化了很多代码的编写，之前一直没有系统性得去学习这些新的特征，这篇博客算是我的ES6学习笔记，从简单的数组的一些新方法开始，ES6模块系统、class类...到较复杂的generator函数结束。完成之后，我会再陆续记录ES7、ES8..学习笔记。本篇包含以下内容：

  • 数组方法扩展
  • 解构赋值
  • let和const
  • 箭头函数
  • 字符串模板
  • Promise
  • Set和Map
  • 字符串扩展
  • Symbol
  • 模块Module
  • Class
  • Proxy
  • Generator

#数组方法扩展

Array.prototype.includes

新增includes方法，类似于String.prototype.includes，在这之前我们一般是使用下面这样的代码来判断数组中是否存在某个元素,

javascript
1if (arr.indexOf(el) !== -1) {
2    ...
3}

这里用indexOf有两个问题：

  • 违背“所见即所得”原则，indexOf方法它是用来返回下标位置的，并不能直观表达是否存在包含关系。
  • 无法判断NaN,[NaN].indexOf(NaN) > 0 // false

注意：includes只接受两个参数，接收2参数，查询的项以及查询起始位置

javascript
1// include 返回boolean值
2[1, 2].includes(3);  // false
3[1, 2, NaN].includes(NaN);  // true
4["a", "b", "c"].includes('a', 'b'); // true
5["a", "b", "c"].includes('a', 'd'); // true
6["a", "b", "c"].includes('a', 3); // false

Array.prototype.from

from 方法用于将类似数组的对象（key-value结构）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）转换成数组。 例如：

javascript
1console.log(Array.from('hello')); // [ 'h', 'e', 'l', 'l', 'o' ]
2
javascript
1const objLike = { 0: 0,  1: 1,  2: 2, length: 3 }; 
2console.log(Array.from(objLike)); // [0, 1, 2]

from还接受第二个方法类型的参数，类似map方法返回经方法处理过的值。

javascript
1const objLike = { 0: 0,  1: 1,  2: 2, length: 3 }; 
2console.log(Array.from(objLike, (k) => k+=1;))); // [1, 2, 3]

Array.prototype.of

of方法比from更简单，将一组值转换成数组,为了弥补使用new Array()构造数组的奇怪行为。 先看下new Array为我们做了什么？

javascript
1// 构造函数 new Array
2console.log(new Array()); // []
3console.log(new Array(1)); // [undefined x 1]
4console.log(new Array(1,2,3)); // [1,2,3]
javascript
1// Array.of()
2console.log(Array.of(); // []
3console.log(Array.of(1)); // [1]
4console.log(Array.of(1,2,3)); // [1,2,3]
5console.log(Array.of(undefined)); // [undefined]

Array.prototype.keys 、values 、entries

keys 、values很好理解，分别代表获取数组的索引和对应的值,entries则是输出这两个值。

javascript
1// keys
2for(let a of [1, 2, 3, 4, 5].keys()) {
3    console.log(a); // 0,1,2,3,4
4}
5// values
6for(let b of [1, 2, 3, 4, 5].values()) {
7    console.log(b); // 1,2,3,4,5
8}
9// entries
10for(let a of ['a', 'b'].entries()) {
11    console.log(a) // [0, 'a'] [1, 'b']
12}

Array.prototype.find 和 findIndex

注意：

  • find方法默认返回第一个符合条件的值,如果没找到则返回undefined,findIndex默认返回第一个符合条件的值的下标,如果没找到返回-1;
  • 二者接收参数必须得是方法,该回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
  • 这两个方法都可以z找到NaN.
javascript
1const arr = [1, 4, -5, 10, NaN];
2console.log(arr.find((k) => k > 5));  // 10
3console.log(arr.findIndex((k) => k > 1));  // 1
4console.log(arr.find((k) => Object.is(NaN, k) )); // NaN

Array.prototype.fill 和 copyWithin

fill可以理解为数组元素替换，可以指定填充开始位置和结束位置，copyWithin则可以理解为用指定元素填充到数组的对应位置， arr.copyWithin(target, start, end) target: 从指定下标开始 index:复制元素的下标 end: 复制元素结束下标 来看下面的例子：

javascript
1// fill
2console.log([1,2,3].fill(4)); // [4, 4, 4] 不指定开始和结束，全部替换
3console.log([1,2,3].fill(4,1)); // [1, 4, 4]
4console.log([1,2,3].fill(4,1)); // [1, 4, 4]
5console.log([1,2,3].fill(4,1,1)); // [1, 2, 3]
javascript
1// copyWithin
2console.log([1,2,3].copyWithin(1)); // [1, 1, 2]
3console.log([1, 2, 3, 4, 5, 6, 7].copyWithin(2)); // [1, 2, 1, 2, 3, 4, 5] 未指定复制元素的起始位置，默认用原数组进行填充替换
4console.log([1, 2, 3, 4, 5, 6].copyWithin(2, 1, 4)); // [1, 2, 2, 3, 4, 6] 可以理解为从下标为2元素开始，复制下标1-4的数组进行替换填充原数组

Array.prototype.find

#解构赋值

使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量; 可以很方便得将值和从数组中、属性从对象中提取到不同的变量中： 在写React的过程中，也会用到JSX的一个类型写法（Spread Attributes），中文名延展属性，例如子组件需要需要父组件传递a、b、c参数：

javascript
1// 子组件需要对应的a、b、c三个参数
2<Component a = {this.props.a} b = {this.props.b} c = {this.props.c} />;

JSX延展属性写法：

javascript
1// 子组件需要对应的a、b、c三个参数
2<Component {...this.props} />;
3

数组和对象的解构：

javascript
1// 数组的解构赋值
2
3[a, b, ...rest] = [1, 2, 3, 4, 5];
4console.log(a); // 1
5console.log(b); // 2
6console.log(rest); // [3, 4, 5]
javascript
1// 对象的解构赋值
2
3let obj = {a:1, b:2, c:3};
4const {a , b} = obj;
5console.log(a); // 1
6console.log(b); // 2
javascript
1// 如果没有实际值，得需要使用‘,’进行占位：
2
3let colors = [ "red", "green", "blue" ];
4let [ , , thirdColor] = colors;
5console.log(thirdColor);   // "blue"
javascript
1// 如果你想要获取特定的数组项，并且把剩余的项归在一个数组，那么你可以这样运用 rest操作符 来解构
2
3const color = ['red', 'blue', 'orange'];
4const [red, ...rest] = color;
5console.log(red); // 'red'
6console.log(rest); // ['blue', 'orange']

扩展运算符和剩余操作符都是以三点省略号开头，二者很像，用法上还是有一定区别:

javascript
1// 剩余操作符在函数中的使用
2
3function fn(a, b, ...args) {  
4   console.log(args);
5}
6fn(1, 2, 3, 4, 5 ); // [3, 4, 5]
7

扩展运算符和剩余操作符都是以三点省略号开头，二者很像，用法上还是有一定区别。扩展运算类似于使用‘...’分解数组中的值、对象属性；而剩余操作符是使用‘...’是用来解构和提取数据，多个元素合成一个元素。

#let和const

这里将var、let和const进行简单对比：

  • let和const均不能重复声明进行覆盖，而var可以；
  • let和const存在暂存死区,不存在变量提示,而var存在变量提升；
  • const一旦声明，不可更改，let和var可以更改；
  • let定义的变量只存在于块级作用域；
  • const只定义不赋值，会报错，var、let返回undefined；
  • let和const 声明的变量不再属于window的属性，可以在下面的例子中体现;
  • const除了声明的是常量外，其它和let是一样的;
javascript
1// let和const均不能重复声明
2const a = 'Hi';
3const a = 'Hello'; // Identifier 'a' has already been declared
javascript
1// const 、let的块级作用域(block-scoping)
2const city = 'Beijing';
3{
4  const city = 'Shanghai';  
5  console.log(city); // Shanghai
6}
7console.log(city); // Shanghai
javascript
1//  const 、let的块级作用域(block-scoping),let在for循环里
2for(let i=0;i<3;i++) {
3}
4console.log(i); // undefined
javascript
1//  const 、let的块级作用域(block-scoping),let在if条件
2if(..) {
3    let a = 'boo';
4} else {
5    ...
6}
7console.log(a); // undefined
javascript
1// let和const 声明的变量不再属于window的属性
2const PI = 3.14159;
3console.log(window.c); // undefined

关于暂存死区：在下面的这个例子，在let初始化之前，使用let重复定义在块中的变量，这时会抛错，因为这个变量存在于定义到待初始化处理的一个'暂存死区'中，具体可以查看MDN上的解释。

javascript
1if (x) {
2  let foo;
3  let foo; // TypeError thrown.
4}

#箭头函数

在ES6中利用语法糖使用“箭头”（=>）定义函数。

javascript
1var f = (x) => x;
2// 等同于
3var f = function (x) { return x };

如果没有参数，圆括号也可以省略了，

javascript
1var f = => return true;
2// 等同于
3var f = function () { return true };
javascript
1// 箭头函数写法
2[1,2,3].map(x => x + 1 );
3// 等同于
4[1,2,3].map(function (x) {
5  return x + 1;
6});
7

箭头函数与普通函数的区别：

  • 箭头函数的this是它定义时的所在的对象；
  • 没有arguments对象，要访问可以使用剩余操作符代替；
  • 不能使用yield命令，所以箭头函数不能用作Generator函数；

#字符串模板

ES6引入了一种新型的反撇号（`）字符串字面量语法；

javascript
1// 利用ES6反引号定义
2`<div>
3<span>keep the ${things} simple stupid .</span>
4</div>`
5// 等同于
6'<div><span>keep the'+things+' simple stupid .</span>'+
7+'</div>'

#Promise

什么是Promise?
Promise是抽象异步处理对象以及对其进行各种操作的组件; Promise对象出现避免了使用层层嵌套的回调函数，再也不用担心陷入地狱回调了，Promise的意义就在于 then 链式调用 ，它避免了异步函数之间的层层嵌套，将原来异步函数的嵌套关系 转变为便于阅读和理解的 链式步骤关系，代码也更加直观。

javascript
1// 回调地狱
2// a请求
3$.ajax({
4      url: 'a',
5      dataType:'json',
6      success: function(data) {
7          // 获取data数据 传给下一个b请求
8          var id = data.id;
9          $.ajax({
10              url:'b',
11              data:{"id":id},
12              success:function(){
13                    // 下一个请求 c
14              }
15          });
16      }
17});
javascript
1// Promise写法
2var a = function() {
3    var promise = new Promise(function(resolve, reject){
4        $.ajax({
5        url: 'a',
6        dataType:'json',
7        success: function(data){resolve(data)}
8        error: function(e){reject(e)}
9        });
10    })
11    return promise;
12}
13...b,c...
14a.then(b.then())

想要创建一个Promise对象，可以使用new来构造一个新的promise对象,例如：

javascript
1var promise = new Promise(function(resolve, reject) {
2 // 必须给定一个function作为参数，不然会报错；
3 // 处理结束后、调用resolve 或 reject
4});

大概流程是：

  1. new Promise(fn) 返回一个promise对象;
  2. 在 fn 中指定异步等处理
    • 处理结果正常的话，调用 resolve(处理结果值); • 处理结果错误的话，调用 reject(Error对象);

Promise对象有以下几个特点：

  • 1.有三种状态：
    • pending: 初始状态，不是成功或失败状态;
    • fulfilled: 意味着操作成功完成;
    • rejected: 意味着操作失败; 状态的变化只能是从 Pending 变为 Resolved 和从 Pending 变为 Rejected;
  • 2.Promise的prototype对象上有以下几个方法：
    • Promise.then()
    • Promise.catch()
    • Promise.all()
    • Promise.race()
    • Promise.resolve()
    • Promise.reject()
    • Promise.done()
    • Promise.finally()

Promise方法链: 其实就是在在Promise里把调用的多个方法连在一起作为一个方法链，例如：

javascript
1// Promise chain
2function taskA() {
3 console.log("Task A");
4}
5function taskB() {
6 console.log("Task B");
7}
8function onRejected(error) {
9 console.log(error);
10}
11var promise = Promise.resolve();
12promise
13 .then(taskA)
14 .then(taskB)
15 .catch(onRejected)

正常流程A task成功->B task成功-> C task,如果B task失败，将绕过C直接到catch方法，看下面这个例子：

javascript
1function taskA(value) {
2    return value +1;
3}
4function taskB(value) {
5    throw new Error('something wrong!');
6}
7function taskC(value) {
8    console.log(value);
9}
10function onRejected(error) {
11 console.log('catch error: '+ error);
12}
13var promise = Promise.resolve(1);
14promise
15 .then(taskA)
16 .then(taskB)
17 .then(taskC)
18 .catch(onRejected);
19 // catch error: something wrong! value 是undefined

关于Promise 链里如何传递参数？

答案很简单，只需要在前一个任务中增加return，下一个任务能接受到这个参数。例子：

javascript
1// Promise chain
2function taskA(value) {
3    return value +1;
4}
5function taskB(value) {
6    return value +2;
7}
8function taskC(value) {
9    console.log(value);
10}
11function onRejected(error) {
12 console.log(error);
13}
14var promise = Promise.resolve(1);
15promise
16 .then(taskA)
17 .then(taskB)
18 .then(taskC)
19 .catch(onRejected);
20 // 4

之前碰到了一个面试题，都知道promise好用，那Promise有哪些缺点：

  • 1.Promise无法终止，一旦建立了就会立即执行；
  • 2.必须严格要求接口规定方法编写代码，例如：不设置回调函数，会抛出错误，不能像回调函数方式那样可以自己自由的定义回调函数参数等；
  • 3.当它处于Pengding状态时候，无法得知目前进行到哪一个阶段了；

关于Promise这一节可以参照promise小人书;

#Set和Map

Set和Map是ES6新增的集合类型的数据结构:

Set

1.Set可以接受一个数组（或者类数组对象）作为参数，用来初始化; 2.Set类似于数组,但是没有重复值;

javascript
1// Set本身是一个构造函数
2console.log(new Set([1,2,3]))

Set内置的方法和属性：

  • add(); // 添加
  • clear(); // 清除Set
  • delete(); // 删除Set某个值
  • has() // 查找某个项
  • forEach() // 循环每一项
  • keys() // 遍历 key
  • values() // 遍历 value
  • entries() // 遍历key 和value
  • siez 属性，类似于数组的length

Map

Map是于对象类似的集合类型数据结构，map与object的不同在与，Object是一种“字符串-值”的对应，Map是“值-值”的对应，map没这个限制。

Map内置的方法和属性：

  • set(); // 添加
  • clear(); // 清除Set
  • delete(); // 删除Set某个值
  • has() // 查找某个项
  • forEach() // 循环每一项
  • keys() // 遍历 key
  • values() // 遍历 value
  • entries() // 遍历key 和value
  • siez 属性，类似于数组的length

#Symbol

Symbol既不是值也不是对象，它是第七种原始类型，是可以用来作为对象属性键的值。 Symbol的目的就是为了实现一个唯一不重复不可变的值；有两种方法来生产一个Symbol类型的值：

javascript
1// Symbol函数
2console.log(Symbol()); // Symbol()
3// Symbol.for方法
4var a = Symbol.for('symbA');
5var b = Symbol.for('symbA');
6console.log(Symbol.for('symbA')); // Symbol(symbA)
7console.log(a == b); // true
javascript
1var a = Symbol('a');
2console.log(a); // Symbol(a)
3console.log(typeof(a)) // 'symbol' 
4var b = Symbol('b');
5console.log(b); // Symbol(a)
6console.log(a == b) // false

Symbol可以用作对象属性名，但是区别是无法通过.来定义该属性：

javascript
1var symbola = Symbol();
2var b = {};
3var b.symbola = 'this is not a symbola!';
4console.log(b); //{ 'symbola' : 'this is not a symbola!'}
5b = {symbola:'this is a symbola!'};  // { Symbol() : 'this is a symbola!'}

Symbol无法在for...in、for...of被遍历查找到，看下面的例子：

javascript
1var a ={'a': 'a','a':'b'}
2for(var i in a ){console.log(i)} // a, b
3a[Symbol('c')] = 'c';
4console.log(a); // { a: "a", b: "b", Symbol(c): "c" }
5for(var i in a ){console.log(i)} // a, b

Symbol类型的一些应用途径：

  • 1.由于它的唯一性，每一个Symbol值都不相等，这意味着Symbol值可以作为标识符用于对象的属性名，不会出现同名的属性。(如果你定义同名属性对象，其实是被覆盖的，得的是后定义的属性值)
  • 2.Symbol类型的属性名无法被for...in等方法遍历到，可以用于定义一些私有属性。

#模块module

可以把模块理解为是一个独立的Javascript文件，在ES的module出现之前，JavaScript一直没有模块系统，先回顾一下前端的模块系统，了解一下什么是模块化？CommonJS又是什么？AMD和CMD规范分别有什么特点？

关于CommonJS

CommonJs最先源于nodejs社区，关于CommonJS的规范可以查看这里，先看下它的语法：

javascript
1// math.js
2exports.add = function() {
3    var sum = 0, i = 0, args = arguments, l = args.length;
4    while (i < l) {
5        sum += args[i++];
6    }
7    return sum;
8};
9// increment.js
10var add = require('math').add;
11exports.increment = function(val) {
12    return add(val, 1);
13};
14
15// program.js
16var inc = require('increment').increment;
17var a = 1;
18inc(a); // 2

CommonJs原先叫ServerJS,仅看名字就知道这个库服务于后端，也就是说在Nodejs等环境下用是没有问题的，但不适用于浏览器端，到了浏览器中，这样引用会出现问题：

  • 浏览器环境并不提供module、require等外部直接引用变量。
  • nodejs环境中require一个模块是直接从硬盘或内存中读取该文件，但到了浏览器中你需要从服务器中去下载这个文件，这就得发送http请求，require资源需要请求完才能执行。

社区在解决这个问题的时候产生了分歧：

  • Modules/1.x 流派： 1.x规范已经够用了，只需移植到浏览器端即可。例如工具Browserify就能将你的CommonJS代码转换成浏览器端也能执行的代码；
  • Modules/Async 流派
    这个观点觉得浏览器有自身的特征，不应该直接用 Modules/1.x 规范。这个观点下的典型代表是 AMD 规范及其实现 RequireJS。

AMD和CMD

AMD(异步模块定义)规范既然在浏览器端不支持，那么就改进CommonJS规范，先定义好你需要引用的模块，进行异步加载，在回调函数里执行逻辑代码，制定了一个Modules/Wrappings规范，具体二者有什么区别点击这里
AMD标准是requireJs定义的标准，而CMD是seaJS定义的标准，这两者有什么区别：

  • 对于依赖的模块，AMD是提前执行，CMD是延迟执行；
  • CMD依赖就近，也就是说需要用到时才写,AMD依赖前置，一开始就得把所需依赖写好；
javascript
1define(["require"], function(require) {
2  // 在这里，模块 a 已经下载并执行好
3  // ...
4  var a = require("./a");
5
6})

关于二者的区别可以查看知乎回答AMD 和 CMD 的区别有哪些？

Module

modules规范分两部分，一部分是如何导出export，一部分是如何导入import。 任何的值(例如方法、变量)都可以作为一个modules被导出：

javascript
1// 文件 a.js 直接导出变量
2export const PI = 3.14;
3const value = 'module';
4export function helloworld(){
5    console.log('Hello world~');
6}
7// 先定义再导出也是正确的
8export {PI, value};
9// 你也可以使用as进行重命名
10export {name1 as PI, name2 as value};

使用export命令导出模块后，那么可以在其他文件中通过import命令来导入这个模块

javascript
1// 按需导入
2import {PI, helloworld} from './a.js';
3// 对变量进行重命名
4import {PI as p} from './a.js';
5// 整体导入
6import * as a from './a.js';

default默认导出,export default是输出一个叫做default的变量或方法；它的后面不能再跟变量声明语句：

javascript
1// a.js 模块默认导出
2export default function() {
3    console.log('hello world');
4}
5// 或者这样写
6function helloworld(){
7    console.log('hello world');
8}
9export default helloworld;
10// 这样写会导致错误
11export default const helloworld = function() {
12    console.log('hello world');
13}
14// 引入的时候,不可以使用 类似{helloworld}这样的写法
15import helloworld from './a.js';
16helloword(); // 'hello world'

关于default：

  • export default是输出一个叫做default的变量或方法；它的后面不能再跟变量声明语句；
  • export default导出的模块，不能使用大括号方式导入；
  • 一个文件内不能使用多个export default；

#Class类

类的声明

class是创建类对象与实现类继承的语法糖，旨在让ES5中对象原型的写法更加清晰，易读。 在ES6前，如果想实现class面向对象的例子，我们通常使用function来模拟：

javascript
1// 使用function
2function People(name) {
3  this.name = name;
4  this.toSayHello = function () {
5      return console.log('Hello, my name is' + this.name );
6  }
7}
8
9var p = new People('ES6');
javascript
1// 使用class
2class People {
3  constructor(name) {
4      this.name = name
5  }
6  toSayHello() {
7      return console.log('Hello, my name is' + this.name );
8  }
9}
10

构造函数的缺点：每次实例化一个对象，就会执行构造函数里的代码，因此每当这个类被实例化的时候，这些方法和属性就会被拷贝到实例化出来的对象中,这样就会重复地在内存中分配一定区域来存储这些变量和方法。为了解决这个方法，可以在prototype中来添加该类的一系列常量和方法。定义在prototype的中的方法和属性，新实例出来的对象会进行引用，不会产生“吃内存”的现象。

javascript
1// 使用function
2function People(name) {
3  this.name = name;
4}
5
6People.prototype.toSayHello = function () {
7  return console.log('Hello, my name is' + this.name )
8};
9
10var p = new People('ES6');

function声明存在变量提升，但class的定义不存在提升；

javascript
1// 不会报错
2console.log(helloWorld());
3
4function helloWorld() {
5  return "Hello World";
6}
7
8// 报错
9var p = new People();
10
11class People() {
12}

constructor 方法

constructor属性返回对创建此对象的构造函数的引用。例如：

javascript
1var a = new Array();
2a.constructor // function Array(){...}
3a.constructor === Array // true

static 静态

类相当于实例的原型，所有在类里定义的方法，实例都能继承。但是在方法面前加上static关键字，就表示该方法不会被实例继承，该方法也被称作“静态方法”。 目前ES6只有静态方法，并没有静态属性，在ES7中有关于静态属性的提案，静态属性或方法需要用类名进行调用。

javascript
1
2class People {
3
4  //es7对于实例属性的提案，此属性可以在实例中访问到
5  type = 'animal';
6
7  //es7对于类的静态属性的提案，同样Babel支持
8  static myType = 'static';
9
10  constructor(name) {
11      this.name = name
12  }
13  toSayHello() {
14      return console.log('Hello, my name is' + this.name );
15  }
16}
17

ES5的继承

通过原型链实现继承：

javascript
1// 定义一个动物类
2function Animal (name) {
3  // 属性
4  this.name = name || 'Animal';
5  // 实例方法
6  this.sleep = function(){
7    console.log(this.name + '正在睡觉！');
8  }
9}
10// 原型方法
11Animal.prototype.eat = function(food) {
12  console.log(this.name + '正在吃' + food + '~~');
13};

将父类的实例作为子类的原型

javascript
1function Cat() {
2}
3Cat.prototype = new Animal();
4Cat.prototype.name = 'cat';
5var cat = new Cat();
6console.log(cat.sleep()); // cat 正在睡觉
7console.log(cat instanceof Animal); // true
a.原型链继承

ES6的继承

可以通过extends关键字继承父类的所有属性和方法。

javascript
1// 使用class
2class People {
3  constructor(name) {
4      this.name = name
5  }
6  toSayHello() {
7      return console.log('Hello, my name is' + this.name );
8  }
9}
10// 使用extends Woman 继承了People的所有属性和方法
11class Woman extends People {
12    constructor(name) {
13        super(name);
14        this.name = name;
15    }
16}
17

子类必须在constructor方法中调用super方法，否则新建实例时会报错。因为子类没有自己的this对象，而是继承父类的this对象;

# Generator

Generator的定义

形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield语句，定义不同的内部状态。Generator函数的调用方法与普通函数不同的是，调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，我们可以通过调用 next 方法，使得指针移向下一个状态。如下例子：

javascript
1function* stepGenerator() {
2  yield 'step1';
3  yield 'step2';
4  return 'it is a generator';
5}
6var g1 = stepGenerator();
7g1; // stepGenerator.....
8g1.next(); // Object {value: "step1", done: false}
9g1.next(); // Object {value: "step2", done: false}
10g1.next(); // Object {value: "it is a generator", done: true}
11g1.next(); // Object {value: undefined, done: true}
  • 实际上functionstepGenerator 和 function stepGenerator 或者 function *stepGenerator得到的结果是一样的，只是写法不一样；

调用stepGenerator对象的时候，Generator并没有被立即执行，调用next方法时，函数开始执行，next 方法返回一个拥有 value 和 done 两个字段的对象,下次调用 next，函数会从 yield 的下一个语句继续执行,等到整个函数执行完，next 方法返回的 done 字段会变成true。

不仅仅yield语句会中断执行，如果Generator中在yield前有return，同样也会停止执行。

javascript
1function* stepGenerator() {
2  return 'it is a generator';
3  yield 'step1';
4  yield 'step2';
5}
6var g1 = stepGenerator();
7g1; // stepGenerator.....
8g1.next();  // Object {value: "it is a generator", done: true}
9g1.next(); // Object {value: undefined, done: true}
10

Generator的输入输出

总结一下Generator与常见的函数有一些共同点，但也有一些差异：

  • 通常函数以Function开始，Generator以Function*开始；
  • 常见的函数一旦执行不能暂停，但是Generator可以，并且通过yield关键字来暂停执行；
  • generator内部多了yield关键字，yield类似于普通函数的return，但是不同的是可以有多个yield暂停Generator函数的执行；
  • 常见的函数执行之后会返回结果，Generator执行之后返回Generator对象;

更多关于Generator: 迭代器和生成器 generators in v8 ES6 In Depth: Generators （...）

Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写, Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

Proxy 已经被几乎所有的现代化浏览器兼容。（当然IE不是一个现代化浏览器）,Proxy 接收两个对象参数，一个是需要代理的 object 对象，另一个handler也是一个对象，在这个对象里定义对所代理的对象进行设置的方法。 例子：

javascript
1let obj = {
2  a: 1,
3  b: 2
4}
5let handler = {
6 gets (obj, prop) {
7 console.log(obj)
8 console.log(prop)
9  }
10}
11proxy = new Proxy(obj, handler)
12console.log(proxy) // Proxy {a: 1, b: 2}
13console.log(proxy.a) // {a: 1, b: 2} a

附录