使用和学习 ES2015

 调试网站 

http://babeljs.io/repl/

扩展阅读：

# export、exports、modules.exports 和 require 、import 的一些常用方法和套路
http://www.cnblogs.com/CyLee/p/5836069.html

# es6学习笔记
https://github.com/dragon8github/es6-Study-Notes

  

（数组）扩展运算符使用

// demo 1
var a = (...args) => console.log(args)
a(1, 2, 3, 4) // [ 1, 2, 3, 4 ]

// demo 2
console.log(...[1, 2, 3, 4]); // 1 2 3 4

// demo 3
Math.max(...[1, 2, 3, 4, 5]) // 5

// demo 4
var arrl = [0, 1, 2];
var arr2 = [3, 4, 5];
arrl.push(...arr2); // [ 0, 1, 2, 3, 4, 5 ]

箭头函数与高阶函数

getters: {
  // ...
  getTodoById: state => id => state.todos.find(todo => todo.id === id)
}

怎么会有两个箭头函数？语法错误吧？其实这就是一个函数返回另一个函数罢了。简化一下：

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

然后再还原为es5的代码

"use strict";

getters: {
  // ...
  getTodoById: (function (state) {
    return function (id) {
      return state.todos.find(function (todo) {
        return todo.id === id;
      });
    };
  });
}

类的基本操作

class UserService
{
    constructor(UserName,UserPwd)
    {
         this._UserName = UserName;
         this._UserPwd = UserPwd;
    }

    get UserName(){return this._UserName} //获取属性,命名必须大写开头
    set UserName(n){this._UserName = /^w{6,19}$/.test(n)?n:null} //设置属性，命名必须大写开头

    get UserName(){return this._UserName} //获取属性,命名必须大写开头
    set UserName(n){this._UserName = /^w{6,19}$/.test(n)?n:null} //设置属性，命名必须大写开头

    getVersion()
    {
        console.log("1.0");
    }
}

let user = new UserService('Lee','123456');
//user.getVersion();
// console.log(user.name,user.pwd);
user.UserName = 'dragon8github';
console.log(user.UserName);

  

---

5、使用promise写法

 http://es6.ruanyifeng.com/#docs/promise

仔细研究这几个demo就可以学会promise的用法了：

// demo 1： Promise的基本特性和使用
var fuck = new Promise((resolve, reject) => {
    resolve("123");  // 会激活.then的第一个参数函数. 请注意，resolve 和 reject 这两个函数只能选择一个执行
    reject("456");   // 会激活.then的第二个参数函数 或者 .catch函数
})

fuck.then(data => {
    console.log(data);  // => 123 当Promise执行第一个参数函数reject时会触发
}, err => {
    console.log(err);  // => 456 当Promise执行第二个参数函数reject时会触发 或者Promise发生错误时会触发。
})

fuck.then(data => {
    console.log(data);  // => 123 当Promise执行第一个参数函数reject时会触发
}).catch(err => {      
    console.log(err); // => 456 当Promise执行第二个参数函数reject时会触发 或者Promise发生错误时会触发。
})


// demo 2: 在promise中return，是return 一个promise对象，所以可以无限的.then/.catch
var fuck = new Promise(function(resolve, reject){
    resolve("123");  // 会激活p.then的第一个参数函数, 注意，如果调用这个。这个函数就会停止执行，所以下一句代码没有效果
    reject("456");   // 会激活p.then的第二个参数函数 或者 p.catch函数
});

fuck.then(data => {
  console.log(data);  // => 123
  return data + 1
}).then(data2 => {
   console.log(data2); // => 1231
})


// demo 3: promise自动会启动try catch 机制 使用catch或者then的第二个参数函数捕获
var fuck = new Promise((a, b) => {
    mdzz()  // 根本没有mdzz这个函数，所以会报错,也可以使用 throw new Error('mdzz') 来触发报错
})

fuck.then(data => {
　　//do someting...
}).catch(err => {
    // 这里可以捕获到err。当然你可以什么都不写。这样程序就不报错了。
    // 但正常情况下还是建议处理好err
    console.log(123)
})

// 或者这样
fuck.then(data => {
  console.log(data);  // => 123 当Promise执行第一个参数函数reject时会触发
}, err => {
  console.log(err);  // => 456 当Promise执行第二个参数函数reject时会触发 或者Promise发生错误时会触发。
})


// demo 4: 如何共享参数
// 暂时没有方法。只能用全局变量.下面是代码片段：
connect().then(db => {
   return (this.db = db).collection('users')
}).then(docs => {
    return docs.insert({name: this.name, pwd: this.pwd, email: this.email}, {safe: true})
}).catch(err => {
    this.db && this.db.close();
    throw new Error(err);
})

demo5： 实现finally函数
Promise.prototype.finally = function (callback) {
    let P = this.constructor;
    return this.then(
        ret => P.resolve(callback()).then( () => ret),
        err => P.resolve(callback()).then( () => {throw new Error(err) })
    );
};

