ES6

對象

屬性簡潔表示法

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

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

分類: Frontend

好文要頂關注我收藏該文

Q1mi
關注 - 32
粉絲 - 704

+加關注

« 上一篇： django-debug-toolbar使用指南
» 下一篇：初學Django項目可能會遇到的問題

posted @ 2018-07-01 14:52 Q1mi 閱讀( 782) 評論( 0) 編輯收藏

ES6初始

ES6介紹

let和const

注意：let不容許在相同的做用域內重複聲明同一變量

const

變量的解構賦值

板字符串

函數

箭頭函數

對象

屬性簡潔表示法

面向對象

對象

屬性簡潔表示法

Object.assign()

面向對象

Promise