ES6基礎教程

學習ES6的前置知識:html

  1. 熟練掌握ES5的知識:由於ES6只是ES5的升級,因此你必須對ES5的基本語法達到熟練的程度,若是你還不瞭解ES5的基本語法,仍是腳踏實地從頭開始。
  2. 瞭解ES6:據說並在工做學習中見過ES6,並瞭解ES6的用途。

第1節:ES6的開發環境搭建

工欲善其事,必先利其器。因此咱們第1節就是搭建一個基本的ES6開發環境。如今的Chrome瀏覽器已經支持ES6了,可是有些低版本的瀏覽器仍是不支持ES6的語法,這就須要咱們把ES6的語法自動的轉變成ES5的語法。若是你聽過我Vue課程的話,應該知道Webpack是有自動編譯轉換能力的,除了Webpack自動編譯,咱們還能夠用Babel來完成。這節課咱們就使用Babel把ES6編譯成ES5。前端

創建工程目錄:

先創建一個項目的工程目錄,並在目錄下邊創建兩個文件夾:srcdistvue

  • src:書寫ES6代碼的文件夾,寫的js程序都放在這裏。
  • dist:利用Babel編譯成的ES5代碼的文件夾,在HTML頁面須要引入的時這裏的js文件。

編寫index.html:

文件夾創建好後,咱們新建一個index.html文件。java

須要注意的是在引入js文件時,引入的是dist目錄下的文件。webpack

編寫index.js

在src目錄下,新建index.js文件。這個文件很簡單,咱們只做一個a變量的聲明,並用console.log()打印出來。git

咱們用了let聲明,這裏let是ES6的一種聲明方式,接下來咱們須要把這個ES6的語法文件自動編程成ES5的語法文件。程序員

初始化項目

在安裝Babel以前,須要用npm init先初始化咱們的項目。打開終端或者經過cmd打開命令行工具,進入項目目錄,輸入下邊的命令:es6

-y表明所有默認贊成,就不用一次次按回車了。命令執行完成後,會在項目根目錄下生產package.json文件。github

能夠根據本身的須要進行修改,好比咱們修改name的值。web

全局安裝Babel-cli

在終端中輸入如下命令,若是你安裝很慢的話,可使用淘寶鏡像的cnpm來進行安裝。安裝cnpm的方法,你們本身百度吧。

雖然已經安裝了babel-cli,只是這樣還不能成功進行轉換,若是你不相信能夠輸入下邊的命令試一下。

你會發現,在dist目錄下確實生產了index.js文件,可是文件並無變化,仍是使用了ES6的語法。由於咱們還須要安裝轉換包才能成功轉換,繼續往下看吧。

本地安裝babel-preset-es2015 和 babel-cli

安裝完成後,咱們能夠看一下咱們的package.json文件,已經多了devDependencies選項。

新建.babelrc

在根目錄下新建.babelrc文件,並打開錄入下面的代碼

這個文件咱們創建完成後,如今能夠在終端輸入的轉換命令了,此次ES6成功轉化爲ES5的語法。

簡化轉化命令:

在學習vue 的時候,可使用npm run build 直接利用webpack進行打包,在這裏也但願利用這種方式完成轉換。打開package.json文件,把文件修改爲下面的樣子。

修改好後,之後咱們就可使用 npm run build 來進行轉換了。

第2節:新的聲明方式

經過上節課的學習咱們已經能夠愉快的寫代碼了。在文章開始以前,我仍是要強調一件事情:你們必定要親自動手敲代碼,學習編程這個事兒,不本身動手練習是學不會的。若是你上節課尚未搭建好,你仍是先把環境搭建好,再學習這節課。

之前咱們在聲明時只有一種方法,就是使用var來進行聲明,ES6對聲明的進行了擴展,如今能夠有三種聲明方式了。

字面理解ES6的三種聲明方式:

  1. var:它是variable的簡寫,能夠理解成變量的意思。
  2. let:它在英文中是「讓」的意思,也能夠理解爲一種聲明的意思。
  3. const:它在英文中也是常量的意思,在ES6也是用來聲明常量的,常量你能夠簡單理解爲不變的量。

var聲明:

var在ES6裏是用來升級全局變量的,咱們能夠先做一個最簡單的實例,用var聲明一個變量a,而後用console.log進行輸出。

咱們能夠看到JSPang在控制檯已經被打印出來了。那如何理解它的做用是聲明全局變量那?咱們用匿名函數給他進行一個包裹,而後在匿名函數中調用這個a變量,看看能不能調用到。

能夠看到控制檯輸出了JSPang,這證實var確實是全局的。若是你覺的這個不夠直觀說明var是全局聲明,還能夠用區塊的方式進行調用測試,先看下面的代碼。

這時打印出來的值是多少呢?對,應該是3,由於var是全局聲明的,會覆蓋上面聲明的a變量。

let局部聲明

經過兩個簡單的例子,咱們對var的全局聲明有了必定了解。那跟var向對應的是let,它是局部變量聲明。仍是上面的例子,咱們試着在區塊裏用let聲明。

這時候控制檯打印出來的值就是2了。若是咱們只在區塊裏聲明,再也不外部聲明,咱們打印a時就會報錯,顯示找不到變量。

上面兩個例子說明了let是局部變量聲明,let聲明只在區塊內起做用,外部是不能夠調用的。

有些剛接觸JavaScript的小夥伴會疑惑了,我感受let尚未var好用,其實let是防止你的數據污染的,在大型項目中是很是有用處的。如今看一個循環的例子,咱們來看一下let的好處。

用var聲明的循環

你會發現循環體外的i變量被污染了,若是在外部再使用i時就會出現問題,這是開發者不想看到的。咱們再利用let聲明,就能夠解決這個問題。

用let聲明的循環

你執行時會發現控制檯報錯了,找不到循環體外的i變量。經過兩種聲明的比較,能夠明白let在防止程序數據污染上仍是頗有用處的。咱們要努力去習慣用let聲明,減小var聲明去污染全局空間,在vue的使用中也要注意這點。

const聲明常量

在程序開發中,有些變量是但願聲明後在業務層就再也不發生變化了,簡單來講就是從聲明開始,這個變量始終不變,就須要用const進行聲明。

咱們來一段用const聲明錯誤的代碼,在錯誤中學習const的特性也是很是好的。

在編譯這段代碼的過程當中,你就會發現已經報錯,沒法編譯了,緣由就是咱們const聲明的變量是不能夠改變的。const是很好理解的,我就不做過多的解釋說明了。

這節課咱們學了ES6的3種聲明方式,var、let、const,這三種方式各有所長,既然已經學習了新技術,咱們就要擁抱它,試着在你的項目中根據狀況用let和const進行聲明吧,不要再只使用var了。

下節課咱們將講解數據的解構,很高興你能和我一塊兒學習,成長爲更好的本身。

第3節:變量的解構賦值

ES6容許按照必定模式,從數組和對象中提取值,對變量進行賦值,這被稱爲解構。解構賦值在實際開發中能夠大量減小咱們的代碼量,而且讓咱們的程序結構更清晰。也許你仍是不太明白,那先來一個最簡單的數組解構賦值來進行賦值。

數組的解構賦值:

簡單的數組解構:

之前,爲變量賦值,咱們只能直接指定值。好比下面的代碼:

而如今咱們能夠用數組解構的方式來進行賦值。

上面的代碼表示,能夠從數組中提取值,按照位置的對象關係對變量賦值。

數組模式和賦值模式統一:

能夠簡單的理解爲等號左邊和等號右邊的形式要統一,若是不統一解構將失敗。

若是等號兩邊形式不同,極可能得到undefined或者直接報錯。

解構的默認值

解構賦值是容許你使用默認值的,先看一個最簡單的默認是的例子。

上邊的例子數組中只有一個值,可能你會多少有些疑惑,咱們就來個多個值的數組,並給他一些默認值。

如今咱們對默認值有所瞭解,須要注意的是undefinednull的區別。

undefined至關於什麼都沒有,b是默認值。

null至關於有值,但值爲null。因此b並無取默認值,而是解構成了null。

對象的解構賦值

解構不只能夠用於數組,還能夠用於對象。

