美文网首页
es6、es7常用特性

es6、es7常用特性

作者: 曾经蜡笔没有小新77 | 来源:发表于2018-08-21 18:05 被阅读0次

1、模板字符串模板字符串

不使用ES6

使用+号降变量拼接喂字符串

例:var name ='My name is '+ first+' ' + last + '.'

使用ES6

将变量放在大括号之中:

例:var name = `Your name is ${first}${last}.`

2、解构赋值解构赋值

不使用ES6

var options = {

    repeat: true,

    save: false

};

// 从对象中提取数据

var repeat = options.repeat,

var save = options.save;

使用ES6

let node = {

    type: "Identifier",

    name: "foo"

};

let { type, name } = node;

console.log(type); // "Identifier"

console.log(name); // "foo"

3、对象属性简写对象扩展

不使用ES6

varbar ='bar';

varfoo =function()

{

// ...

}

varbaz = {

  bar: bar,

  foo: foo

};

使用ES6

varbar ='bar';

varfoo =function()

{

// ...

}

varbaz = { bar, foo };

4、箭头函数箭头函数

var f=()=>5;

// 等同于var f = function() { return5 };

var sum=(num1,num2)=>num1+num2;

// 等同于var sum = function(num1,num2) { return num1+num2; };

5、promisePromise

异步编程

var wait1000 = new Promise (function(resolve,reject){

    setTimeout(resolve,1000)

});

wait1000.then(function(){

    console.log("hello");// 1秒后输出"Hello"

    return  wait1000;

}).then(function(){

      console.log("fundbug");// 2秒后输出"fundbug"    

})

6、模块化Module

不使用ES6

Node.js采用CommenJS规范实现了模块化,而前端也可以采用,只是在部署时需要使用Browserify等工具打包。

module.js中使用module.exports导出port变量和getAccounts函数:

module.exports = {

    port:3000,

    getAccounts:function(){

        ...

      }

}

main.js中使用require导入module.js

varservice =require('module.js')

console.log(service.port)// 输出3000

使用ES6

export var port =3000

export function getAccounts(url){

  ...

}

main.js中使用import导入module.js,可以指定需要导入的变量:

import {port, getAccounts} from'module'

console.log(port)// 输出3000

7、ES7 asyncasync

es7标准引入了async函数,async函数是什么?它就是Generator函数的语法糖

async函数就是将Generator函数的星号(*)替换成async,将yield替换成await。

一:async函数相比Generator函数的改进

1、内置执行器

generator函数需要调用next方法或者用co模块才可以执行,async函数自带执行器

2、更好的语义

3、更广的适用性

4、返回值是promise

async函数的返回值是promise,Generator函数的返回值是Iterator 

二:与其他异步处理方法的比较

例如实现一个用户登录

this.$http.jsonp('/login', (res) => {

  this.$http.jsonp('/getInfo', (info) => {

    // do something  })

})

1、promise写法

2、Generator写法

3、async写法

8、Generator函数Generator异步函数

一:异步编程方法  见上一篇文章

相关文章

网友评论

      本文标题:es6、es7常用特性

      本文链接:https://www.haomeiwen.com/subject/bpykiftx.html