ES6 快速入門

ES6 初識

ES6 是 ECMAScript 6.0 的簡寫，即 JavaScript 語言的下一代標準，已經在 2015年6月正式發佈了，它的目標是讓JS可以方便的開發企業級大型應用程序，所以，ES6的一些規範正在逐漸向Java、C# 等後端語言標準靠近。在 ES6 規範中，比較重大的變化有如下幾個方面：

• 新增 let、const 命令 來聲明變量，和var 相比，let 聲明的變量不存在變量提高問題，但沒有改變JS弱類型的特色，依然能夠接受任意類型變量的聲明；const 聲明的變量不容許在後續邏輯中改變，提升了JS語法的嚴謹性。
• 新增解構賦值、rest 語法、箭頭函數等，這些都是爲了讓代碼看起來更簡潔，而包裝的語法糖。
• 新增模塊化機制，這是 JavaScript 走向規範比較重要的一步，讓前端更方便的實現工程化。
• 新增類和繼承的概念，配合模塊化，JavaScript 也能夠實現高複用、高擴展的系統架構。
• 新增模板字符串功能，高效簡潔，結束拼接字符串的時代。
• 新增 Promise 機制，解決異步回調多層嵌套的問題。

ES6 介紹

let和const 

let

ES6新增了let命令，用於聲明變量。其用法相似var，可是聲明的變量只在let命令所在的代碼塊內有效。

{
    let x = 10;
    var y = 20;
}

x  // ReferenceError: x is not defined
y  // 20

var聲明變量存在變量提高。也就是在聲明變量以前就可使用該變量。

console.log(x)  // undefined，var聲明變量以前可使用該變量
var x = 10;

而let不會這樣，let聲明的變量不能在聲明以前使用。

console.log(x)  // ReferenceError: x is not defined，let聲明變量以前不可使用該變量
let x = 10;

注意：

let不容許在相同的做用域內重複聲明同一個變量。 

好比：

function foo(){
    let x = 10;
    var x = 20;
}  // 報錯

再好比：

function foo(){
    let y = 10;
    let y = 20;
}  // 報錯

ES5中只有全局做用域和函數做用域，並無塊級做用域。

請看下面的示例： 

var name = 'Q1mi'

function foo(){
    console.log(name)
    if (false){
        var name = 'Bob'
    }
}
foo()  // undefined

出現上述現象的緣由就是在函數內部，因爲變量提高致使內存的name變量覆蓋了外層的name變量。

相似的狀況還出如今 for循環的計數變量最後會泄露爲全局變量。 

for (var i=0;i<5;i++){
    console.log('哈哈');
}
console.log(i);  // 5

ES6中的let聲明變量的方式實際上就爲JavaScript新增了塊級做用域。

var name = 'Q1mi'

function foo(){
    console.log(name)
    if (false){
        let name = 'Bob'
    }
}
foo()  // Q1mi

此時，在foo函數內容，外層代碼塊就再也不受內層代碼塊的影響。因此相似for循環的計數變量咱們最好都是用let來聲明。

最後再作個練習鞏固下：

var a = [];
for (var i=0;i<10;i++){
  a[i] = function(){
    console.log(i)
  }
}
a[6]()  // 結果是啥？

const

const用來聲明常量。const聲明變量必須當即初始化，而且其值不能再改變。

const聲明常量的做用域與let相同，只在聲明所在的塊級做用域內有效。 

例如：

const PI = 3.14；

全局對象的屬性：

ES6規定：var命令和function命令聲明的全局變量依舊是全局對象的屬性；let命令、const命令和class命令聲明的全局變量不屬於全局對象的屬性。

查看下面的示例代碼：

var x = 10;
let y = 20;
window.x  // 10
window.y  // undefined

 

變量的解構賦值

ES6容許按照必定的模式，從數組或對象中提取值，對變量進行賦值，這種方式被稱爲解構賦值。

var [x, y, z] = [10, 20, 30]
x  // 10
y  // 20
z  // 30

對象的解構賦值：

var {x, y} = {x: 10, y: 20}
x  // 10
y  // 20

 

字符串

include、startsWith、endsWith

在此以前，JavaScript中只有indexOf方法可用來肯定一個字符串是否包含在另外一個字符串中。

ES6中又提供了3種新方法：

includes()：返回布爾值，表示是否找到了參數字符串。

stratsWith()：返回布爾值，表示參數字符串是否在源字符串的開始位置。

endsWith()：返回布爾值，表示參數字符串是否在源字符串的結尾位置。

示例：

var s = "Hello world!";

s.includes("o")  // true
s.startsWith("Hello")  // true
s.endsWith("!")  // true

這三個方法都支持第2個參數，表示開始匹配的位置。

示例：

s.includes("o", 8)  // false
s.startsWith("world", 6)  // true
s.endsWith("Hello", 5)  // true

 

模板字符串

