ES6 語法指南

學習參考網站：http://es6.ruanyifeng.com/#docs/intro

下面是瞭解

一、什麼是ECMAScript？

來看下前端的發展歷程：
web1.0時代：
• 最初的網頁以HTML為主，是純靜態的網頁。網頁是隻讀的，資訊流只能從服務的到客戶端單向流通。開發人員也只關心頁面的樣式和內容即可。
web2.0時代：
• 1995年，網景工程師Brendan Eich 花了10天時間設計了JavaScript語言。
• 1996年，微軟釋出了JScript，其實是JavaScript的逆向工程實現。
• 1997年，為了統一各種不同script指令碼語言，ECMA（歐洲計算機制造商協會）以JavaScript為基礎，制定了ECMAscript標準規範。JavaScript和JScript都是ECMAScript的標準實現者，隨後各大瀏覽器廠商紛紛實現了ECMAScript標準。
所以，ECMAScript是瀏覽器指令碼語言的規範，而各種我們熟知的js語言，如JavaScript則是規範的具體實現。

二、ECMAScript的快速發展

而後，ECMAScript就進入了快速發展期。
• 1998年6月，ECMAScript 2.0 釋出。
• 1999年12月，ECMAScript 3.0 釋出。這時，ECMAScript 規範本身也相對比較完善和穩定了，但是接下來的事情，就比較悲劇了。
• 2007年10月。。。。ECMAScript 4.0 草案發布。
這次的新規範，歷時頗久，規範的新內容也有了很多爭議。在制定ES4的時候，是分成了兩個工作組同時工作的。
– 一邊是以 Adobe, Mozilla, Opera 和 Google為主的 ECMAScript 4 工作組。
– 一邊是以 Microsoft 和 Yahoo 為主的 ECMAScript 3.1 工作組。
ECMAScript 4 的很多主張比較激進，改動較大。而 ECMAScript 3.1 則主張小幅更新。最終經過 TC39 的會議，決定將一部分不那麼激進的改動保留髮布為 ECMAScript 3.1，而ES4的內容，則延續到了後來的ECMAScript5和6版本中
• 2009年12月，ECMAScript 5 釋出。
• 2011年6月，ECMAScript 5.1 釋出。
• 2015年6月，ECMAScript 6，也就是 ECMAScript 2015 釋出了。 並且從 ECMAScript 6 開始，開始採用年號來做版本。即 ECMAScript 2015，就是ECMAScript6。

重點來了

三、ES5和6的一些新特性

我們這裡只把一些常用的進行學習，更詳細的大家參考：阮一峰的ES6教程

1. let 和 const 命令

var

之前，js定義變數只有一個關鍵字：var
var有一個問題，就是定義的變數有時會莫名奇妙的成為全域性變數。
例如這樣的一段程式碼：

for(var i = 0; i < 5; i++){
    console.log(i);
}
console.log("迴圈外：" + i)

你猜下列印的結果是什麼？

let

let所宣告的變數，只在let命令所在的程式碼塊內有效。
我們把剛才的var改成let試試：

for(let i = 0; i < 5; i++){
    console.log(i);
}
console.log("迴圈外：" + i)

結果：

const

const宣告的變數是常量，不能被修改

2. 字串擴充套件

2.1、新的API

ES6為字串擴充套件了幾個新的API：
• includes()：返回布林值，表示是否找到了引數字串。
• startsWith()：返回布林值，表示引數字串是否在原字串的頭部。
• endsWith()：返回布林值，表示引數字串是否在原字串的尾部。
實驗一下：

2.2字串模板

ES6中提供了`來作為字串模板標記。我們可以這麼玩：

在兩個`之間的部分都會被作為字串的值，不管你任意換行，甚至加入js指令碼

2.3. 解構表示式

陣列解構
比如有一個數組：
let arr = [1,2,3]
我想獲取其中的值，只能通過角標。ES6可以這樣：

const [x,y,z] = arr;// x，y，z將與arr中的每個位置對應來取值
// 然後列印
console.log(x,y,z);

結果：

物件解構
例如有個person物件：

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}

我們可以這麼做：

// 解構表示式獲取值
const {name,age,language} = person;
// 列印
console.log(name);
console.log(age);
console.log(language);

結果：

如過想要用其它變數接收，需要額外指定別名：

• {name:n}：name是person中的屬性名，冒號後面的n是解構後要賦值給的變數。

4. 函式優化

函式引數預設值

在ES6以前，我們無法給一個函式引數設定預設值，只能採用變通寫法：

 function add(a , b) {
     // 判斷b是否為空，為空就給預設值1
     b = b || 1;
     return a + b;
 }
 // 傳一個引數
 console.log(add(10));

現在可以這麼寫：

function add(a , b = 1) {
    return a + b;
}
// 傳一個引數
console.log(add(10));

箭頭函式

ES6中定義函式的簡寫方式：
一個引數時：

var print = function (obj) {
    console.log(obj);
}
// 簡寫為：
var print2 = obj => console.log(obj);

多個引數：

// 兩個引數的情況：
var sum = function (a , b) {
    return a + b;
}
// 簡寫為：
var sum2 = (a,b) => a+b;

程式碼不止一行，可以用{}括起來

var sum3 = (a,b) => {
    return a + b;
}

物件的函式屬性簡寫
比如一個Person物件，裡面有eat方法：

let person = {
    name: "jack",
    // 以前：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // 箭頭函式版：
    eat2: food => console.log(person.name + "在吃" + food),// 這裡拿不到this
    // 簡寫版：
    eat3(food){
        console.log(this.name + "在吃" + food);
    }
}

箭頭函式結合解構表示式
比如有一個函式：

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}

function hello(person) {
    console.log("hello," + person.name)
}
//如果用箭頭函式和解構表示式
var hi = ({name}) =>  console.log("hello," + name);

5. map和reduce

陣列中新增了map和reduce方法。

map

map()：接收一個函式，將原陣列中的所有元素用這個函式處理後放入新陣列返回。
舉例：有一個字串陣列，我們希望轉為int陣列

let arr = ['1','20','-5','3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)

reduce

reduce()：接收一個函式（必須）和一個初始值（可選），該函式接收兩個引數：
• 第一個引數是上一次reduce處理的結果
• 第二個引數是陣列中要處理的下一個元素
reduce()會從左到右依次把陣列中的元素用reduce處理，並把處理的結果作為下次reduce的第一個引數。如果是第一次，會把前兩個元素作為計算引數，或者把使用者指定的初始值作為起始引數
舉例：
const arr = [1,20,-5,3]
沒有初始值：

指定初始值：

6. promise

所謂Promise，簡單說就是一個容器，裡面儲存著某個未來才會結束的事件（通常是一個非同步操作）的結果。從語法上說，Promise 是一個物件，從它可以獲取非同步操作的訊息。Promise 提供統一的 API，各種非同步操作都可以用同樣的方法進行處理。
感覺跟java的Future類很像啊，有木有！
我們可以通過Promise的建構函式來建立Promise物件，並在內部封裝一個非同步執行的結果。
語法：

const promise = new Promise(function(resolve, reject) {
  // ... 執行非同步操作

  if (/* 非同步操作成功 */){
    resolve(value);// 呼叫resolve，代表Promise將返回成功的結果
  } else {
    reject(error);// 呼叫reject，代表Promise會返回失敗結果
  }
});

這樣，在promise中就封裝了一段非同步執行的結果。

如果我們想要等待非同步執行完成，做一些事情，我們可以通過promise的then方法來實現,語法：

promise.then(function(value){
    // 非同步執行成功後的回撥
});
如果想要處理promise非同步執行失敗的事件，還可以跟上catch：
promise.then(function(value){
    // 非同步執行成功後的回撥
}).catch(function(error){
    // 非同步執行失敗後的回撥
})

示例：

const p = new Promise(function (resolve, reject) {
    // 這裡我們用定時任務模擬非同步
    setTimeout(() => {
        const num = Math.random();
        // 隨機返回成功或失敗
        if (num < 0.5) {
            resolve("成功！num:" + num)
        } else {
            reject("出錯了！num:" + num)
        }
    }, 300)
})

// 呼叫promise
p.then(function (msg) {
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
})

結果：

7. set和map(瞭解)

ES6提供了Set和Map的資料結構。
Set，本質與陣列類似。不同在於Set中只能儲存不同元素，如果元素相同會被忽略。跟java很像吧。
建構函式：

// Set建構函式可以接收一個數組或空
let set = new Set();
set.add(1);// [1]
// 接收陣列
let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]
普通方法：
set.add(1);// 新增
set.clear();// 清空
set.delete(2);// 刪除指定元素
set.has(2); // 判斷是否存在
set.keys();// 返回所有key
set.values();// 返回所有值
set.entries();// 返回鍵值對集合
// 因為set沒有鍵值對，所有其keys、values、entries方法返回值一樣的。
set.size; // 元素個數。是屬性，不是方法。

