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

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

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

一、變量聲明const和let

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

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

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

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

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

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

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

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

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

二、模板字符串

es6模板字符簡直是開發(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時我們通過反斜杠()來做多行字符串或者字符串一行行拼接。ES6反引號(``)直接搞定。

2.3 更多方法

三、函數(shù)新特性

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

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

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

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

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

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

3.2 箭頭函數(shù)

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

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

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

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

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

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

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

var people = name => 'hello' + name

作為參考：

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

四、拓展的對象功能

4.1 對象初始化簡寫

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

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

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

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

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

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

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

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

面試題：

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

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

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

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

七、import 和 export

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

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

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

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

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

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

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

八、 Promise

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

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

發(fā)起異步請求：

九、 Generators

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

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

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

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

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

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

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

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

十、 async 函數(shù)

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

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

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

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

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

• 更好的語義

• 更廣的適用性

• 返回值是 Promise

十一、 Class基本語法

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

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

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

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

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

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

當(dāng)前文章：前端開發(fā)es6有哪些特點(diǎn)
本文網(wǎng)址：http://jinyejixie.com/article28/ggipjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、手機(jī)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、定制開發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)