這篇文章主要介紹“前端開發(fā)es6有哪些特點(diǎn)”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“前端開發(fā)es6有哪些特點(diǎn)”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)建站專注于企業(yè)網(wǎng)絡(luò)營(yíng)銷推廣、網(wǎng)站重做改版、永安網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為永安等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

特點(diǎn)：1、加人新變量聲明方法const和let；2、模板字符串，解決了es5在字符串功能上的痛點(diǎn)；3、為參數(shù)提供了默認(rèn)值，以便在參數(shù)沒有被傳遞時(shí)使用；4、箭頭函數(shù)，是一種函數(shù)的快捷寫法；5、對(duì)象初始化簡(jiǎn)寫，用于解決鍵值對(duì)重名問題；6、解構(gòu)；7、展開運(yùn)算符；8、import和export；9、Promise；10、Generators；11、 async函數(shù)；12、Class。

一、變量聲明const和let

在ES6之前，我們都是用var關(guān)鍵字聲明變量。無論聲明在何處，都會(huì)被視為聲明在函數(shù)的最頂部(不在函數(shù)的最頂部就在全局作用域的最頂部)。這就是函數(shù)變量提升例如：

不用關(guān)心bool是否為true or false。實(shí)際上，無論如何str都會(huì)被創(chuàng)建聲明。(如果未聲明,返回的是null)

而es6之后，我們通常用let和const來聲明。let表示變量、const表示常量，let和const都是塊級(jí)作用域。如何理解這個(gè)塊級(jí)作用域？

• 在一個(gè)函數(shù)內(nèi)部

• 在一個(gè)代碼塊內(nèi)部

通常來說{}大括號(hào)內(nèi)的代碼塊即為let和const的作用域。

let的作用域是在它所在當(dāng)前代碼塊，但不會(huì)被提升到當(dāng)前函數(shù)的最頂部。

const聲明的變量都會(huì)被認(rèn)為是常量，表示它的值被設(shè)置完成后就不能再修改了。

如果const的是一個(gè)對(duì)象，對(duì)象所包含的值是可以被修改的。就是對(duì)象所指向的地址沒有變就行。

二、模板字符串

es6模板字符簡(jiǎn)直是開發(fā)者的福音，解決了es5在字符串功能上的痛點(diǎn)。

2.1 基本的字符串格式化

將表達(dá)式嵌入字符串中進(jìn)行拼接。用${}來界定。

//ES5
var way = 'String'
console.log('ES5:' + way)

//ES6
let way = 'String Template'
console.log(`ES6: ${way}`)

2.2 多行字符串拼接

在ES5時(shí)我們通過反斜杠()來做多行字符串或者字符串一行行拼接。ES6反引號(hào)(``)直接搞定。

2.3 更多方法

三、函數(shù)新特性

3.1 函數(shù)默認(rèn)參數(shù)

在ES5我們給函數(shù)定義參數(shù)默認(rèn)值是怎么樣？

function action(num) {
    num = num || 200;
    
    //當(dāng)傳入num時(shí)，num為傳入的值
    //當(dāng)沒傳入?yún)?shù)時(shí)，num即有了默認(rèn)值200
    return num;
}

但細(xì)心觀察的同學(xué)們肯定會(huì)發(fā)現(xiàn)，num傳入為0的時(shí)候就是false，但是我們實(shí)際的需求就是要拿到num = 0，此時(shí)num = 200 明顯與我們的實(shí)際想要的效果明顯不一樣。

ES6為參數(shù)提供了默認(rèn)值。在定義函數(shù)時(shí)便初始化了這個(gè)參數(shù)，以便在參數(shù)沒有被傳遞進(jìn)去時(shí)使用。

function action( num = 200 ){
    console.log(num)
}
action(0);  //0
action();   //200
action(300) //300

3.2 箭頭函數(shù)

ES6很有意思的一部分就是函數(shù)的快捷寫法。也就是箭頭函數(shù)。

箭頭函數(shù)最直觀的三個(gè)特點(diǎn)：

• 不需要 function 關(guān)鍵字來創(chuàng)建函數(shù)

• 省略 return 關(guān)鍵字

• 繼承當(dāng)前上下文的 this 關(guān)鍵字