注意:對象的解構與數組有一個重要的不一樣。數組的元素是按次序排列的,變量的取值由它的位置決定;而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。

圓括號的使用

若是在解構以前就定義了變量,這時候你再解構會出現問題。下面是錯誤的代碼,編譯會報錯。

要解決報錯,使程序正常,咱們這時候只要在解構的語句外邊加一個圓括號就能夠了。

字符串解構

字符串也能夠解構,這是由於,此時字符串被轉換成了一個相似數組的對象。

 

總結:這節課的內容很簡單,可是也有一些細節須要注意,但願你能動手把解構練習一遍,在實戰項目中解構Json數據格式仍是很廣泛的,有了ES6得幫助,提升了很多工做效率。

第4節:擴展運算符和rest運算符

上節課學的解構已經能夠大大增長咱們的開發效率,這節課咱們學習擴展運算符和rest運算符,它們都是…(三個點)。它們能夠很好的爲咱們解決參數和對象數組未知狀況下的編程,讓咱們的代碼更健壯和簡潔。

對象擴展運算符(…):

當編寫一個方法時,咱們容許它傳入的參數是不肯定的。這時候可使用對象擴展運算符來做參數,看一個簡單的列子:

這時咱們看到控制檯輸出了 1,2,3,undefined,這說明是能夠傳入多個值,而且就算方法中引用多了也不會報錯。

擴展運算符的用處:

咱們先用一個例子說明,咱們聲明兩個數組arr1和arr2,而後咱們把arr1賦值給arr2,而後咱們改變arr2的值,你會發現arr1的值也改變了,由於咱們這是對內存堆棧的引用,而不是真正的賦值。

控制檯輸出:

這是咱們不想看到的,能夠利用對象擴展運算符簡單的解決這個問題,如今咱們對代碼進行改造。

如今控制檯預覽時,你能夠看到咱們的arr1並無改變,簡單的擴展運算符就解決了這個問題。

rest運算符

若是你已經很好的掌握了對象擴展運算符,那麼理解rest運算符並不困難,它們有不少類似之處,甚至不少時候你不用特地去區分。它也用…(三個點)來表示,咱們先來看一個例子。

這時候控制檯打印出了7,說明咱們arg裏有7個數組元素,這就是rest運算符的最簡單用法。

如何循環輸出rest運算符

這裏咱們用for…of循環來進行打印出arg的值,咱們這裏只是簡單使用一下,之後咱們會專門講解for…of循環。

for…of的循環能夠避免咱們開拓內存空間,增長代碼運行效率,因此建議你們在之後的工做中使用for…of循環。有的小夥伴會說了,反正最後要轉換成ES5,沒有什麼差異,可是至少從代碼量上咱們少打了一些單詞,這就是開發效率的提升。

總結:咱們這節課學習了對象擴展運算符和reet運算符,它們兩個仍是很是相似的,可是你要本身區分,這樣才能在工做中運用自如。在之後的課程中還會有不少關於擴展運算符和rset運算符的妙用,讓咱們一塊兒期待吧。

第5節:字符串模版

這節咱們主要學習ES6對字符串新增的操做,最重要的就是字符串模版,字符串模版的出現讓咱們不再用拼接變量了,並且支持在模板裏有簡單計算操做。小夥伴們是否是已經摩拳擦掌等不急了那?那咱們就開始吧。

字符串模版

先來看一個在ES5下咱們的字符串拼接案例:

ES5下必須用+jspang+這樣的形式進行拼接,這樣很麻煩並且很容易出錯。ES6新增了字符串模版,能夠很好的解決這個問題。字符串模版再也不使用‘xxx’這樣的單引號,而是換成了xxx這種形式,也叫鏈接號。這時咱們再引用jspang變量就須要用${jspang}這種形式了,咱們對上邊的代碼進行改造。

能夠看到瀏覽器出現了和上邊代碼同樣的結果。並且這裏邊支持html標籤,能夠試着輸入一些。

對運算的支持:

強大的字符串模版,在實際開發中,咱們可讓後臺寫一個活動頁面,而後輕鬆的輸出給用戶。

