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 入門

 

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