封装一个promise的函数，希望继续返回Promise.

以下是我实战的代码片段，仅供参考。

var MongoClient = require('mongodb').MongoClient;
var url = 'mongodb://localhost:27017/myproject';
// 如果我要使用fuck()之后继续执行.then，那么说明这个fuck要返回一个promise即可。
let fuck = () => {
    // 由于我知道MongoClient.xxxx()也返回一个promise，所以这里直接返回即可。
    return MongoClient.connect(url, {}).then(db => db).catch(err => {
        throw new Error(err);
    }); 
}

fuck().then(db => {
    console.log(db);
    db.close();
})

  

async + await + Promise

// 使用async 和 await 必须配合使用Promise
// 在同一个代码段中，不可以同时使用resolve和reject。因为他们执行之后会return
const f = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(123); 
      // reject(321)
    }, 1000);
  });
};

// async返回的是一个promise。所以别妄想在这里就可以直接返回普通类型的值（如string/object/Boolean)
// 事实上，在这里面我也可以用Promise的方式.then()来解析。感觉就是一个语法糖。
// 总之指的注意的是，在这个async返回的是一个promise对象
const testAsync = async () => {
  try {
    let a =  await f(); // 如果使用await，则接受起其返回值
    console.log(a)  // 输出123
　　 return a  // 请注意，虽然上句输出的是123,但返回的时候，却是一个Promise对象哦
  } catch (err) {
    alert(err) // 可以获取reject的值
  }
};

let a = testAsync()

console.log(a) // 注意这是一个promise
  

补充：2017-11-28

async 更像是一个标记。 await 也必须在有async 标记的函数中才可以正常使用。目前粗浅的理解是这样，而且大多数遇到的场景也是这样。如果以后碰到再回来补充。

await 标记的函数必须是返回promise才可以正常使用获取，如果不是只能是undefined。以Fetch为例演示（省略了async的标记）：

 let myjson = await fetch(API_SERVER, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(form)
    }).then(data => {
        return data.json()
    })

 Async + await 新理解

使用它们的目的是，优雅的，不嵌套，不回调的使用返回值。
但代价就是，它们必须是同个圈子里的，也就是同个函数里的，也就是同个async函数里的。然后被执行才可以。

describe('注册', () => {
  it('注册', done => {
        const Register = async () => {
            // 获取验证码
            const data = await xdapi.wechat_SmsSend({TelNo: '13713332657', Type: '1'}).then(data=>data);

            if (data.Data) {
                return await xdapi.wechat_Register({
                        TelNo: '13713332657',           // 账号
                        Password: '123456.a',           // 密码
                        ValidateCode: data.Data,        // 验证码
                        ExtensionTelNo: '13713332652',  // 推荐手机号
                        Type: 'wechat_pulic'            // 注册方式是微信
                }).then(data => data)
            } else {
                return {ReturnMessage: '获取验证码失败' + data.ReturnMessage};
            }
        }

        Register().then(data => {
           if (data.ReturnCode == 1) {
               console.log(data)
               done()
           } else {
               Toast('注册失败：' + data.ReturnMessage);
           }
        })
  })
})

ES6 class setTimeout promise async/await 测试Demo

class Person {
    async getVersion () {
        return new Promise((resolve, reject) => {
           setTimeout(function () {
                resolve('1.0'); // reject('fail')
           }, 1000);
        })
    }
}

const start = async () => {
   var p = new Person();
   const data = await p.getVersion();
   console.log(20180716090040, data); 
}

start(); // 20180716090040 "1.0"

---

proxy 代理的实战运用

如果你返回的是函数，那就是拦截函数，如果是其它类型。就是算是拦截属性

// 结合getter 和 proxy 的特性实现php中的__GET魔术函数

var api = {}

/**
 * @func
 * @desc Proxy使用示例
 * @param {object}  - 要代理的对象
 * @param {object}  - 相关的代理配置
 */
var proxy = new Proxy(api, {
    get: function (target, key, receiver) {
        console.log('获取函数名', key)
        // return Reflect.get(target, key, receiver)
        return function (aa) {
          window.alert(aa + key) 
        }
    }
})

proxy.fuck('abc')

---

函数名用类似数组的形式定义

const mutations = {
    INCREMENT (state,amount) {
        state.count = state.count + amount
    }
    //Es2015的知识点
    ["SET_INCREMENT"] (state,amount) {
        state.count = state.count + amount
    }
} 

用for of 代替所有的遍历方式。 对数组和对象都使用for of 

数组就用for(let [index,ele] of [].entries()), 对象就用 for (let [key, val] of Object.entries(obj)) 

除了entries, 还有keys()  values()  详情百度

var aa = {boj1: {name:"fuck", age:18 }, obj2: {name:"shit", age:19 }}

# 对象遍历
for (let [index, ele] of Object.entries(aa)) {
         console.log(index, ele)
}

# 数组遍历
for (let [index, ele] of [1, 2, 3].entries()) {
         console.log(index, ele)
}