Es6主要特征详解

 一、简介

    本文将对es6的最佳特性进行分享和讲解。es6也称ES6/ECMAScript2015,在2015年诞生,但是目前实际开发中还很多用的是ES5(2009年),原因就是很多的浏览器不支持新的语法,对新的语法支持率比较低,所有要想用es6语法,就得用编译器,目前用的比较多的是babel,可以作为独立的编译器使用,也可以引入到项目当中,用webpack或者gulp等一些工具,具体用法可以看下官方文档。

二、特性介绍

    本文将对一下特性进行说明:

    1、默认参数以及箭头函数;

    2、导出导入模块

    3、类Class

    4、let 跟 const

    5、模板文本

    6、多行字符串

    7、Promises

    8、解析赋值

    9、生成器(Generators)

三、特性具体介绍

1、默认参数以及箭头函数

1.1、默认参数

以前我们写函数定义默认参数的时候是这样写:

复制代码
function aaa(num){             var num = num || 1;             console.log(num)         }
复制代码

那么,在es6中可以这么写,直接写在函数的括号上边:

复制代码
function aaa(num=10){             var num = num;             console.log(num)         }
复制代码

1.2、箭头函数

    以前我们写闭包或者一些链函数调用的时候,this的指向很困扰我们,很容易就会造成变化,经常需要在使用之前先定义在一个变量里,比如var self = this;然后再使用。

    有了es6的箭头函数,我们就不用再担心这个问题了,告别那些that = this,self = this或者bind(this)这种写法。我们直接可以这样写,函数里的this指向不变。

复制代码
$('.btn').click((e) =>{      this.submit(); })
复制代码

2、导入导出模块

导入导出模块现在用的比较多了,在ES5中,引入依赖需要用require来引入,而在es6中,用export来导出,import导入,很方便使用。

单个文件:

复制代码
//导出modleName.jsexport default{     name:'smile' }  //导入import modleName from './modleName.js'
复制代码

多个文件:

复制代码
export var name = "smile"; export function abc(){}   import {name,abc} from 'module'//或者import * as services from 'module'
复制代码

3、类(class)

     在Java等oop面向对象编程中,你会经常看到class这个关键字,但是在es5中,是没有用class去声明类的,然后我们惊喜的发现在es6中,可以用class来声明一个类了。看以下代码,我们声明了一个Base类,然后定义了一个constructor和getName方法,类属性写在constructor方法里边,类里边只能定义方法。

关键字:
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信