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

// 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

最新文章

热门文章