JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

近年來Javascript得到了飛速的發展,越來越多的新特性、新語法和新功能的出現,它能夠讓你的代碼更現代化,更易讀,它允許我們以更少的代碼來完成更多的功能。ES6向我們介紹了許多強大的功能,如箭頭函數、模板字符串、Class和模塊……等等,雖然功能很強大,但是也需要學習成本,如果從頭開始學無疑會浪費很多時間,本篇介紹了在開發中常用的新特性,一起看看吧

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

const和let

const是ES6中用於聲明變量的新關鍵字,聲明後無法在重新分配變量。換句話說,它是一個不可變的變量,除非是和對象一起使用,如下代碼,當試圖更改const聲明的變量b則會報錯

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

const和var

let聲明的變量是可變變量,如下圖,const的作用域與let命令相同,都是隻在聲明所在的塊級作用域內有效

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

箭頭函數

箭頭函數是我用上之後感覺就是更具結構性、更現代化,對比ES5和ES6,如下圖

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

此外還可以使用內置的箭頭函數map、filter、reduce,如下map對比

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

模板字符串

模板字符串是我現在用到最多的功能,上圖中的箭頭函數已經用到了模板字符串的功能,有了它你在也不用寫一堆‘+’號了,以下是ES5和ES6的對比

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

我通常最多是在寫拼接html的時候使用,給我的感覺是更有條理,結構更清晰;

默認參數(參數默認值)

我們先來看一個例子,下面的age沒有傳,是undefined

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

我們來設置一個默認值,現在就能返回正確結果了

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

數組和對象解構賦值

  • 對象解構
JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

你還可以重命名對象名稱

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

  • 數組解構
JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

Promises

Promise是ES6的新特性,目的就是為了更好的異步編程,一般用在請求api的時候,比如axios就是基於Promises的強大的一款http請求庫,下面我們自己來創建一個Promise對象

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

下圖展示了在請求api時的用法

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

Rest參數和Spread運算符

rest參數用於獲取數組的參數,並返回一個新數組,舉例說明rest和spread:

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

Class類

類是面向對象編程的核心,看代碼(constructor是構造函數)

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

繼承

繼承父類的方法和屬性,使用extends關鍵字

JavaScript ES6 ——寫的更少,做的更多,一文了解ES6

總結

希望能夠通過本文來讓大家對ES6有個簡單的瞭解,如果想要學習的話,推薦大家閱讀阮一峰大神的免費電子教程,網上搜索即可。這裡祝大家早日脫坑,學什麼會什麼,早日實現自己的目標,如果覺得此文對你有幫助,麻煩點一下關注,謝謝!


分享到:


相關文章: