ES6對象的個人總結

屬性初始值的簡寫：

當一個對象的屬性與本地變量同名時，不需要再寫冒號和值，直接寫屬性名即可

let fullName = '楊三', age = 19;

let obj = {
    fullName: fullName,
    age: age
};

// 1. 當一個對象的屬性與本地變量同名時，不需要再寫冒號和值，直接寫屬性名即可。
let obj = {
    fullName,
    age
};

 對象方法的簡寫：

// 在 ES 5 中，如果為對象添加方法，必須要通過指定名稱並完整定義函數來實現。
let obj = {
    fullName: '張三',
    sayName: function () {
        return this.fullName;
    }
};

// 在 ES 6 中，語法更簡潔，取消了冒號和 function 關鍵字。如下所示：
let obj = {
    fullName: '張三',
    sayName () {
        return this.fullName;
    }
};

 可計算的屬性名：

// 在對象字面量中使用方括號表示該屬性名是可計算的，方括號中的內容會被計算求值，最終轉化成一個字符串，該字符串就是最終的屬性名。
let suffix = 'name';

let person = {
    ['first' + suffix]: '張三',
    ['last' + suffix]: '泰坦尼'
};

console.log(person)

 

 新增的兩個方法：

Object.is（）             Object.assgin（）

 1 . 在有些情況下，即是全等運算符比較出來的結果也是不正確的。

　　+0 和 -0 在 JS 解析引擎中被表示為兩個完全不同的實體，而如果使用全等運算符（===）對兩者進行比較，得到的結果是兩者相等 。

console.log(+0 == -0);           // true
console.log(+0 === -0);          // true
console.log(Object.is(+0, -0));  // false

 

 　　NaN 和 NaN 在 JS 解析引擎中被表示為兩個完全相同的實體，但是無論使用等於（==）還是全等於（===），得到的結果都是 false。

console.log(NaN == NaN);           // false
console.log(NaN === NaN);          // false
console.log(Object.is(NaN, NaN));  // true

 

　　在大多數情況下，Object.is（）方法的比較結果與全等運算符完全相同，唯一的區別在於 +0 和 -0 會被識別為不相等，NaN 和 NaN 會被識別為相等。

------------------------------------------------------------------------------------------------------------------------------

 2.  Object,assign（）方法可以接收任意數量的源對象（obj2,obj3），並按照指定的順序將屬性復制到接收對象（obj1）。

如果多個源對象具有同名屬性，則排位靠后的源對象會覆蓋排外靠前的對象。

let obj1 = {
    fullName: '陳世美',
    sayName () {
        return this.fullName;
    }
};

let obj2 = {
    fullName: '武大郎',
    age: 20
};

let obj3 = {
    fullName: '武則天',
    gender: '女'
};

// 通過自定義方法實現了一個可以合並多個對象的方法，
function mixin(receiver, ...suppliers) {
    suppliers.forEach(supplier => {
        Object.keys(supplier).forEach(key => {
            receiver[key] = supplier[key]
        })
    })
    return receiver;
}
console.log(mixin(obj1, obj2, obj3))

// 使用 ES6 新增 Object.assgin() 方法將多個對象的屬性合並到第一個對象中。
Object.assign(obj1, obj2, obj3);

console.log(obj1)
console.log(obj2)
console.log(obj3)

 

 重復的對象字面量屬性：

// 對於每一組重復屬性，都會選取最后一個取值。
let obj = {
    fullName: '張三',
    fullName: '李四',
    age: 18,
    age: 20
};

console.log(obj.fullName);   // '李四'
console.log(obj.age);        // 20

 

 自有屬性枚舉屬性：

ES5 中並沒有定義對象屬性的枚舉順序，有 JavaScript 引擎廠商自行決定。

ES6 中明確規定了對象的自有屬性被枚舉時的返回順序。

自有屬性枚舉順序的基本規則：

　　1. 所有數字按升序

　　2. 所有字符串按照它們被加入對象時順序排序

let obj = {
    a: 1,
    0: 2,
    c: 3,
    2: 4,
    b: 5,
    1: 6
};

console.log(Object.getOwnPropertyNames(obj));  // ["0", "1", "2", "a", "c", "b"]

 

 改變對象的原型：

let person = {
    getGreeting () {
        return 'Hello';
    }
};

let dog = {
    getGreeting () {
        return 'woof';
    }
};

// 使用 create() 方法將 person 對象作為原型對象
let friend = Object.create(person);  // {}
console.log(friend.getGreeting());  // 'Hello'
console.log(Object.getPrototypeOf(friend) === person);  // true

// 使用 setPrototypeOf() 方法將 friend 對象的原型對象修改成 dog
Object.setPrototypeOf(friend, dog);
console.log(friend.getGreeting());  // 'Hello'
console.log(Object.getPrototypeOf(friend) === dog);  // true

 

使用 super 關鍵字訪問原型對象：

let person = {
    getGreeting () {
        return 'Hello';
    }
};

let dog = {
    getGreeting () {
        return 'woof';
    }
};

let friend = {
    getGreeting () {
        return Object.getPrototypeOf(this).getGreeting.call(this) + ', hi';
    }
};

// ES 6 引入了 super 關鍵字，super 指向當前對象的原型對象，實際上也就是 Object.getPrototypeOf(this) 的值，於是，上面的代碼可以簡化成如下形式：
let friend = {
    getGreeting () {
        return super.getGreeting() + ', hi';
    }
};

// 使用 setPrototypeOf() 方法將 friend 對象的原型對象修改成 person
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting());  // 'Hello'
console.log(Object.getPrototypeOf(friend) === person);  // true

// 使用 setPrototypeOf() 方法將 friend 對象的原型對象修改成 dog
Object.setPrototypeOf(friend, dog);
console.log(friend.getGreeting());  // 'Hello'
console.log(Object.getPrototypeOf(friend) === dog);  // true