ES6躬行記(11)——對象
在第5篇中,講解了多個對象字面量的改進,本節將重點介紹兩個新增的靜態方法,以及對象屬性的重復處理和枚舉順序。
一、Object.is()
此方法用於判斷兩個值是否相同,內部實現了SameValue算法,其行為類似於全等(===)比較,但它認為兩個NaN是相等的,而+0和-0卻是不等的。Object.is()和全等的區別如下所示。
NaN === NaN; //false Object.is(NaN, NaN); //true +0 === -0; //true Object.is(+0, -0); //false
二、Object.assign()
此方法可將多個對象合並成一個,它的第一個參數是目標對象,剩余的參數都是源對象,返回值是最終的目標對象,接下來會列舉出此方法的6個特點。
(1)只能拷貝可枚舉的自有屬性(定義在對象中),無法拷貝繼承屬性(定義在對象原型中)和不可枚舉的屬性。以下面的代碼為例,obj2對象中的name是繼承屬性,age是不可枚舉的屬性,只有school是可枚舉的自有屬性,因此只有school屬性拷貝到了空對象中。
var obj1 = { name: "strick" }, obj2 = Object.create(obj1); //name是繼承屬性 obj2.age = 28; //age是不可枚舉的屬性 Object.defineProperty(obj2, "age", { enumerable: false }); obj2.school = "university"; //school是可枚舉的自有屬性 Object.assign({}, obj2); //{school: "university"}
(2)遇到同名的屬性,後面的會覆蓋之前的。例如下面的兩個對象obj1和obj2都包含name屬性,obj1在obj2之前傳到方法中,最終obj1對象的name屬性將被覆蓋掉。
var obj1 = { name: "strick" }, obj2= { name: "freedom" }; Object.assign({}, obj1, obj2); //{name: "freedom"}
(3)Object.assign()執行的是淺拷貝,如果屬性的值是對象,那麽只會拷貝引用該對象的指針。在下面的代碼中,obj1對象的man屬性是一個對象,將其與空對象合並,然後把返回值賦給obj2變量,再修改obj1中的name屬性,由於是淺拷貝,因此obj2中的name屬性也會受影響。
var obj1 = { man: { name: "strick" } }, obj2 = Object.assign({}, obj1); obj1.man.name = "freedom"; console.log(obj2); //{man: {name: "freedom"}}
(4)Symbol類型的屬性也能被拷貝。Symbol是ES6引入的第6種基本類型,可以像字符串那樣作為對象的屬性名,具體如下所示。
var obj1 = { [Symbol("name")]: "strick" }, obj2 = Object.assign({}, obj1); console.log(obj2); //{Symbol(name): "strick"}
(5)當源對象的位置是基本類型的值時,它們會被包裝成對象,再進行合並。但由於undefined和null沒有包裝對象,並且數字和布爾值的包裝對象又沒有可枚舉的屬性,因此只有字符串的包裝對象才能不被忽略,最終以數組的形式拷貝到目標對象中,如下所示。
var obj = Object.assign({}, 1, "a", true, undefined, null); console.log(obj); //{0: "a"}
(6)源對象的訪問器屬性會變成目標對象的數據屬性。如下代碼所示,obj對象包含一個名為name的訪問器屬性,在把它與空對象合並後,目標對象會有一個名為name的數據屬性,其值就是訪問器屬性中get()方法的返回值。
var obj = { get name() { return "strick"; } }; Object.assign({}, obj); //{name: "strick"}
三、重復屬性
在ES5的嚴格模式中,重復的屬性名會引起語法錯誤。但ES6不會再做這個檢查,當出現重復屬性時,排在後面的同名屬性將覆蓋前面的,即屬性值以後面的為準,執行過程如下所示。
var obj = { name: "strick", name: "freedom" }; console.log(obj.name); //"freedom"
四、枚舉順序
ES6規定了自有屬性的枚舉順序,並且會將同一類別的屬性整合到一塊,具體的排列規則如下所列:
(1)首先遍歷數字類型或數字字符串的屬性,按大小升序排列。
(2)接著遍歷字符串類型的屬性,按添加時間的先後順序排列。
(3)最後遍歷符號類型的屬性,也按添加順序排列。
for-in循環、JSON對象的序列化方法stringify()、Object對象的getOwnPropertyNames()、keys()、getOwnPropertySymbols()以及新引入的assign()方法在執行過程中都會遵循這套新的排列規則,具體如下所示。
var obj = { c: 1, 1: 2, a: 3, "0": 4, [Symbol("x")]: 5, [Symbol("y")]: 6 }; var properties = []; for(var key in obj) { if(obj.hasOwnProperty(key)) { //過濾掉繼承屬性 properties.push(key); } } console.log(properties); //["0", "1", "c", "a"] JSON.stringify(obj); //{"0":4,"1":2,"c":1,"a":3} Object.getOwnPropertyNames(obj); //["0", "1", "c", "a"] Object.keys(obj); //["0", "1", "c", "a"] Object.getOwnPropertySymbols(obj); //[Symbol(x), Symbol(y)] Object.assign({}, obj); //{0: 4, 1: 2, c: 1, a: 3, Symbol(x): 5, Symbol(y): 6}
ES6躬行記(11)——對象