模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠當作普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。在模板字符串中嵌入變量，須要將變量名寫入${}中。

var name = 'Q1mi', age = 18;
`My name is ${name}, I’m ${age} years old.`

 

函數

箭頭函數

箭頭函數有個特色：

1. 若是參數只有一個，能夠省略小括號
2. 若是不寫return，能夠不寫大括號
3. 沒有arguments變量
4. 不改變this指向

其中箭頭函數中this指向被固定化，不是由於箭頭函數內部有綁定this的機制。實際緣由是箭頭函數根本沒有本身的this，致使內部的this就是外層代碼塊的this。

 

能夠查看下面兩段代碼輸出的區別：

var person = {
    name: 'Q1mi',
    age:18,
    func:function(){
        console.log(this);
    }
}
person.func()  // person對象

和

var person = {
    name: 'Q1mi',
    age:18,
    func:()=>{
        console.log(this);
    }
}
person.func()  // window對象

 

對象 

屬性簡潔表示法

ES6容許直接寫入變量和函數做爲對象的屬性和方法。

function (x, y){
    return {x, y}
}

上面的寫法等同於：

function(x, y){
    return {x: x, y: y}
}

對象的方法也可使用簡潔表示法：

var o = {
    method(){
        return 「Hello!」;
    }
}

等同於：

var o = {
    method: function(){
        return 「Hello!」;
    }
}

 

Object.assign() 

Object.assign方法用來將源對象（source）的全部可枚舉屬性複製到目標對象（target）。它至少須要兩個對象做爲參數，第一個參數是目標對象，第二個參數是源對象。

參數必須都是對象，不然拋出TypeError錯誤。

Object.assjgn只複製自身屬性，不可枚舉屬性（enumerable爲false）和繼承的屬性不會被複制。

簡單示例：

var x = {name: "Q1mi", age: 18};
var y = x;
var z = Object.assign({}, x);
x.age = 20;

x.age  // 20

y.age  // 20

z.age  // 18

注意：

Object.assign方法的其餘用處，可查看文末連接。

面向對象

ES5的構造對象的方式 使用構造函數來創造。構造函數惟一的不一樣是函數名首字母要大寫。

function Point(x, y){
    this.x = x;
    this.y = y;
}

// 給父級綁定方法
Point.prototype.toSting = function(){
    return '(' + this.x + ',' + this.y + ')';
}

var p = new Point(10, 20);
console.log(p.x)
p.toSting();

// 繼承
function ColorPoint(x, y, color){
    Point.call(this, x, y);
    this.color = color;
}
// 繼承父類的方法
ColorPoint.prototype = Object.create(Point.prototype);
// 修復 constructor
ColorPoint.prototype.constructor = Point;
// 擴展方法
ColorPoint.prototype.showColor = function(){
    console.log('My color is ' + this.color);
}

var cp = new ColorPoint(10, 20, "red");
console.log(cp.x);
console.log(cp.toSting());
cp.showColor()

ES6 使用Class構造對象的方式：

class Point{
    constructor(x, y){
        this.x = x;
        this.y = y;
    }  // 不要加逗號
    toSting(){
        return `(${this.x}, ${this.y})`;
    }
}

var p = new Point(10, 20);
console.log(p.x)
p.toSting();

class ColorPoint extends Point{
    constructor(x, y, color){
        super(x, y);  // 調用父類的constructor(x, y)
        this.color = color;
    }  // 不要加逗號
    showColor(){
        console.log('My color is ' + this.color);
    }
}

var cp = new ColorPoint(10, 20, "red");
console.log(cp.x);
cp.toSting();
cp.showColor()

 

Promise

Promise 是異步編程的一種解決方案，比傳統的解決方案（回調函數和事件）更合理、更強大。它由社區最先提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。

使用Promise的優點是有了Promise對象，就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操做更加容易。

用法示例：

const promiseObj = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操做成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise構造函數接受一個函數做爲參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，由 JavaScript 引擎提供，不用本身部署。

Promise實例生成之後，能夠用then方法分別指定resolved狀態和rejected狀態的回調函數。

promiseObj.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法能夠接受兩個回調函數做爲參數。第一個回調函數是Promise對象的狀態變爲resolved時調用，第二個回調函數是Promise對象的狀態變爲rejected時調用。其中，第二個函數是可選的，不必定要提供。這兩個函數都接受Promise對象傳出的值做爲參數。

咱們還能夠將上面的代碼寫成下面這種方式：

promiseObj
.then(function(value) {
  // success
})
.catch(function(error) {
  // failure
});

其實Promise.prototype.catch方法是.then(null, rejection)的別名，用於指定發生錯誤時的回調函數。

 

---

注：

本文中的些許示例來自阮一峯的《ECMAScript 6 標準入門》

附：

想了解更多有關ES6標準內容，推薦閱讀：阮一峯的ECMAScript 6 入門

 

多讀書、多寫碼。世界很大，咱們很小。