ES6

ES6教程

对象字面量

• 方法属性

    let obj = {
        // before
        foo: function() {
            return 'foo'
        },
  
        // after
        bar() {
        return 'bar'
        }
    }
  

• proto

    let o = {
        __proto__: new Foo()
    }
  

• 属性名动态计算

    let arr = [1, 2, 3]
    let outArr = arr.map(n => {
        return {
          [ n ]: n,
          [ `${n}^2` ]: Math.pow(n, 2)
    }
    })
    console.dir(outArr) //=>
      [
        { '1': 1, '1^2': 1 },
        { '2': 2, '2^2': 4 },
        { '3': 3, '3^2': 9 }
    ]
  

• 同名方法属性省略

        // module.js
        export default {
          someMethod
        }
  
        function someMethod() {
            // ...
        }
  
        // app.js
        import Module from './module'
  
        Module.someMethod()
  

const

let

产生块级作用域

    for (let i = 0; i < buttons.length; i++) {
        // ...
    }

for-of循环

• ES5中的循环(不能响应break,continue,return)

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

• for-in(遍历属性)

• 属性遍历

    for (var key of Object.keys(someObject)) {
    console.log(key + ": " + someObject[key]);
    }
  

• for-of(为各种集合遍历数据如数组,可以响应break,continue,return,不只可以遍历数组)

    //遍历数组
    for (var value of myArray) {
    console.log(value);
    }
    //遍历字串
    for (var chr of "") {
    alert(chr);
    }
    //遍历set对象
    var uniqueWords = new Set(words);
    for (var word of uniqueWords) {
    console.log(word);
    }
    //遍历并解构map对象(map对象是键值对)
    for (var [key, value] of phoneBookMap) {
    console.log(key + "'s phone number is: " + value);
    }
  

• 迭代器(实现迭代器方法就可以对对象使用for-of)

    // 使jQuery支持for-of
    jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
  

  for-of循环时会调用集合的[Symbol.iterator](),返回新的迭代器对象

  迭代器对象.next(),next()被反复调用

    var zeroesForeverIterator = {
       [Symbol.iterator]: function () {
          return this;
       },
       next: function () {
            return {done: false, value: 0};//无限循环，只返回0
       },
       return:function(){...}
      
    };
  

  迭代器对象.return(),过早退出会触发return(),异常,break,return会触发过早退出

  for-of执行过程：

    var $iterator = ITERABLE[Symbol.iterator]();
    var $result = $iterator.next();
    while (!$result.done) {
      VAR = $result.value;
      一些语句
      $result = $iterator.next();
    }
  

生成器 Generators

生成器在执行过程中遇到yield时会暂停执行(生成器的堆栈结构包括本地变量，参数,临时值，当前执行位置会被移出堆栈，生成器对象会保留对这个堆栈的引用)，在调用next()时重新激活堆栈结构并继续执行
yield不是退出而是切出

    //定义生成器
    function* quips(name) {
            yield "你好 " + name + "!";
            yield "希望你能喜欢这篇介绍ES6的译文";
            if (name.startsWith("X")) {
            yield "你的名字 " + name + "  首字母是X，这很酷！";
            }
            yield "我们下次再见！";
    }
    //执行
    > var iter = quips("jorendorff");
    [object Generator]
    > iter.next()
    { value: "你好 jorendorff!", done: false }
    > iter.next()
    { value: "希望你能喜欢这篇介绍ES6的译文", done: false }
    > iter.next()
    { value: "我们下次再见！", done: false }
    > iter.next()
    { value: undefined, done: true }

生成器就是迭代器,生成器内建next()和[Symbol.iterator]()方法的实现，可以构建出永无止境的序列的生成器。

    //传统迭代器的构建
    class RangeIterator {
            constructor(start, stop) {
                    this.value = start;
                    this.stop = stop;
            }
            
            [Symbol.iterator]() { return this; }
            
            next() {
                    var value = this.value;
                    if (value < this.stop) {
                       this.value++;
                       return {done: false, value: value};
                    } else {
                       return {done: true, value: undefined};
                    }
            }
    }
    
    // 返回一个新的迭代器，可以从start到stop计数。
    function range(start, stop) {
        return new RangeIterator(start, stop);
    }
    
    //用生成器来构建迭代器
    function* range(start, stop) {
     for (var i = start; i < stop; i++)
       yield i;
     }

    //生成器构建filter
    function* filter(test, iterable) {
      for (var item of iterable) {
       if (test(item))
           yield item;
      }
    }

    //生成器用于异步
    // 制造一些噪音的异步代码。
    // 返回一个Promise对象
    // 当我们制造完噪音的时候会变为resolved
    function makeNoise_async() {
    return Q.async(function* () {
    yield shake_async();
    yield rattle_async();
    yield roll_async();
    });
    }

