JavaScript——ES6新特性

時間 2019-12-11

原文原文鏈接

默認參數

var a = function(m,n){
    var m = m || 50;
    var n = n || 'es';
    //...
}

變爲直接放在函數簽名中，由於若是參數爲0,在JavaScript中爲falsejson

var a = function(m=50,n='es'){
    //do something
}

規範：設定了默認值的入參，應該放在沒有設置默認值的參數以後segmentfault

模板字符串

var myname = 'wlfsmile';
var yourname = 'youname';

var name = 'your name is'+ yourname +'and my name is'+ myname;

變爲數組

var name = `your name is ${yourname} and my name is ${myname}`;

解構賦值

ES6 容許按照必定模式，從數組和對象中提取值，對變量進行賦值
數組

var [a,b,c]=[11,22,33]
    console.log(a,b,c)//11 22 33

    var [a, ,b] = [1, 2, 3, 4, 5];
    console.log(a); // => 1
    console.log(b); // => 3

對象promise

var{name,age}={name:"張三",age:"20"}
    console.log(name,age)//張三 20

解構jsonapp

var jike = {"name":"tom","age":"23","sex":"男"};
    var {name,age,sex}=jike;
    console.log(name,age,sex)//tom 23 男

    function cal(a,b){
        var ret1 = a+b;
        var ret2 = a-b;
        var ret3 = a*b;
        var ret4 = a/b;
        return [ret1,ret2,ret3,ret4]
    }
    var [r1,r2,r3,r4] = cal(10,5);
    console.log(r1,r2,r3,r4)//15 5 50 2

let 和 const

let

無變量提高
有塊級做用域
禁止重複聲明

const

無變量提高
有塊級做用域
禁止重複聲明
禁止重複賦值
必需要附初始值

箭頭函數

特性

共享父級this對象
共享父級arguments
不能當作構造函數（由於箭頭函數沒有本身的this對象）

語法

當箭頭函數入參只有一個時能夠省略入參括號
當入參多餘一個或沒有入參時必須寫括號
當函數體只有一個 return 語句時能夠省略函數體的花括號與 return 關鍵字

this

//before
var obj = {
    arr: [1, 2, 3, 4, 5, 6],
    getMaxPow2: function() {
        var that = this,
            getMax = function() {
                return Math.max.apply({}, that.arr);
            };
        
        return Math.pow(getMax(), 2);
    }
}

//after
var obj = {
    arr: [1, 2, 3, 4, 5, 6],
    getMaxPow2: function() {
        var getMax = () => {
            return Math.max.apply({}, this.arr);
        }

        return Math.pow(getMax(), 2);
    }
}

在箭頭函數中，函數體內部沒有本身的 this，默認在其內部調用 this 的時候，會自動查找其父級上下文的 this 對象（若是父級一樣是箭頭函數，則會按照做用域鏈繼續向上查找）

注意模塊化

有的狀況函數須要本身的this，例如DOM事件綁定時候回調函數，須要使用this操做DOM，這時候只能使用傳統的匿名函數
在嚴格模式下，若是箭頭函數的上層函數均爲箭頭函數，那麼this對象將不可用

arguments

當函數體中有另一個函數，而且該函數爲箭頭函數時，該箭頭函數的函數體中能夠直接訪問父級函數的 arguments 對象。

function getSum() {
    var example = () => {
        return Array
            .prototype
            .reduce
            .call(arguments, (pre, cur) => pre + cur);
    }

    return example();
}
getSum(1, 2, 3); // => 6

因爲箭頭函數自己沒有 arguments 對象，因此若是他的上層函數都是箭頭函數的話，那麼 arguments 對象將不可用。

類與繼承

本質爲對原型鏈的二次包裝
類沒有提高
不能使用字面量定義屬性
動態繼承類的構造方法中super優先於this

/* 類不會被提高 */
let puppy = new Animal('puppy'); // => ReferenceError

class Animal {
    constructor(name) {
        this.name = name;
    }

    sleep() {
        console.log(`The ${this.name} is sleeping...`);
    }

    static type() {
        console.log('This is an Animal class.');
    }
}

let puppy = new Animal('puppy');

puppy.sleep();    // => The puppy is sleeping...

/* 實例化後沒法訪問靜態方法 */
puppy.type();     // => TypeError

Animal.type();    // => This is an Animal class.

/* 實例化前沒法訪問動態方法 */
Animal.sleep();   // => TypeError

/* 類不能重複定義 */
class Animal() {} // => SyntaxError

注意函數

類的定義中有一個特殊的constructor()，該方法名固定，表示該類的構造函數（方法），在類的實例化過程當中會被調用
類中沒法像對象同樣使用 prop: value 或者 prop = value 的形式定義一個類的屬性，咱們只能在類的構造方法或其餘方法中使用 this.prop = value 的形式爲類添加屬性。

類的繼承

class Programmer extends Animal {
    constructor(name) {
        /* 在 super 方法以前 this 不可用 */
        console.log(this); // => ReferenceError
        super(name);
        console.log(this); // Right!
    }
    
    program() {
        console.log("I'm coding...");
    }

    sleep() {
        console.log('Save all files.');
        console.log('Get into bed.');
        super.sleep();
    }
}

let coder = new Programmer('coder');
coder.program(); // => I'm coding...
coder.sleep();   // => Save all files. => Get into bed. => The coder is sleeping.

若是子類有構造方法，那麼在子類構造方法中使用 this 對象以前必須使用 super() 方法運行父類的構造方法以對父類進行初始化。
在子類方法中咱們也可使用 super 對象來調用父類上的方法。如示例代碼中子類的 sleep() 方法：在這裏咱們重寫了父類中的 sleep() 方法，添加了兩條語句，並在方法末尾使用 super 對象調用了父類上的 sleep() 方法。