小丸子总结几个es6新特性

来源:互联网 发布:mac book pro怎么用 编辑:程序博客网 时间:2024/04/25 15:25

项目中的js代码全部重构成了符合ES6规范的代码。
下面针对项目中能用到的es6语法,来逐个学习一下。

1.箭头函数

//这是一段jquery代码$('demo').click((event)=>{    //....})

感觉箭头函数就是一个语法糖,它类似于

var _this=this;$('demo').click(function(event){        _this.id=5;    //....})

箭头函数继承之前的this上下文。不用我们像以前一样写一堆var _this=this;了。

2.let和const

let和const就是用来代替var的。

使用了let之后js就像c一样有了块级作用域。

function calculateTotalAmount (vip) {  var amount = 0   if (vip) {    let amount = 1   }   { // 更多的块    let amount = 100     {      let amount = 1000       }  }    return amount}console.log(calculateTotalAmount(true))

最后打印的结果为0。因为每一个let都是把amout限定在了内部的作用域,最外层的作用域的amout一直都没有改变。

const一看名字就知道定义了一个不可变的变量。

const a=1;a=2;// error

3.模版表达式

var _url="www.baidu,com";var date=`coming ${_url}`;

使用${}引入模板,但是字符串就要用“(键盘1左边的键)来包裹了。

4.class类

class Demo{    constructor(instance){        this.id = instance;    },    getId(){},    setId(){}}var instance = 0;var demo = new Demo(instance);

好吧,也像语法糖。

5.兼容性

兼容性就是没有兼容性。目前还只能使用babel来6转5。团队是使用gulp工具自动转的。因为目前还没有浏览器兼容es6。

感觉现在es6就像coffeescript一样,像个方言。坐等以后大家都兼容它喽。

0 0
原创粉丝点击