template strings

用``代替''，支持多行

    function authorize(user, action) {
      if (!user.hasPrivilege(action)) {
            throw new Error(
            `用户 ${user.name} 未被授权执行 ${action} 操作。`);// ${action}模板占位符
       }
    }

标签模板（tagged templates）

    var message =SaferHTML`<p>${bonk.sender} 向你示好。</p>`;
    //等同于
    var message =SaferHTML(templateData, bonk.sender);
    function SaferHTML(templateData) {//templateData   Object.freeze(["<p>", " has sent you a bonk.</p>"] 不可变数组
      var s = templateData[0];
      for (var i = 1; i < arguments.length; i++) {
        var arg = String(arguments[i]);

        // 转义占位符中的特殊字符。
        s += arg.replace(/&/g, "&")
                .replace(/</g, "<")
                .replace(/</g, ">");

        // 不转义模板中的特殊字符。
        s += templateData[i];
      }
      return s;
    }
    
    
    // 基于纯粹虚构的模板语言
    // ES6标签模板。
    var libraryHtml = hashTemplate`
      <ul>
        #for book in ${myBooks}
          <li><i>#{book.title}</i> by #{book.author}</li>
        #end
      </ul>
    `;

不定参数，默认参数

• 不定参数

  //传统方法
  

  function containsAll(haystack) {
  for (var i = 1; i < arguments.length; i++) {
  var needle = arguments[i];
  if (haystack.indexOf(needle) === -1) {
  return false;
  }
  }
  return true;
  }
  //ES6实现方法
  //...needles为不定参数，必须在最后一位，参数传入时会赋一个数组，类似["b", "nan"]，没有参数时[]
  function containsAll(haystack, ...needles) {
  for (var needle of needles) {
  if (haystack.indexOf(needle) === -1) {
  return false;
  }
  }
  return true;
  }
  //调用
  containsAll("banana", "b", "nan")

• 默认参数

  //参数自左向右求值，可以使用赋好值的其他参数 
  function animalSentenceFancy(animals2="tigers",animals3=(animals2 == "bears") ? "sealions" : "bears")
  {
          return `Lions and ${animals2} and ${animals3}! Oh my!`;
  }
  
  animalSentenceFancy("bears") //“Lions and bears and sealions. Oh my!”
  
  //undefined相当于不传值
  animalSentence(undefined, "unicorns") //“Lions and tigers and unicorns! Oh my!
  

解构Destrucuring

• 数组的结构（[ variable1, variable2, ..., variableN ] = array;）

    var first = someArray[0];
    var second = someArray[1];
    var third = someArray[2];
    //解构
    var [first, second, third] = someArray;
    //嵌套结构
    var [foo, [[bar], baz]] = [1, [[2], 3]];
    //跳过其他元素
    var [,,third] = ["foo", "bar", "baz"];
    //不定参数结构
    var [head, ...tail] = [1, 2, 3, 4];
    console.log(tail);
    // [2, 3, 4]
    
    // undefined
    var [missing] = [];
    console.log(missing);
    
    
    
    function* fibs() {
    var a = 0;
    var b = 1;
    while (true) {
    yield a;
    [a, b] = [b, a + b];
    }
    }
    var [first, second, third, fourth, fifth, sixth] = fibs();
    console.log(sixth);
    // 5
  

• 对象的解构

    var robotA = { name: "Bender" };
    var robotB = { name: "Flexo" };
    var { name: nameA } = robotA;
    var { name: nameB } = robotB;
    console.log(nameA);
    // "Bender"
    console.log(nameB);
    // "Flexo"
  
    //属性名与变量名一致时
    var { foo, bar } = { foo: "lorem", bar: "ipsum" };
    console.log(foo);
    // "lorem"
    console.log(bar);
    // "ipsum"
  
    //嵌套解构
    var complicatedObj = {
    arrayProp: [
            "Zapp",
            { second: "Brannigan" }
    ]
    };
    var { arrayProp: [first, { second }] } = complicatedObj;
    console.log(first);
    // "Zapp"
    console.log(second);
    // "Brannigan"
  

• 解构的默认值

    var [missing = true] = [];
    console.log(missing);
    // true
    var { message: msg = "Something went wrong" } = {};
    console.log(msg);
    // "Something went wrong"
    var { x = 3 } = {};
    console.log(x);
    // 3
  

