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.js
export 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方法里边，类里边只能定义方法。

class Base{
            constructor(){
                this.name = 'smile'
            }
            getName(){
                console.log(this.name)
            }
        }

如果要继承父类，可直接使用关键字extends继承

class ChildBase extends Base{
}

调用父级的构造函数，可以使用super（）方法。

4、let 跟const

之前我们声明变量都是用var ，当在一个函数中存在很多变量的情况下就会容易出现混淆或者覆盖掉，所有引入的新的变量声明方式let 以及常量const。

let 和 const都是块级作用域，那么，什么是块级作用域呢？

两种情况：

在函数内部；

在一个代码块中；

简单来说就在在一个花括号{}里边就是一个快级作用域。

function aaa(flag){
            let num = 0;
            if (flag) {
               let num = 10;
            }
            console.log(num)
        }
        aaa(true)//输出0

用const 声明的常量不能改变，只能赋值一次。

5、模板文本

相信大家都使用过拼接的方式去拼接一下字符串跟变量，比如：

var name = "your are "+name+"is"；

在es6中，我们就可以使用心得语法${name}的方式去赋值变量，把变量放到花括号里就可以了

var name = "Your are is ${name} is ";

是不是很酷啊！

6、多行字符串（Multi-line Strings）

在es5中，当需要表示多行字符串的时候，我们这样做：

var strings = 'abc'
        +'ndf';

在es6中，当表示多行字符串的时候，我们可以这样做，直接用两个反引号包起来就可以。

var strings = `abc
        ndf`;

7、promise

所谓Promise，就是一个对象，经常用于异步操作当中，有了Promise可以用同步的流程去执行一些异步操作。具体操作这里不做详解，看参照官方文档。

8、解析赋值

在es6中可以一次对data对象属性一次性赋值，比如：

data={

　　name：‘abc’,

　　age:13

}

var {name,age} = data;

9、生成器（Generators）

生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

四、这里对es6中的只要特性作了说明，有些地方说的不是很详细请大家多去看下文档，结束不足或者错误的地方会后续更正，谢谢大家。