ES6 常用總結(前端開發js技術進階提升總結)
一、變數宣告const和let
在ES6之前,我們都是用var關鍵字宣告變數。無論宣告在何處,都會被視為宣告在函式的最頂部(不在函式的最頂部就在全域性作用域的最頂部)。這就是函式變數提升例如:不用關心bool是否為true or false。實際上,無論如何str都會被建立宣告。(如果未宣告,返回的是null)
而es6之後,我們通常用let和const來宣告。let表示變數、const表示常量,let和const都是塊級作用域。如何理解這個塊級作用域?
- 在一個函式內部
- 在一個程式碼塊內部
通常來說{}大括號內的程式碼塊即為let和const的作用域。
let 的作用域是在它所在當前程式碼塊,但不會被提升到當前函式的最頂部。
const 宣告的變數都會被認為是常量,表示它的值被設定完成後就不能再修改了。
如果const的是一個物件,物件所包含的值是可以被修改的。就是物件所指向的地址沒有變就行。
二、模板字串
es6模板字元簡直是開發者的福音,解決了es5在字串功能上的痛點。2.1 基本的字串格式化
將表示式嵌入字串中進行拼接。用${}來界定。//ES5
var way = 'String'
console.log('ES5:' + way)
//ES6
let way = 'String Template'
console.log('ES6:' + way)
2.2 多行字串拼接
在ES5時我們通過反斜槓()來做多行字串或者字串一行行拼接。ES6反引號(``)直接搞定。2.3 更多方法
三、函式新特性
3.1 函式預設引數
在ES5我們給函式定義引數預設值是怎麼樣?function action(num) {
num = num || 200;
//當傳入num時,num為傳入的值
//當沒傳入引數時,num即有了預設值200
return num;
}
但細心觀察的同學們肯定會發現,num傳入為0的時候就是false,但是我們實際的需求就是要拿到num = 0,此時num = 200 明顯與我們的實際想要的效果明顯不一樣。
ES6為引數提供了預設值。在定義函式時便初始化了這個引數,以便在引數沒有被傳遞進去時使用。
function action( num = 200 ){ console.log(num) } action(0); //0 action(); //200 action(300) //300
3.2 箭頭函式
ES6很有意思的一部分就是函式的快捷寫法。也就是箭頭函式。箭頭函式最直觀的三個特點:
- 不需要 function 關鍵字來建立函式
- 省略 return 關鍵字
- 繼承當前上下文的 this 關鍵字
說個小細節。
當你的函式有且僅有一個引數的時候,是可以省略掉括號的。當你函式返回有且僅有一個表示式的時候可以省略{} 和 return。例如:
var people = name => 'hello' + name
作為參考:
來道筆試題:把下面ES5程式碼簡化重構成ES6方式
四、拓展的物件功能
4.1 物件初始化簡寫
ES5我們對於物件都是以鍵值對的形式書寫,是有可能出現鍵值對重名的。例如:ES6 同樣改進了為物件字面量方法賦值的語法。ES5為物件新增方法:
ES6 物件提供了 Object.assign()
這個方法來實現淺複製。
Object.assign() 可以把任意多個源物件自身可列舉的屬性拷貝給目標物件,然後返回目標物件。第一引數即為目標物件。在實際專案中,我們為了不改變源物件。一般會把目標物件傳為{}。
五、更方便的資料訪問--解構
陣列和物件是JS中最常用也是最重要表示形式。為了簡化提取資訊,ES6新增瞭解構,這是將一個數據結構分解為更小的部分的過程。ES5我們提取物件中的資訊形式如下:
是不是覺得很熟悉,沒錯,在ES6之前我們就是這樣獲取物件資訊的,一個一個獲取。現在,解構能讓我們從物件或者數組裡取出資料存為變數,例如:
面試題:
六、Spread Operator 展開運算子
ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒...
接下來就展示一下它的用途。
組裝物件或者陣列:
對於 Object 而言,還可以用於組合成新的 Object 。(ES2017 stage-2 proposal) 當然如果有重複的屬性名,右邊覆蓋左邊。
七、import 和 export
7.1 import匯入模組、export匯出模組
匯入的時候有沒有大括號的區別是什麼。下面是總結:
- 當用
export default people
匯出時,就用import people
匯入(不帶大括號)。 - 一個檔案裡,有且只能有一個export default。但可以有多個export。
- 當用export name 時,就用
import{name}
匯入(記得帶上大括號). - 當一個檔案裡,既有一個export default people, 又有多個export name 或者 export age時,匯入就用
import people,{name,age}
。 - 當一個檔案裡出現n多個 export 匯出很多模組,匯入時除了一個一個匯入,也可以用
import * asexample
八、 Promise
在promise之前程式碼過多的回撥或者巢狀,可讀性差、耦合度高、擴充套件性低。通過Promise機制,扁平化的程式碼機構,大大提高了程式碼可讀性;用同步程式設計的方式來編寫非同步程式碼,儲存線性的程式碼邏輯,極大的降低了程式碼耦合性而提高了程式的可擴充套件性。說白了就是用同步的方式去寫非同步程式碼。
發起非同步請求:
八、 Generators
生成器( generator)是能返回一個迭代器的函式。生成器函式也是一種函式,最直觀的表現就是比普通的function多了個星號*,在其函式體內可以使用yield關鍵字,有意思的是函式會在每個yield後暫停。
這裡生活中有一個比較形象的例子。咱們到銀行辦理業務時候都得向大廳的機器取一張排隊號。你拿到你的排隊號,機器並不會自動為你再出下一張票。也就是說取票機“暫停”住了,直到下一個人再次喚起才會繼續吐票。
OK。說說迭代器。當你呼叫一個generator時,它將返回一個迭代器物件。這個迭代器物件擁有一個叫做next的方法來幫助你重啟generator函式並得到下一個值。next方法不僅返回值,它返回的物件具有兩個屬性:done和value。value是你獲得的值,done用來表明你的generator是否已經停止提供值。繼續用剛剛取票的例子,每張排隊號就是這裡的value,列印票的紙是否用完就這是這裡的done。
那生成器和迭代器又有什麼用處呢?
圍繞著生成器的許多興奮點都與非同步程式設計直接相關。非同步呼叫對於我們來說是很困難的事,我們的函式並不會等待非同步呼叫完再執行,你可能會想到用回撥函式,(當然還有其他方案比如Promise比如Async/await)。
生成器可以讓我們的程式碼進行等待。就不用巢狀的回撥函式。使用generator可以確保當非同步呼叫在我們的generator函式執行一下行程式碼之前完成時暫停函式的執行。
那麼問題來了,咱們也不能手動一直呼叫next()方法,你需要一個能夠呼叫生成器並啟動迭代器的方法。就像這樣子的:
生成器與迭代器最有趣、最令人激動的方面,或許就是可建立外觀清晰的非同步操作程式碼。你不必到處使用回撥函式,而是可以建立貌似同步的程式碼,但實際上卻使用 yield 來等待非同步操作結束。
十、 async 函式
es6引入了 async 函式,使得非同步操作變得更加方便。
async 函式是什麼?一句話,它就是 Generator 函式的語法糖。
一比較就會發現,async函式就是將 Generator 函式的星號(*)替換成async,將yield替換成await,僅此而已。
async函式對 Generator 函式的改進,體現在以下四點:
內建執行器
更好的語義
更廣的適用性
返回值是 Promise
十一、 Class基本語法
JavaScript 語言中,生成例項物件的傳統方法是通過建構函式:es6 提供了更接近傳統語言的寫法,引入了 Class(類)這個概念,作為物件的模板。通過class關鍵字,可以定義類。
基本上,es6 的%(red)[class]可以看作只是一個語法糖,它的絕大部分功能,es5 都可以做到,新的%(red)[class]寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已。上面的程式碼用 es6 的%(red)[class]改寫,就是下面這樣。
上面程式碼定義了一個“類”,可以看到裡面有一個constructor方法,這就是構造方法,而this關鍵字則代表例項物件。也就是說,es5 的建構函式Point,對應 es6 的Point類的構造方法。
Point類除了構造方法,還定義了一個toString方法。注意,定義“類”的方法的時候,前面不需要加上function這個關鍵字,直接把函式定義放進去了就可以了。另外,方法之間不需要逗號分隔,加了會報錯。
es6 的類,完全可以看作建構函式的另一種寫法。
文章內容源自:https://mp.weixin.qq.com/s/TmtZBe38dFU-_AqLFd7t0g