• 解构用法

    //作为参数
    function removeBreakpoint({ url, line, column }) {
    // ...
    }
  
    //用于迭代
    var map = new Map();
    map.set(window, "the global");
    map.set(document, "the document");
    for (var [key, value] of map) {
    console.log(key + " is " + value);
    }
    // "[object Window] is the global"
    // "[object HTMLDocument] is the document"
  
  
    for (var [,value] of map) {
    // ...
    }
  
    //多值返回
    function returnMultipleValues() {
    return {
            foo: 1,
            bar: 2
    };
    }
    var { foo, bar } = returnMultipleValues();
  

Arrow Functions(lambda表达式)

在HTML中-->之前的字符是注释的一部分，而在JS中-->之后的部分才是注释(行首时会注释单行，行中时是趋向于运算符)
lambda中没有arguments

    // ES5
    var total = values.reduce(function (a, b) {
      return a + b;
    }, 0);
    // ES6
    var total = values.reduce((a, b) => a + b, 0);

    // ES6
    $("#confetti-btn").click(event => {
      playTrumpet();
      fireConfettiCannon();
    });
    
    var chewToys = puppies.map(puppy => {});   // 这样写会报Bug！
    var chewToys = puppies.map(puppy => ({})); //

    puppy => {}//返回undefined,大括号代表方法体

this

    {
       ...
            addAll: function addAll(pieces) {
                    var self = this;//this指向调用者，方法是调用者的一个属性
                    _.each(pieces, function (piece) {//内层函数里，this会是window或undefined，只能通过以下方法传递this
                      self.add(piece);//把调用者传给内层函数或.bind(this)
                    });
            },
       ...
    }      
      
      
    // ES6
    {
        ...
            addAll: function addAll(pieces) {
               _.each(pieces, piece => this.add(piece));//lambda中的this可以继承外部函数中的this
            },
        ...
    }      

Symbols

js中的6种原始类型undefined,null,boolean,number,string,object
symbols是第7种类型，可以用做属性键避免冲突，它的值与其他任何值都不相等，不能被类似obj.name的点号法访问，被创建后不可改变，当前作用域

    var mySymbol = Symbol();
    obj[mySymbol] = "ok!";  // 保证不会冲突
    console.log(obj[mySymbol]);  // ok!

    // 创建一个独一无二的symbol
    var isMoving = Symbol("isMoving");
    ...
    if (element[isMoving]) {
      smoothAnimations(element);
    }
    element[isMoving] = true;

symbols属性的操作

    //属性是否存在
    if (isMoving in element)    
    //删除属性  
    delete element[isMoving]
 
    //会跳过symbols属性
    Object.getOwnPropertyNames(obj)   
    Object.keys(obj)   
    
    //得到symbols属性
    Object.getOwnPropertySymbols(obj)
    
    //不能被隐式转换为string,必须显示转换
    String(sym)
    sym.toString()

创建symbols

    //每次返回新的symbol
    Symbol()
    //共享symbol
    Symbol.for(string)
    //Symbol.iterator
    myArray[Symbol.iterator]

转译器Babel,Broccoli

数据结构

set(不包含相同元素，无索引支持,通过数组构建set可以去重)

    let s = new Set()
    s.add('hello').add('world').add('hello')
    console.log(s.size) //=> 2
    console.log(s.has('hello')) //=> true


    > // 检查"zythum"是不是一个单词
    > arrayOfWords.indexOf("zythum") !== -1  // 慢
            true
    > setOfWords.has("zythum")               // 快
            true

new Set：创建一个新的、空的Set。
new Set(iterable)：从任何可遍历数据中提取元素，构造出一个新的集合。
set.size：获取集合的大小，即其中元素的个数。
set.has(value)：判定集合中是否含有指定元素，返回一个布尔值。
set.add(value)：添加元素。如果与已有重复，则不产生效果。
set.delete(value)：删除元素。如果并不存在，则不产生效果。.add()和.delete()都会返回集合自身，所以我们可以用链式语法。
setSymbol.iterator：返回一个新的遍历整个集合的迭代器。一般这个方法不会被直接调用，因为实际上就是它使集合能够被遍历，也就是说，我们可以直接写for (v of set) {...}等等。
set.forEach(f)：直接用代码来解释好了，它就像是for (let value of set) { f(value, value, set); }的简写，类似于数组的.forEach()方法。
set.clear()：清空集合。
set.keys()、set.values()和set.entries()返回各种迭代器，它们是为了兼容Map而提供的，所以我们待会儿再来看。

WeakSet