map，本質是與Object類似的結構。不同在於，Object強制規定key只能是字串。而Map結構的key可以是任意物件。即：
• object是 <string,object>集合
• map是<object,object>集合
建構函式：

// map接收一個數組，陣列中的元素是鍵值對陣列
const map = new Map([
    ['key1','value1'],
    ['key2','value2'],
])
// 或者接收一個set
const set = new Set([
    ['key1','value1'],
    ['key2','value2'],
])
const map2 = new Map(set)
// 或者其它map
const map3 = new Map(map);

方法：

8. 模組化

8.1.什麼是模組化

模組化就是把程式碼進行拆分，方便重複利用。類似java中的導包：要使用一個包，必須先導包。
而JS中沒有包的概念，換來的是 模組。
模組功能主要由兩個命令構成：export和import。
• export命令用於規定模組的對外介面，
• import命令用於匯入其他模組提供的功能。

8.2.export

比如我定義一個js檔案:hello.js，裡面有一個物件：

const util = {
    sum(a,b){
        return a + b;
    }
}

我可以使用export將這個物件匯出：

const util = {
    sum(a,b){
        return a + b;
    }
}
export util;

當然，也可以簡寫為：

export const util = {
    sum(a,b){
        return a + b;
    }
}

export不僅可以匯出物件，一切JS變數都可以匯出。比如：基本型別變數、函式、陣列、物件。
當要匯出多個值時，還可以簡寫。比如我有一個檔案：user.js：

var name = "jack"
var age = 21
export {name,age}

省略名稱
上面的匯出程式碼中，都明確指定了匯出的變數名，這樣其它人在匯入使用時就必須準確寫出變數名，否則就會出錯。
因此js提供了default關鍵字，可以對匯出的變數名進行省略
例如：

// 無需宣告物件的名字
export default {
	sum(a,b){
        return a + b;
    }
}

這樣，當使用者匯入時，可以任意起名字

8.3.import

使用export命令定義了模組的對外介面以後，其他 JS 檔案就可以通過import命令載入這個模組。
例如我要使用上面匯出的util：

// 匯入util
import util from 'hello.js'
// 呼叫util中的屬性
util.sum(1,2)

要批量匯入前面匯出的name和age：

import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"歲了")

但是上面的程式碼暫時無法測試，因為瀏覽器目前還不支援ES6 的匯入和匯出功能。除非藉助於工具，把ES6 的語法進行編譯降級到ES5，比如Babel-cli工具
我們暫時不做測試，大家瞭解即可。

9. 物件擴充套件(瞭解)

ES6給Object拓展了許多新的方法，如：
• keys(obj)：獲取物件的所有key形成的陣列
• values(obj)：獲取物件的所有value形成的陣列
• entries(obj)：獲取物件的所有key和value形成的二維陣列。格式：[[k1,v1],[k2,v2],…]
• assian(dest, …src) ：將多個src物件的值 拷貝到 dest中（淺拷貝）。

10. 陣列擴充套件(瞭解)

ES6給陣列新增了許多方法：
• find(callback)：把陣列中的元素逐個傳遞給函式callback執行，如果返回true，則返回該元素
• findIndex(callback)：與find類似，不過返回的是品牌到的元素的索引
• includes（callback）：與find類似，如果匹配到元素，則返回true，代表找到了。