调试网站

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]) // // 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();
// reject(321)
}, );
});
}; // 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: }, obj2: {name:"shit", age: }}

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

使用和学习 ES2015的更多相关文章

  1. 新手入门指导:Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  2. Vue 2.0 学习路线

    「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...

  3. 新手向:Vue 2.0 的建议学习顺序

    新手向:Vue 2.0 的建议学习顺序 尤雨溪   1 年前 注:2.0 已经有中文文档 .如果对自己英文有信心,也可以直接阅读英文文档.此指南仅供参考,请根据自身实际情况灵活调整.欢迎转载,请注明出 ...

  4. Vue.js 整理笔记

    以前我们用Jquery进行dom的操作,虽然熟悉后开发效率很高,但是如果多个控件的相互操作多的情况下,还是会乱.相比之下,Vue的使用更加清晰,通过虚拟dom将数据绑定,而且组件化和路由的帮助下,让整 ...

  5. React-Todos

    最近学完React的最基本概念,闲下来的时候就自己写了一个Todo-List的小应用.这里做个简略的说明,给想好好学React的新手看. React-Todo 学习前提 这里我用了webpackb做了 ...

  6. I want to be a Great Web Front-end Developer

    有时觉得特别的浮躁,可能是每天春运般的挤地铁,随处可见因为一点小磕小蹭吹胡子瞪眼睛的人,可能是身边的人貌似一下子都好有钱,买房买车或者买第N套房. 很想静下来心寻找到自己inner pace,但是忽然 ...

  7. vue3.0新特性以及进阶路线

    Vue3.0新特性/改动 新手学习路线  ===> 起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要 ...

  8. 【转】Vue.js 2.0 快速上手精华梳理

    Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

  9. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

随机推荐

  1. AT&amp;T汇编语言——简单实例及工具演示

    今天就来用详细实例代码来运用一下昨天所说的仅仅个工具的使用方法吧 这几个实例基本的目的是来熟悉一下汇编相关工具的使用方法及应用一下昨天刚说的汇编程序模板. 我们用到的工具主要有as,ld,gcc,gd ...

  2. MongoDB学习笔记(六)--复制集+sharding分片 && 总结

    复制集+sharding分片                                                               背景 主机 IP 服务及端口 Server A ...

  3. Jade的奇怪解析问题。

    如下的jade代码: span#span1 Span#span2   解析的时候span2总是变成span1的子元素.怎么解决? [解决方法] 用如下的代码就可以了. span#span1 |   s ...

  4. (回溯法)和为n的所有不增正整数和式分解算法

    题目: 利用递归算法输出正整数和为n的所有不增的正整数和式.例如当n=5时,不增的和式如下: 5=5 5=4+1 5=3+2 5=3+1+1 5=2+2+1 5=2+1+1+1 5=1+1+1+1+1 ...

  5. 一个简单RPC框架是怎样炼成的(IV)——实现RPC消息的编解码

    之前我们制定了一个非常easy的RPC消息 的格式,可是还遗留了两个问题,上一篇解决掉了一个.还留下一个 我们并没有实现对应的encode和decode方法,没有基于能够跨设备的字符串传输,而是直接的 ...

  6. HTTP.SYS 远程执行代码漏洞分析(MS15-034 )

    在2015年4月安全补丁日,微软发布了11项安全更新,共修复了包括Microsoft Windows.Internet Explorer.Office..NET Framework.Server软件. ...

  7. 互斥锁属性PTHREAD_MUTEX_RECURSIVE

    四.互斥锁属性 线程和线程的同步对象(互斥量,读写锁,条件变量)都具有属性.在修改属性前都需要对该结构进行初始化.使用后要把该结构回收.我们用pthread_ mutexattr_init函数对pth ...

  8. Tomcat之安装篇- 1

    1. 提供了下载页面 以及tomcat下载地址,点击即可下载 : Tomcat9.0(Windows64) 方便好用的录像机下载请点击: gif工具 即可下载. 2.下载好的压缩包进行解压 3.配置路 ...

  9. Java 基础【12】 日期类型

    java api中日期类型的继承关系 java.lang.Object --java.util.Date --java.sql.Date --java.sql.Time --java.sql.Time ...

  10. python easy_install 发生Unable to find vcvarsall.bat错误的处理方法

    用python安装mmseg分词包时发生了 Unable to find vcvarsall.bat 错误 Searching for mmseg Reading http://pypi.python ...