只能加入对象，如果对象的其他引用已经删除，则对象会从WeakSet中删除

    let weaks = new WeakSet()
    weaks.add("hello") //=> Error
    weaks.add(3.1415) //=> Error

    let foo = new String("bar")
    let pi = new Number(3.1415)
    weaks.add(foo)
    weaks.add(pi)
    weaks.has(foo) //=> true
    foo = null
    weaks.has(foo) //=> false

map

• 避免与内置方法冲突

• 数据不会作为属性暴露出来，obj.key,obj[key]不能再访问数据了,可以用map.get(key)访问数据

• 对象可以作为属性

  new Map：返回一个新的、空的Map。
  new Map(pairs)：根据所含元素形如[key, value]的数组pairs来创建一个新的Map。这里提供的pairs可以是一个已有的Map 对象，可以是一个由二元数组组成的数组，也可以是逐个生成二元数组的一个生成器，等等。
  map.size：返回Map中项目的个数。
  map.has(key)：测试一个键名是否存在，类似key in obj。
  map.get(key)：返回一个键名对应的值，若键名不存在则返回undefined，类似obj[key]。
  map.set(key, value)：添加一对新的键值对，如果键名已存在就覆盖。
  map.delete(key)：按键名删除一项，类似delete obj[key]。
  map.clear()：清空Map。
  mapSymbol.iterator：返回遍历所有项的迭代器，每项用一个键和值组成的二元数组表示。
  map.forEach(f) 类似for (let [key, value] of map) { f(value, key, map); }。这里诡异的参数顺序，和Set中一样，是对应着Array.prototype.forEach()。
  map.keys()：返回遍历所有键的迭代器。
  map.values()：返回遍历所有值的迭代器。
  map.entries()：返回遍历所有项的迭代器，就像mapSymbol.iterator。实际上，它们就是同一个方法，不同名字。

WeakMap

会检查key,value只有其一的引用被删除，就会从WeakMap中删除

WeakMap,WeakSet(方便垃圾收集)

    //set是强引用,element作为key,如果element被从dom中移除了，无法回收他的内存，除非在set中也删除
    //WeakSet并不对其中对象保持强引用。当WeakSet中的一个对象被回收时，它会简单地被从WeakSet中移除
    if (movingSet.has(element)) {
      smoothAnimations(element);
    }
      movingSet.add(element);

WeakMap只支持new、has、get、set 和delete。
WeakSet只支持new、has、add和delete。
WeakSet的值和WeakMap的键必须是对象。

Class

    class Person {
    constructor(name, gender, age) {
    this.name = name
    this.gender = gender
    this.age = age
    }
    
    isAdult() {
    return this.age >= 18
    }
    }
    
    let me = new Person('iwillwen', 'man', 19)
    console.log(me.isAdult()) //=> true

继承

    class Animal {
      yell() {
        console.log('yell')
      }
    }
    
    class Person extends Animal {
      constructor(name, gender, age) {
        super() // must call `super` before using `this` if this class has a superclass

        this.name = name
        this.gender = gender
        this.age = age
      }

      isAdult() {
        return this.age >= 18
      }
    }
    
    class Man extends Person {
      constructor(name, age) {
        super(name, 'man', age)
      }
    }
    
    let me = new Man('iwillwen', 19)
    console.log(me.isAdult()) //=> true
    me.yell()

静态方法

    class Man {
      // ...

      static isMan(obj) {
        return obj instanceof Man
      }
    }
    
    let me = new Man()
    console.log(Man.isMan(me)) //=> true

模块

全局引用

    mport name from 'module-name'
    import * as name from 'module-name'

局部引用

    import { A, B, C } from 'module-name'
    
    A()
    B()
    C()

暴露接口

    // module.js
    export function method() { /* ... */ }
    
    // main.js
    import M from './module'
    M.method()

    //覆盖暴露
    // module.js
    export default {
      method1,
      method2
    }
    
    // main.js
    import M from './module'
    M.method1()

Promise

    function fetchData() {
      return new Promise((resolve, reject) => {
        api.call('fetch_data', (err, data) => {
          if (err) return reject(err)
  
          resolve(data)
        })
      })
    }

    fetchData()
      .then(data => {
        // ...

        return storeInFileSystem(data)
      })
      .then(data => {
        return renderUIAnimated(data)
      })
      .catch(err => console.error(err))

Proxy

不修改目标的前提下，拦截逻辑进行处理

    let apiProxy = new Proxy(api, {
      get(receiver, name) {
        return (function(...args) {
          min.sadd(`log:${name}`, args)
          return receiver[name].apply(receiver, args)
        }).bind(receiver)
      }
    })
    
    api.getComments(artical.id)
      .then(comments => {
        // ...
      })

深入浅出ES6
给 JavaScript 初心者的 ES2015 实战