使用和学习 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);

[b]5、使用promise写法[/b]
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);
}
})
})
})

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')

[b]函数名用类似数组的形式定义[/b]

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

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

数组就用for(let [index,ele] of [].entries()), 对象就用for (let [index, ele] 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)
}