1. 程式人生 > >深入理解ES6 ---物件(object)

深入理解ES6 ---物件(object)

前言

在JavaScript中幾乎每一個值都是某種特定的物件 ,例如數字是屬於Number 型別的物件,字串是String 型別的物件.可見物件在JavaScript中的重要性,而在ES6中著重通過多種方式加強物件的使用,通過簡單的而語法擴充套件,提供更多操作物件及與物件互動的方法.

物件的字面量語法擴充套件

屬性初始化的簡寫

在 ES5以及更早的版本中,物件字面量只是簡單的鍵值對的集合,這意味著初始化屬性值會有一些重複,例如

function createPerson(name,age){
    return {
        name:name,
        age:age
    };
}

這是一個簡單的工廠函式,createPerson建立了一個物件,並且其屬性名稱和函式的引數相同,但是name 和age 重複了兩遍,只是其中一個是物件屬性的名稱,另外一個是為屬性賦值的變數.
在 ES6 中可以使用屬性初始化的簡寫語法,能夠消除這種屬性值與區域性變數之間的重複書寫.
可以改寫為如下:

function createPerson(name,age){
    return {
        name,
        age
    };
}

物件方法的簡寫
ES6中物件不但簡化了物件字面量的簡寫方式,還有物件方法 的簡寫方式
例如:

var person = {
    name:"Joe"
, sayName:function(){ console.log(this.name); } }

可以簡寫為如下:

var person = {
    name:"Joe",
    sayName(){
        console.log(this.name);
    }
}

簡寫消除了分號和function關鍵字.
這種寫法與之前唯一的不同是可以新增super 關鍵字

可計算屬性名

在ES5 中,假設一個物件的屬性名不符合命名規則,可以使用中括號來代替點去讀寫屬性值.

在ES6 中強化了這一點,允許使用計算屬性為物件的屬性名

var person = {},
    lastName = "last name"
; person["first name"] = "Joe"; person[lastName] = "Smith"; console.log(person["first name"]);//Joe console.log(person["last name"]);//Smith var last = "last"; console.log(person[last+" name"]);//Smith

object 新增的方法

Object.is()方法
在JavaScript是弱型別的語言,在判斷兩個值是否相等的時候需要使用 == 或 === 來判斷 ,後者會判斷型別,更受開發者喜愛,從而避免在比較是觸發強制型別轉換(當==比較時,型別不相等的情況下,都會轉化為string型別來比較).
這可以解決大多數問題,但是也不完全準確,例如 +0 和 -0 ,在二進位制表示是正好相反.,但比較結果卻是一致,再比如 NaN (not a number)
和自身比較,就需要使用isNaN() 來判斷.

Object.is()方法,除了這兩點比較的結果和 === 比較的結果有所差異,其它比較都是表現一致.

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

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

Object.assign() 方法
assign 方法是用來在JavaScript中實現物件組合的一種方式
Object.assign 大致等同於

function mixin(receiver, supplier){
    Object.keys(supplier).forEach(function(key){
        receiver[key] = supplier[key];
    });
    return receiver;
}

Object.assign(receiver,supplier,…supplier);第一個引數為接收屬性的物件,後面可以為任意多個引數,如果遇上同名屬性,後者會覆蓋前者。

重複的物件字面量 ,自有屬性列舉順序

在ES5 嚴格模式下 ,物件重複定義重名屬性會有語法錯誤,ES6 嚴格模式改變了這一點,重名屬性後者會覆蓋前者。和ES5 預設模式下保持一致。
自由列舉順序
ES6嚴格規定了物件的自有屬性被列舉時的返回順序,這會影響到Object.getOwnPropertyNames() 方法及 Reflect.ownKeys 返回屬性的方式,Object.assign() 方法處理屬性的順序也隨之改變
自由屬性被列舉順序的基本規則如下:

  1. 所有數字鍵按升序排序。
  2. 所有字串鍵按照它們被加入物件的順序排序。
  3. 所有symbol 鍵 按照它們被加入物件的順序排列

示例

var obj = {
    a:1,
    0:1,
    c:1,
    2:1,
    b:1,
    1:1
};
console.log(Object.getOwnPropertyNames(obj).join(""));//012acb