一、簡介

本文將對es6的最佳特性進(jìn)行分享和講解。es6也稱ES6/ECMAScript2015，在2015年誕生，但是目前實際開發(fā)中還很多用的是ES5（2009年），原因就是很多的瀏覽器不支持新的語法，對新的語法支持率比較低，所有要想用es6語法，就得用編譯器，目前用的比較多的是babel，可以作為獨(dú)立的編譯器使用，也可以引入到項目當(dāng)中，用webpack或者gulp等一些工具，具體用法可以看下官方文檔。

二、特性介紹

本文將對一下特性進(jìn)行說明：

1、默認(rèn)參數(shù)以及箭頭函數(shù)；

2、導(dǎo)出導(dǎo)入模塊

3、類Class

4、let 跟 const

5、模板文本

6、多行字符串

7、Promises

8、解析賦值

9、生成器（Generators）

三、特性具體介紹

1、默認(rèn)參數(shù)以及箭頭函數(shù)

1.1、默認(rèn)參數(shù)

以前我們寫函數(shù)定義默認(rèn)參數(shù)的時候是這樣寫：

function aaa(num){
            var num = num || 1;
            console.log(num)
        }

那么，在es6中可以這么寫，直接寫在函數(shù)的括號上邊：

function aaa(num=10){
            var num = num;
            console.log(num)
        }

1.2、箭頭函數(shù)

以前我們寫閉包或者一些鏈函數(shù)調(diào)用的時候，this的指向很困擾我們，很容易就會造成變化，經(jīng)常需要在使用之前先定義在一個變量里，比如var self = this；然后再使用。

有了es6的箭頭函數(shù)，我們就不用再擔(dān)心這個問題了，告別那些that = this,self = this或者bind（this）這種寫法。我們直接可以這樣寫，函數(shù)里的this指向不變。

$('.btn').click((e) =>{
     this.submit();
})

2、導(dǎo)入導(dǎo)出模塊

導(dǎo)入導(dǎo)出模塊現(xiàn)在用的比較多了，在ES5中，引入依賴需要用require來引入，而在es6中，用export來導(dǎo)出，import導(dǎo)入，很方便使用。

單個文件：

//導(dǎo)出modleName.js
export default{
    name:'smile'
}

//導(dǎo)入
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面向?qū)ο缶幊讨校銜?jīng)常看到class這個關(guān)鍵字，但是在es5中，是沒有用class去聲明類的，然后我們驚喜的發(fā)現(xiàn)在es6中，可以用class來聲明一個類了。看以下代碼，我們聲明了一個Base類，然后定義了一個constructor和getName方法，類屬性寫在constructor方法里邊，類里邊只能定義方法。

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

如果要繼承父類，可直接使用關(guān)鍵字extends繼承

class ChildBase extends Base{
}

調(diào)用父級的構(gòu)造函數(shù)，可以使用super（）方法。

4、let 跟const

之前我們聲明變量都是用var ，當(dāng)在一個函數(shù)中存在很多變量的情況下就會容易出現(xiàn)混淆或者覆蓋掉，所有引入的新的變量聲明方式let 以及常量const。

let 和 const都是塊級作用域，那么，什么是塊級作用域呢？

兩種情況：

在函數(shù)內(nèi)部；

在一個代碼塊中；

簡單來說就在在一個花括號{}里邊就是一個快級作用域。

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}的方式去賦值變量，把變量放到花括號里就可以了

varname="Yourareis${name}is";

是不是很酷啊！

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

在es5中，當(dāng)需要表示多行字符串的時候，我們這樣做：

var strings = 'abc'
        +'ndf';

在es6中，當(dāng)表示多行字符串的時候，我們可以這樣做，直接用兩個反引號包起來就可以。

var strings = `abc
        ndf`;

7、promise

所謂Promise，就是一個對象，經(jīng)常用于異步操作當(dāng)中，有了Promise可以用同步的流程去執(zhí)行一些異步操作。具體操作這里不做詳解，看參照官方文檔。

8、解析賦值

在es6中可以一次對data對象屬性一次性賦值，比如：

data={

　　name：‘abc’,

　　age:13

}

var {name,age} = data;

9、生成器（Generators）

生成器（ generator）是能返回一個迭代器的函數(shù)。生成器函數(shù)也是一種函數(shù)，最直觀的表現(xiàn)就是比普通的function多了個星號*，在其函數(shù)體內(nèi)可以使用yield關(guān)鍵字,有意思的是函數(shù)會在每個yield后暫停。

四、這里對es6中的只要特性作了說明，有些地方說的不是很詳細(xì)請大家多去看下文檔，結(jié)束不足或者錯誤的地方會后續(xù)更正，謝謝大家。

總結(jié)

以上是生活随笔為你收集整理的Es6主要特征详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。