字符串查找

ES6還增長了字符串的查找功能,並且支持中文哦,小夥伴是否是很興奮。仍是拿上邊的文字做例子,進行操做。

查找是否存在:

先來看一下ES5的寫法,其實這種方法並不實用,給咱們的索引位置,咱們本身還要肯定位置。

這是網頁中輸出了20,咱們還要本身判斷。

ES6直接用includes就能夠判斷,再也不返回索引值,這樣的結果咱們更喜歡,更直接。

判斷開頭是否存在:

判斷結尾是否存在:

須要注意的是:starts和ends 後邊都要加s,我開始時常常寫錯,但願小夥伴們不要採坑。

複製字符串

咱們有時候是須要字符串重複的,好比分隔符和特殊符號,這時候複製字符串就派上用場了,語法很簡單。

固然ES6對字符串還有一些其它操做,由於實際工做中不太使用,這裏就不做太多的介紹了。但願你能動手練習一下,並把這些新特性應用到工做中,不然可能很快就忘記了。

 

第6節:ES6數字操做

前端編程工做中對數字的操做是很是多的,若是你對數字操做的很差,就很難寫出使人驚奇的程序,因此咱們這節課重點學習一下ES6新增的一些數字操做方法。

二進制和八進制

二進制和八進制數字的聲明並非ES6的特性,咱們只是作一個常識性的回顧,由於不少新人小夥伴會把他們當成字符串或者不知道是什麼,因此這算是贈送的知識點。

二進制聲明:

二進制的英文單詞是Binary,二進制的開始是0(零),而後第二個位置是b(注意這裏大小寫均可以實現),而後跟上二進制的值就能夠了。

這時候瀏覽器的控制檯顯示出了21。

八進制聲明:

八進制的英文單詞是Octal,也是以0(零)開始的,而後第二個位置是O(歐),而後跟上八進制的值就能夠了。

這時候瀏覽器的控制檯顯示出了438。

數字判斷和轉換

數字驗證Number.isFinite( xx )

可使用Number.isFinite( )來進行數字驗證,只要是數字,不管是浮點型仍是整形都會返回true,其餘時候會返回false。

NaN驗證

NaN是特殊的非數字,可使用Number.isNaN()來進行驗證。下邊的代碼控制檯返回了true。

判斷是否爲整數Number.isInteger(xx)

整數轉換Number.parseInt(xxx)和浮點型轉換Number.parseFloat(xxx)

整數取值範圍操做

整數的操做是有一個取值範圍的,它的取值範圍就是2的53次方。咱們先用程序來看一下這個數字是什麼.

在咱們計算時會常常超出這個值,因此咱們要進行判斷,ES6提供了一個常數,叫作最大安全整數,之後就不須要咱們計算了。

最大安全整數

最小安全整數

安全整數判斷isSafeInteger( )

 

總結:這節課咱們學習了ES6數字的操做,方法不少,很零散,須要常常複習或者實戰中慢慢熟悉。

第7節:ES6中新增的數組知識(1)

JSON數組格式轉換

JSON的數組格式就是爲了前端快速的把JSON轉換成數組的一種格式,咱們先來看一下JSON的數組格式怎麼寫。

這就是一個標準的JSON數組格式,跟普通的JSON對比是在最後多了一個length屬性。只要是這種特殊的json格式均可以輕鬆使用ES6的語法轉變成數組。在ES6中絕大部分的Array操做都存在於Array對象裏。咱們就用Array.from(xxx)來進行轉換。咱們把上邊的JSON代碼轉換成數組,並打印在控制檯。

實際開發中這種方法仍是比較經常使用的,畢竟節省了咱們代碼行數,也讓咱們的程序更清晰。

Array.of()方法:

它負責把一堆文本或者變量轉換成數組。在開發中咱們常常拿到了一個相似數組的字符串,須要使用eval來進行轉換,若是你一個老手程序員都知道eval的效率是很低的,它會拖慢咱們的程序。這時候咱們就可使用Array.of方法。咱們看下邊的代碼把一堆數字轉換成數組並打印在控制檯上:

