es6+最佳入門實踐(5)

5.對象擴展

5.1.對象簡寫

在es5中，有這樣一種寫法

var name = "xiaoqiang";
var age = 12;
var obj = {
    name : name,
    age : age
}

在es6中，我們可以簡寫成這樣一種形式

let name = "xiaoqiang";
let age = 12;
let obj = {
    name,
    age
}

以上只是屬性的簡寫，如果有方法應該怎麼寫呢？首先我們來回顧一下es5中的寫法

var obj = {
    show: function(){
        alert(1)
    }
}

在es6中我們可以簡寫成下面的形式

var obj = {
    show(){
        alert(1)
    }
}

5.2.屬性名表達式

屬性名表達式意思就是說在es6中可以把屬性寫成一個表達式的形式，在es5中我們寫屬性名的時候，都是固定不變的

var obj = {
    name: "xiaoqiang",
    age: 19
}
//其中name和age是不變的固定寫法

在es6中，支持屬性名用一個表達式來表示，屬性名可以是一個變量

let a = 'username';
let b = 'age';

let obj = {
    [a]:"admin",
    [b+'1']:19
}
console.log(obj)

5.3.擴展運算符

擴展運算符我們在前面接觸過,用三個點表示(...),ES2018 將這個運算符引入了對象。

let {a,b,...c} = {c:1,b:2,a:3,d:4};
console.log(a, b, c)  //3 2 {c: 1, d: 4}

5.4.Object新增方法

1. Object.is()

這個方法用來比較兩個值是否嚴格相等，與嚴格比較運算符(===)的行爲基本一致

console.log(Object.is('a', 'a'))  //true
console.log(Object.is({},{})) //false

//和（===）不一樣的是 解決NaN不等於自身的問題
console.log(NaN === NaN)  //false
console.log(Object.is(NaN, NaN))

2. Object.assign()

這個方法用來合併對象

let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = {c: 3};
console.log(Object.assign({}, obj1, obj2, obj3)) //{a: 1, b: 2, c: 3}

視頻教程地址：http://edu.nodeing.com/course/50