ES6 常用的特性

       之前写vue的时候,发现文档什么的最新版本都建议用es6写法,对es6友好度更高,加之现在es6也越来越普及,兼容性问题直接用babel转码就好了,特别方便,于是用es6写代码是必须要掌握的,下面总结下一般es6常用的新特性:

1、var 、let、const 的区别

js由于没有块级作用域,变量声明为var时,在申明他的函数体内以及这个函数体内嵌套的任何函数体内都是有定义的(申明提前),例如:

var i

es6通常用let和const申明变量,const是申明常量(申明后值不可修改,修改会报错),let是变量,都是块级作用域,在{}内有效:

let i

这样代码更加严谨,不用担心内部变量被外面修改了,更加安全

2、函数

函数参数默认值:

es5

这样就会带来以上问题,结果跟我们设定的不一样,es6新特性解决了这个问题

es6

箭头函数:写法更加简洁,省略了function关键字申明,省略return,例如

箭头函数

3、模板字符串:

第一:es5在字符串拼接的时候,常常会用+号把值和字符拼接起来,如果要拼接dom元素的话,会很麻烦,es6很好的解决了这个问题

单行字符串拼接

第二:es5常用反斜杠(\)来做多行字符串的拼接,es6只需要用(`)就可以了,这样以后拼接dom串的时候就方便多了!

多行字符串拼接

4、Promise

参看这篇文章吧

5、Class 类

es6新增加了class关键字来定义声明一个类,还多了extends继承关键字,使得类的声明的继承更加方便,像极了java语言,在es5中我们一般这样写:

理解 Student.prototype === stu.__proto__ === stu.constructor.prototype 注意:prototype、__proto__与constructor 的区别

es6更加简洁实现了类的继承:

es6写法

6、export和import

es6之前,都是用requireJS进行模块化开发,es6 export导出模块、import导入模块,可以直接支持module了,现在的vue,都是用es6开发了,对于组件的引入就用到这个知识点了

导出导入模块

7、Spread operator 展开运算符 

Spread operator也是es6一个新特性,写法是...,也就是三个点,用来组装数组

点点点展开数组

注意:apply()和call()的区别是什么,等我知道了再补充,头疼、、、

8、对象的扩展:

初始化简写,键值对重名的情况:

键值对简写

对象方法简写:

方法简写

es6的Object.assign()这个方法来实现浅复制,类似于Jquery的$.extend,第一个参数是目标对象,后面的是被合并的源对象,然后返回目标对象,注意如果出现同名属性,会被最后一个值覆盖

9、解构赋值

为了简化提取数组或对象中的值,es6新加了解构的特性。es5中提取对象信息方法常用如下:

es5 取值

es6简化的这个步骤,如下:

es6 取值

10、Set去重 

你可能感兴趣的:(ES6 常用的特性)