說個(gè)小細(xì)節(jié)。

當(dāng)你的函數(shù)有且僅有一個(gè)參數(shù)的時(shí)候，是可以省略掉括號(hào)的。當(dāng)你函數(shù)返回有且僅有一個(gè)表達(dá)式的時(shí)候可以省略{} 和 return。例如：

var people = name => 'hello' + name

作為參考：

來道筆試題：把下面ES5代碼簡(jiǎn)化重構(gòu)成ES6方式

四、拓展的對(duì)象功能

4.1 對(duì)象初始化簡(jiǎn)寫

ES5我們對(duì)于對(duì)象都是以鍵值對(duì)的形式書寫，是有可能出現(xiàn)鍵值對(duì)重名的。例如：

ES6 同樣改進(jìn)了為對(duì)象字面量方法賦值的語法。ES5為對(duì)象添加方法：

ES6 對(duì)象提供了 Object.assign() 這個(gè)方法來實(shí)現(xiàn)淺復(fù)制。

Object.assign() 可以把任意多個(gè)源對(duì)象自身可枚舉的屬性拷貝給目標(biāo)對(duì)象，然后返回目標(biāo)對(duì)象。第一參數(shù)即為目標(biāo)對(duì)象。在實(shí)際項(xiàng)目中，我們?yōu)榱瞬桓淖冊(cè)磳?duì)象。一般會(huì)把目標(biāo)對(duì)象傳為{}。

五、更方便的數(shù)據(jù)訪問--解構(gòu)

數(shù)組和對(duì)象是JS中最常用也是最重要表示形式。為了簡(jiǎn)化提取信息，ES6新增了解構(gòu)，這是將一個(gè)數(shù)據(jù)結(jié)構(gòu)分解為更小的部分的過程。

ES5我們提取對(duì)象中的信息形式如下：

是不是覺得很熟悉，沒錯(cuò)，在ES6之前我們就是這樣獲取對(duì)象信息的，一個(gè)一個(gè)獲取。現(xiàn)在，解構(gòu)能讓我們從對(duì)象或者數(shù)組里取出數(shù)據(jù)存為變量，例如：

面試題：

六、Spread Operator 展開運(yùn)算符

ES6中另外一個(gè)好玩的特性就是Spread Operator 也是三個(gè)點(diǎn)兒...接下來就展示一下它的用途。

組裝對(duì)象或者數(shù)組：

對(duì)于 Object 而言，還可以用于組合成新的 Object 。(ES2017 stage-2 proposal) 當(dāng)然如果有重復(fù)的屬性名，右邊覆蓋左邊。

七、import 和 export

7.1 import導(dǎo)入模塊、export導(dǎo)出模塊

導(dǎo)入的時(shí)候有沒有大括號(hào)的區(qū)別是什么。下面是總結(jié)：

• 當(dāng)用export default people導(dǎo)出時(shí)，就用 import people 導(dǎo)入（不帶大括號(hào)）。

• 一個(gè)文件里，有且只能有一個(gè)export default。但可以有多個(gè)export。

• 當(dāng)用export name 時(shí)，就用 import{name} 導(dǎo)入（記得帶上大括號(hào)）.

• 當(dāng)一個(gè)文件里，既有一個(gè)export default people, 又有多個(gè)export name 或者 export age時(shí)，導(dǎo)入就用 import people,{name,age}。

• 當(dāng)一個(gè)文件里出現(xiàn)n多個(gè) export 導(dǎo)出很多模塊，導(dǎo)入時(shí)除了一個(gè)一個(gè)導(dǎo)入，也可以用 import * asexample

八、 Promise

在promise之前代碼過多的回調(diào)或者嵌套，可讀性差、耦合度高、擴(kuò)展性低。通過Promise機(jī)制，扁平化的代碼機(jī)構(gòu)，大大提高了代碼可讀性；用同步編程的方式來編寫異步代碼，保存線性的代碼邏輯，極大的降低了代碼耦合性而提高了程序的可擴(kuò)展性。

說白了就是用同步的方式去寫異步代碼。

發(fā)起異步請(qǐng)求：

九、 Generators

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

