Object ใน JavaScript, Object Literal

Shorthand Properties

Normal:

let x = 1, y = 2;
let o = {
    x: x,
    y: y
};

ทางลัดใน ES6

let x = 1, y = 2;
let o = { x, y };
o.x + o.y  // => 3

ชื่อ Property ที่มาจากการคำนวณ

ปกติ

const PROPERTY_NAME = "p1";
function computePropertyName() { return "p" + 2; }
let o = {};
o[PROPERTY_NAME] = 1;
o[computePropertyName()] = 2;

ES6

ในเครื่องหมาย [] จะเป็น JavaScript Expression อะไรก็ได้

const PROPERTY_NAME = "p1";
function computePropertyName() { return "p" + 2; }
let p = {
    [PROPERTY_NAME]: 1,
    [computePropertyName()]: 2
};
p.p1 + p.p2 // => 3

ชื่อ Property ที่เป็น Symbol

const extension = Symbol("my extension symbol");
let o = {
    [extension]: { /* extension data stored in this object */ }
};
o[extension].x = 0; // This won't conflict with other properties of o

Spread Operator ES2018 ขึ้นไป

จะแตกเฉพาะ own property เท่านั้น หลีกเลี่ยงการใช้ในลูปเพราะอาจจะทำให้เป็น O(n 2 ) ได้

let position = { x: 0, y: 0 };
let dimensions = { width: 100, height: 75 };
let rect = { ...position, ...dimensions };
rect.x + rect.y + rect.width + rect.height // => 175

Shorthand Methods

ปกติ

let square = {
    area: function() { return this.side * this.side; },
    side: 10
};
square.area() // => 100

ES6

let square = {
    area() { return this.side * this.side; },
    side: 10
};
square.area() // => 100

ใช้ชื่อ method เป็นค่าที่คำนวณมาหรือ symbol

const METHOD_NAME = "m";
const symbol = Symbol();
let weirdMethods = {
    "method With Spaces"(x) { return x + 1; },
    [METHOD_NAME](x) { return x + 2; },
    [symbol](x) { return x + 3; }
};
weirdMethods["method With Spaces"](1)  // => 2
weirdMethods[METHOD_NAME](1)           // => 3
weirdMethods[symbol](1)                // => 4

Property Getters and Setters

let p = {
    // x and y are regular read-write data properties.
    x: 1.0,
    y: 1.0,
    // r is a read-write accessor property with getter and setter.
    // Don't forget to put a comma after accessor methods.
    get r() { return Math.hypot(this.x, this.y); },
    set r(newvalue) {
        let oldvalue = Math.hypot(this.x, this.y);
        let ratio = newvalue/oldvalue;
        this.x *= ratio;
        this.y *= ratio;
    },
    // theta is a read-only accessor property with getter only.
    get theta() { return Math.atan2(this.y, this.x); }
};
p.r     // => Math.SQRT2
p.theta // => Math.PI / 4