固然它不只能夠轉換數字,字符串也是能夠轉換的,看下邊的代碼:

find( )實例方法:

所謂的實例方法就是並非以Array對象開始的,而是必須有一個已經存在的數組,而後使用的方法,這就是實例方法(不理解請看下邊的代碼,再和上邊的代碼進行比對,你會有所頓悟)。這裏的find方法是從數組中查找。在find方法中咱們須要傳入一個匿名函數,函數須要傳入三個參數:

  • value:表示當前查找的值。
  • index:表示當前查找的數組索引。
  • arr:表示當前數組。

在函數中若是找到符合條件的數組元素就進行return,並中止查找。你能夠拷貝下邊的代碼進行測試,就會知道find做用。

控制檯輸出了6,說明找到了符合條件的值,並進行返回了,若是找不到會顯示undefined。

第8節:ES6中新增的數組知識(2)

fill( )實例方法:

fill()也是一個實例方法,它的做用是把數組進行填充,它接收三個參數,第一個參數是填充的變量,第二個是開始填充的位置,第三個是填充到的位置。

上邊的代碼是把數組從第二位到第五位用jspang進行填充。

數組的遍歷

for…of循環:

這種形式比ES5的for循環要簡單並且高效。先來看一個最簡單的for…of循環。

for…of數組索引:有時候開發中是須要數組的索引的,那咱們可使用下面的代碼輸出數組索引。

能夠看到這時的控制檯就輸出了0,1,2,也就是數組的索引。

同時輸出數組的內容和索引:咱們用entries()這個實例方法,配合咱們的for…of循環就能夠同時輸出內容和索引了。

entries( )實例方法:

entries()實例方式生成的是Iterator形式的數組,那這種形式的好處就是可讓咱們在須要時用next()手動跳轉到下一個值。咱們來看下面的代碼:

總結:咱們經過兩節課講了ES6對數組的擴展,數組在咱們的實際開發中是特別重要的,幾乎我天天都要編寫數組的操做代碼,因此這節課必定要在聽完以後本身敲一遍代碼。

第9節:ES6中的箭頭函數和擴展

這節課開始,先不着急看ES6中的函數,而是回顧一下ES5中的函數寫法。寫一個函數,進行一個加法計算。

咱們聲明瞭一個add函數,而後傳入a和b兩個值,返回a+b的值。 而後咱們在控制檯打印了這個函數的返回結果,這裏是3.

默認值

在ES6中給咱們增長了默認值的操做,咱們修改上邊的代碼,能夠看到如今只須要傳遞一個參數也是能夠正常運行的。

主動拋出錯誤

在使用Vue的框架中,能夠常常看到框架主動拋出一些錯誤,好比v-for必須有:key值。那尤大神是如何作到的那?其實很簡單,ES6中咱們直接用throw new Error( xxxx ),就能夠拋出錯誤。

函數中的嚴謹模式

咱們在ES中就常用嚴謹模式來進行編程,可是必須寫在代碼最上邊,至關於全局使用。在ES6中咱們能夠寫在函數體中,至關於針對函數來使用。

上邊的代碼若是運行的話,你會發現瀏覽器控制檯報錯,這是ES6中的一個坑,若是沒人指導的話,可能你會陷進去一會。這個錯誤的緣由就是若是你使用了默認值,再使用嚴謹模式的話,就會有衝突,因此咱們要取消默認值的操做,這時候你在運行就正常了。

得到須要傳遞的參數個數

若是你在使用別人的框架時,不知作別人的函數須要傳遞幾個參數怎麼辦?ES6爲咱們提供了獲得參數的方法(xxx.length).咱們用上邊的代碼看一下須要傳遞的參數個數。

這時控制檯打印出了2,可是若是咱們去掉嚴謹模式,並給第二個參數加上默認值的話,這時候add.length的值就變成了1, 也就是說它獲得的是必須傳入的參數。

箭頭函數

在學習Vue的時候,我已經大量的使用了箭頭函數,由於箭頭函數真的很好用,咱們來看一個最簡單的箭頭函數。也就是上邊咱們寫的add函數,進行一個改變,寫成箭頭函數。

相關文章
相關標籤/搜索