最近从express框架转到koa框架，中间件基于generator实现的，框架中的代码满眼都是ES6，对于刚迈入js阵营里的人是个很大的考验，所以在这里记录es6学习的点滴，不积跬步无以至千里，不积小流无以成江河(本次学习主要是为学习node配合，要使用在浏览器端还过早)。

想使用ES6语法编写ES5的同学，可以去了解一下ES6转码器，强力推荐BABEL

let and const

1. 使用let取代var

   看完let块级作用域,感觉完全可以取代var，let不存在变量提升，并且声明的变量只在声明的代码块中生效，没有任何副作用，在for循环中使用十分恰当。

   //开启严格模式
   'use strict'
   
   for(let i = 0; i < 5; i++){
     console.log(i) // 0 1 2 3 4
     {
       let i = 100;
       console.log(i); //100
     }
   }
   

2. const定义全局常量

   javascript精粹这本书里面说过为了减少全局变量的污染，就是建立一个唯一的全局变量，其实在全局环境中设置常量比变量好很多，并且配合解构赋值简直完美。

   //before
   var initData = {}, globalData = {};
   
   //now
   const [initData, globalData] = [{}, {}];
   

解构赋值

1. 基本使用方法(ps: 感觉这个东西简直是神器，非常实用，简化代码量，并在特殊情景下有妙用)

   //(1)数组的解构赋值
   let [a, b, c] = [1, 2, 3];
   a // 1
   b // 2
   c // 3
   
   //(2)对象的解构赋值
   var { name, sex } = {name: 'neverthanmore', sex: 'male'}
   name // neverthanmore
   sex  // male
   
   //(3)函数参数的解构赋值
   function plusFullName([firstName, lastName]){
     return firstName + lastName;
   }
   plusFullName(['never', 'thanmore']);
   

2. 他的使用场景非常多，下面我们介绍一些使用案列

   • 交换变量的值

     //before
     let a = 1, b = 2, temp;
     temp = a;
     a = b;
     b = temp;
     
     //now
     let [x, y] = [1, 2];
     [x, y] = [y, x]; //easy?
     

   • 配合函数使用反回多个值

     //before(之前返回多个值会放在对象中)
     function oldGetMultiReturn(){
       return {
         a: 'never',
         b: 'than',
         c: 'more'
       }
     }
     let valueList = oldGetMultiReturn();
     let a = valueList.a, b = valueList.b, c = valueList.c;
     
     //now
     function newGetMultiRetuen(){
       return ['never', 'than', 'more'];
     }
     let [a, b, c] = newGetMultiRetuen();
     

   • 提取json值

     var json = {
       success: true,
       data: ['never', 'than', 'more'],
       code: 10000,
       msg: '成功'
     };
     let {su, da, co, ms} = json;
     su // true
     da // ['never', 'than', 'more']
     co // 10000
     ms // '成功'
     

   • 遍历Map结构

     var map = new Map();
     map.set('firstName', 'never');
     map.set('lastName', 'thanmore');
     for(let [key, value] of map){
       console.log(key + 'is' + value);
     }
     // firstName is never
     //lastName is thanmore
     

   字符串

   ES6中新加的模板功能可以避免使用+来连接变量，静态字符串使用单引号或者反引号，

   const firstName = 'never';
   const fullName = `${firstName}thanmore`;
   

   数组的扩展

   使用Array.from，将类似数组的对象转为数组

   //浏览器部署方法
   const toArray = (() =>
      Array.from ? Array.from : [].slice.call(obj)            
   )();
   
   const els = document.querySelectorAll('.ccc');
   toArray(els);
   

   函数的扩展

   1. 默认参数和解构赋值结合使用

      function pl({x=1, y=2} = {}){
        return [x, y];
      }
      let [x, y] = pl();
      x // 1
      y // 2
      

   2. 扩展运算符

      //替代apply
      Math.max.apply(null, [1, 3, 77]);
      Math.max(...[1, 3, 77]);
      //相当于
      Math.max(1, 3, 77);
      
      //push,这里...是具有迭代器属性
      let arr1 = [1, 1, 1];
      [2, 2, 2].push(...arr1); //[2, 2, 2, 1, 1, 1]
      

   3. =>箭头函数

      var f = (v) => v;
      //相当于
      function f(v){
        return v;
      }
      

   Map结构

   Map和Object何种场景使用，反正前端不要使用，前段时间作死使用不兼容QQ浏览器和微信浏览器Object只在不需要遍历而是摸你对象时候使用，当需要key：value结构时，使用Map更为合适

   let map = new Map(arr);
   
   for (let key of map.keys()) {
     console.log(key);
   }
   
   for (let value of map.values()) {
     console.log(value);
   }
   
   for (let item of map.entries()) {
     console.log(item[0], item[1]);
   }
   

   Generator And Promise

   这两个可以去看下ruanyf老师的ES6教程链接

   async使得异步操作更加方便，是对Generator函数的改进，koa1.x使用Generator实现，koa2.x则是使用async实现。

   Module

   之前在git里面看vue-router高级实例时候，发现一些代码风格闻所未闻，export的写法和commonjs的写法完全不一样(看下面，其实这是ES6 Module)

   vue-router

   export function configRouter (router) {
     //...code
   }
   
   import { configRouter } from './route-config';
   

   ​

   ​

   ​