ES6極速入門

ES6概述

瞭解一下ECMAScript

• 看到Script，就該知道它和JavaScript是分不開的，ECMAScript就是JavaScript的語法規範，它規定我們用var來宣告一個變數，用function關鍵字來宣告一個函式
• 非常官方的說：ECMAScript是一種由Ecma（前身為歐洲計算機制造商協會，英文名稱是European Computer ManufacturersAssociation)通過ECMA-262標準化的指令碼程式設計語言，所有的瀏覽器開發商都要按照它制定的標準來開發瀏覽器，厲不厲害
• ECMAScript 定義 了語言語法（語法解析規則、關鍵字、語句、宣告、運算子等）、型別（布林型、數字、字串、物件等）、原型和繼承、內建物件和函式的標準庫（JSON、數字、陣列方法、物件內省的方法等）
• ECMAScript標準 不定義 HTML或Css的相關功能，也不定義類似DOM（文件物件型別）的Web Api，這些都是在獨立的標準中進行定義的。
• ECMAScript涵蓋了各種環境中js的使用場景，無論是瀏覽器環境還是類似Node.js的非瀏覽器環境
• ECMAScript標準的歷史版本分別是1、2、3、5。但其實也曾計劃釋出提出巨量新特性的第四版，但最終因為想法過於激進而慘遭廢除，而釋出了一個相對謙和的ES5版本
• 2015年6月，ES6正式釋出，它的目標是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言

ES6的學習教程

推薦學習阮一峰ES6教程，還是很詳細的

Es6新增語法

let & const

• let：塊級作用域，意思是所宣告的變數只有在作用域範圍內時變數才有效
  
  執行結果，var變數正常執行，let進行報錯
  

• const：宣告一個只讀變數，一旦被宣告，常量的值就不能再被改變

模板字串

• 什麼意思呢，其實就是在字串裡可以引用其他變數
  
  執行之後的結果
  

物件簡寫

原來的寫法

執行後

物件簡寫後

執行結果

解構表示式

陣列解構表示式

執行之後結果

物件解構表示式

執行之後結果

函式優化

正常的寫法

箭頭函式

函式簡寫

Promise

Promise概述

• Promise是非同步程式設計的一種解決方案，簡單的來說就是一個容器，裡面儲存著某個未來才會結束的事件
• 從語法上來說，Promise是一個物件，從它可以獲取非同步操作的訊息，Promise提供統一的API，各種非同步操作都可以用同樣的方法進行處理
• Promise物件有以下兩個特點：
  （1）物件的狀態不受外界影響。Promise物件代表一個非同步操作，有三種狀態：pending（進行中）、fulfilled（已成功）、rejected（已失敗），只有非同步操作的結果才能決定當前是哪一種狀態，任何其他操作都無法改變這個狀態
  （2）一旦狀態改變，就不會再變。Promise物件狀態的改變只有兩種可能：從pending變為fulfilled，從pending變為rejected
• Promise也有一些缺點
  （1）無法取消Promise，一旦新建它就會立即執行，無法中途取消。
  （2）如果不設定回撥函式，Promise內部丟擲的錯誤，不會反應到外部
  （3）當處於pending狀態時，無法得知目前進展到哪一個階段

用法

• 當我使用ajax傳送一個請求資料的請求時，我們是這樣做的
  
  data.json中的資料如下：
  在瀏覽器進行請求後，瀏覽器控制檯獲取到的資料如下：
  
• 但當我們想要在回撥函式之外獲取請求後的資料時
  
  瀏覽器控制檯結果
  
• 我們要想讓其能夠獲取到資料，就需要將ajax請求變成同步的
  

可以看到兩次都獲取到了資料

但是呢，我們好好的非同步請求，為什麼要用同步的方式，所以有了Promise

在瀏覽器的控制檯顯示如下：

export & import

概述

• export 和 import和java中的導包非常相似
• ES6在語言標準層面上，實現了模組功能，ES6模組不是物件，而是通過export命令顯式指定輸出的程式碼，再通過import命令輸入
• export和import命令不能在瀏覽器中直接使用，但可以通過babel轉換為ES5進行執行，比require更加優雅

用法

• 建立一個工程專案，使用WebStrom開啟
  
• 在專案的根目錄下建立配置檔案.babelrc，檔案內容如下：

{
  "presets": [
    "es2015"
  ]
}

• 安裝babel

# 以下命令分別執行
npm init
npm install babel-preset-es2015  --save-dev

正確執行後是如下結果：

• 安裝babel客戶端用來啟動工程

npm install babel-cli -g

• 編寫export.js
  寫法1：每個都單獨匯出

export let name="zz";
export let age=20;
export let gender="男";
export let say=function (str) {
    console.log(str);
}

寫法2：先宣告後一起匯出 推薦使用

 let name="zz";
 let age=20;
 let gender="男";
 let say=function (str) {
     console.log(str);
 }
 export {name,age,gender,say}

寫法3：以物件作為一個整體匯出

export default {
    name:"zz",
    age:20,
    gender:"男",
    say(str){
        console.log(str)
    }
}

• 進行import

//寫法1：寫法2的匯入方式
//當我們只需要引入一個檔案中的一部分時
import {name} from "./export"

console.log(name)

//寫法3匯入
import user from "./export"

console.log(user.name)
console.log(user.age)
user.say("hello world")

• 終端執行