這里生活中有一個(gè)比較形象的例子。咱們到銀行辦理業(yè)務(wù)時(shí)候都得向大廳的機(jī)器取一張排隊(duì)號(hào)。你拿到你的排隊(duì)號(hào)，機(jī)器并不會(huì)自動(dòng)為你再出下一張票。也就是說取票機(jī)“暫停”住了，直到下一個(gè)人再次喚起才會(huì)繼續(xù)吐票。

OK。說說迭代器。當(dāng)你調(diào)用一個(gè)generator時(shí)，它將返回一個(gè)迭代器對(duì)象。這個(gè)迭代器對(duì)象擁有一個(gè)叫做next的方法來幫助你重啟generator函數(shù)并得到下一個(gè)值。next方法不僅返回值，它返回的對(duì)象具有兩個(gè)屬性：done和value。value是你獲得的值，done用來表明你的generator是否已經(jīng)停止提供值。繼續(xù)用剛剛?cè)∑钡睦樱繌埮抨?duì)號(hào)就是這里的value，打印票的紙是否用完就這是這里的done。

那生成器和迭代器又有什么用處呢？

圍繞著生成器的許多興奮點(diǎn)都與異步編程直接相關(guān)。異步調(diào)用對(duì)于我們來說是很困難的事，我們的函數(shù)并不會(huì)等待異步調(diào)用完再執(zhí)行，你可能會(huì)想到用回調(diào)函數(shù)，（當(dāng)然還有其他方案比如Promise比如Async/await）。

生成器可以讓我們的代碼進(jìn)行等待。就不用嵌套的回調(diào)函數(shù)。使用generator可以確保當(dāng)異步調(diào)用在我們的generator函數(shù)運(yùn)行一下行代碼之前完成時(shí)暫停函數(shù)的執(zhí)行。

那么問題來了，咱們也不能手動(dòng)一直調(diào)用next()方法，你需要一個(gè)能夠調(diào)用生成器并啟動(dòng)迭代器的方法。就像這樣子的：

生成器與迭代器最有趣、最令人激動(dòng)的方面，或許就是可創(chuàng)建外觀清晰的異步操作代碼。你不必到處使用回調(diào)函數(shù)，而是可以建立貌似同步的代碼，但實(shí)際上卻使用 yield 來等待異步操作結(jié)束。

十、 async 函數(shù)

es6引入了 async 函數(shù)，使得異步操作變得更加方便。

async 函數(shù)是什么？一句話，它就是 Generator 函數(shù)的語法糖。

一比較就會(huì)發(fā)現(xiàn)，async函數(shù)就是將 Generator 函數(shù)的星號(hào)（*）替換成async，將yield替換成await，僅此而已。

async函數(shù)對(duì) Generator 函數(shù)的改進(jìn)，體現(xiàn)在以下四點(diǎn)：

• 內(nèi)置執(zhí)行器

• 更好的語義

• 更廣的適用性

• 返回值是 Promise

十一、 Class基本語法

JavaScript 語言中，生成實(shí)例對(duì)象的傳統(tǒng)方法是通過構(gòu)造函數(shù)：

es6 提供了更接近傳統(tǒng)語言的寫法，引入了 Class（類）這個(gè)概念，作為對(duì)象的模板。通過class關(guān)鍵字，可以定義類。

基本上，es6 的%(red)[class]可以看作只是一個(gè)語法糖，它的絕大部分功能，es5 都可以做到，新的%(red)[class]寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。上面的代碼用 es6 的%(red)[class]改寫，就是下面這樣。

上面代碼定義了一個(gè)“類”，可以看到里面有一個(gè)constructor方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實(shí)例對(duì)象。也就是說，es5 的構(gòu)造函數(shù)Point，對(duì)應(yīng) es6 的Point類的構(gòu)造方法。

Point類除了構(gòu)造方法，還定義了一個(gè)toString方法。注意，定義“類”的方法的時(shí)候，前面不需要加上function這個(gè)關(guān)鍵字，直接把函數(shù)定義放進(jìn)去了就可以了。另外，方法之間不需要逗號(hào)分隔，加了會(huì)報(bào)錯(cuò)。es6 的類，完全可以看作構(gòu)造函數(shù)的另一種寫法。

關(guān)于“前端開發(fā)es6有哪些特點(diǎn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。