ES6 -- 進化"實字物件建立法"

ES6如何進化"實字物件建立法"呢?

1. 簡化定義物件屬性的方式

2. 可用表達式計算, 動態產生想要的物件屬性名稱或屬性值

3. 簡化定義物件方法的方式

首先討論第1點:

在ES5時, 當我們想用實字物件建立方法建立某個物件屬性時:

e.g.

var x = 100;

var y = 200;

var obj = {

    x: x,

    y: y

};

console.log(obj);                                            // Object {x: 100, y: 200}

在ES6時,只要這樣寫:

e.g.

var x = 100;

var y = 200;

var obj = {

    x,                                                                       // 只需寫屬性名, 不需寫屬性值

    y                                                                        // 只需寫屬性名, 不需寫屬性值

};

console.log(obj);                                             // Object {x: 100, y: 200}

再者討論第2點:

在ES5時, 當我們想動態產生新的物件屬性時, 會這樣做:

e.g.

var x = 100;

var y = 200;

var obj = {

    x: x,

    y: y

};

obj["x"+x]=x;                                             // 為了讓新增的物件屬性名稱和值能隨原本物件中的x和y的屬性值改變而能動態改變。  在此輸出結果是: obj.x100 = 100;

obj["y"+y]=y;                                            // 為了讓新增的物件屬性名稱和值能隨原本物件中的x和y的屬性值改變而能動態改變。  在此輸出結果是: obj.y200 = 200;

console.log(obj);                                      // Object {x: 100, y: 200, x100: 100, y200: 200}

p.s. 補充: 在JavaScript中有兩種新增物件屬性的方式,

    方式1: obj.x100 = 100;  -->  這種方式是寫死的, 不能動態產生物件屬性

    方式2: obj["x100"] = 100;  --> 這種方式能動態產生物件屬性

因而需要依使用需要選擇適合的方式去新增物件屬性。

在ES6中, 不需要拆開另外寫, 直接寫在原本的物件中:

e.g.

var x = 100;

var y = 200;

var obj = {

    x,

    y,

    ["x"+x]:x,                                           // 直接將想動態新增的屬性名稱&屬性值寫在這裡。在此輸出結果是: obj.x100 = 100;

    ["y"+y]:y                                           // 直接將想動態新增的屬性名稱&屬性值寫在這裡。在此輸出結果是: obj.y200 = 200;

};

console.log(obj);                                // Object {x: 100, y: 200, x100: 100, y200: 200}

最後討論第3點:

在ES5中, 如果我們想用實字物件建立方法建立某個物件方法時:

e.g.

var obj = {

    foo: function(a, b) {                                      // 使用匿名函式作為屬性值, 除非有使用的需要, 才會選擇寫成具名函式

        console.log(a, b);

    },

    bar: function(x, y) {                                       // 使用匿名函式作為屬性值, 除非有使用的需要, 才會選擇寫成具名函式

        console.log(x, y);

    }

};

obj.foo(10,30);                                                    // console.log(a, b) 結果是: 10 30

obj.foo(20,40);                                                    // console.log(a, b) 結果是: 20 40

在ES6中, 可簡化寫成這樣:

e.g.

var obj = {

    foo(a, b) {

        console.log(a, b);

    },

    bar(x, y) {

        console.log(x, y);

    }

};

obj.foo(10,30);                                                     // console.log(a, b) 結果是: 10 30

obj.foo(20,40);                                                     // console.log(a, b) 結果是: 20 40