1. 程式人生 > >ECMAScript6(ES6)標準之物件Object擴充套件方法及新特性

ECMAScript6(ES6)標準之物件Object擴充套件方法及新特性

ES6對於Object也擴增了幾個方法
不過最重要的是
ES6擴充套件了一些語法
比如說允許直接寫入變數和函式,作為物件的屬性和方法
使我們的物件更加簡潔
下面我就來詳細說明一下

語法擴充套件

簡寫物件屬性

let name = 'payen';
let obj = {
    name,
    age: 19
}
console.log(obj);
//{"name":"payen","age":19}

從這個例子可以看出省略屬性值的屬性
它的值就是變數對應的值

比如說我的函式想要返回一個物件
物件的屬性與引數同名
那麼現在我們就可以這樣寫

let
a = 1, b = 2; function foo(a, b){ return {a, b}; } console.log(foo(a, b)); //{a: 1, b: 2}

這個函式就等價於

function foo(a, b){
    return {a: a, b: b};
}

簡寫物件方法

現在除了屬性可以簡寫,方法也可以簡寫了
看這裡

let person = {
    say(){
        console.log("hello world~");
    }
}
person.say(); //hello world~

沒錯這也可以輸出
它就是下面這種形式的簡寫

let person = {
    say: function(){
        console.log("hello world~");
    }
}

把“:”和“function”去掉就可以了

新增物件屬性

let person = {};

在ES6之前我們要想向物件中新增屬性
我們只能這麼寫,利用識別符號

person.name = 'payen';

但是強大的ES6允許我們使用表示式作為屬性

person['a'+'g'+'e'] = 19;

我們還可以這樣用

let attr1 = 'name',
    attr2 = 'age'
, attr3 = 'sex'; let person = { [attr1]: 'payen', [attr2]: 19, [attr3]: 'male' } console.log(person); //{name: "payen", age: 19, sex: "male"}

使用“[ ]”可以讓變數所代表的值作為物件的屬性

方法擴充套件

同值相等Object.is()

這個靜態方法用於比較兩個值是否嚴格相等
大家可能要問了,嚴格相等使用“===”不就得了
不是的
這個方法是 真·嚴格相等
“===”與“==”都是有缺點的
“==”發生型別轉換大家都知道
而“===”

console.log(NaN === NaN); //false
console.log(+0 === -0); //true

ES6提出了“Same-value equality”(同值相等)演算法
用來解決這個問題
Object.is()就是部署這個演算法的新方法

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

物件合併Object.assign()

這個方法用於合併物件,注意還是淺拷貝

let obj = {
    name1: 'foo'
};
let obj1 = {
    name2: 'bar'
};
let obj2 = {
    name3: 'baz'
};
Object.assign(obj,obj1,obj2);
console.log(obj);
//{name1: "foo", name2: "bar", name3: "baz"}

obj1和obj2中的鍵和值均被拷貝到了obj物件中
當然了,被拷貝的物件內部是不變的
引數沒有限制
第一個引數就是被拷入的物件

還有一點要注意,如果出現了同名屬性
這個方法的處理是覆蓋

let target = {
    name: 'a'
};
let source = {
    name: 'b'
};
Object.assign(target, source);
console.log(target);
//{name: "b"}