深入理解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() 方法處理屬性的順序也隨之改變
自由屬性被列舉順序的基本規則如下:
- 所有數字鍵按升序排序。
- 所有字串鍵按照它們被加入物件的順序排序。
- 所有symbol 鍵 按照它們被加入物件的順序排列
示例
var obj = {
a:1,
0:1,
c:1,
2:1,
b:1,
1:1
};
console.log(Object.getOwnPropertyNames(obj).join(""));//012acb