[TOC] >[success] # 字面量的寫法優化 ~~~ 1.es6可以將屬性和方法進行簡寫優化 ~~~ >[danger] ##### 屬性簡寫 和對象方法簡寫 * es6簡寫 ~~~ function testEs6(name) { return { // 屬性縮寫 name, // 函數縮寫 sayName() { console.log(this.name) } } } ~~~ * es5 的寫法 ~~~ function testEs5(name) { return { name:name, sayName:function () { console.log(this.name) } } } ~~~ >[danger] ##### 可計算 屬性名 -- key 可以變成變量 ~~~ const lastName = 'last name' person = {} // 中括號中的可以可以放變量 person[lastName] = 'wang' console.log(person[lastName]) // wang console.log(person['last name']) // wang ~~~ * 還可以這么寫 ~~~ const other = 'name' const test = { // 動態 [other]:'wang' } console.log(test) // {name: "wang"} ~~~ >[info] ## 新增屬性 ~~~ 1.Object.is -- 兩個值比較 ~~~ >[danger] ##### Object.is -- 兩個值比較 ~~~ 1.在'es5' 中比較兩值的關系，一般使用'==' 和 '===',但是當我們比較 'NaN'和'NaN' 的時候是false,這讓人很迷惑，Object.is() 接受兩個參數 如果這兩個參數類型相同且具有相同值就會返回true ，大部分的情況 得到的結果和'===' 是一樣的 ~~~ * 非大多數情況 ~~~ console.log(NaN === NaN) // false console.log(+0 === -0) // true console.log(Object.is(NaN, NaN)) // true console.log(Object.is(+0 === -0)) // false ~~~ >[danger] ##### Object.assign() -- 將對象合并 [參考MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) ~~~ 1.'Object.assign()'方法用于將所有'可枚舉屬性'的值從一個或多個源對象復制到目標對象。 它將返回目標對象。 2.第一個參數是目標參數，往后的參數都是合并參數，會將合并參數整合到目標參數中， 最終返回目標參數，也就是目標參數 和 返回參數其實是一個參數 ~~~ * es5 如果想將兩個對象合并 ~~~ 1.這種方式不能賦值訪問器屬性'getter' 和'setter' ~~~ ~~~ function mixin(receiver, supplier) { Object.keys(supplier).forEach(key =>{ receiver[key] = supplier[key] }) return receiver } const receiver = {} const supplier = {age:17,name:'wang'} const newReceiver = mixin(receiver, supplier) console.log(newReceiver) console.log(receiver) ~~~ * 如果合并是原型鏈 ~~~ function Test() {} Test.prototype = { constructor:Test, emit:function () { console.log('emit') } } const newTest = mixin({},Test.prototype) console.log(newTest) // 這時候 newTest構造函數指向是Test newTest.emit() // 因此新合并的目標對象可以調用Test 的 emit 方法 ~~~ * es6 中的Object.assign() ~~~ 1.可以接受任意參數的源對象如果目標對象和源對象，擁有相同的屬性名， 那么最后以靠后的源對象的屬性值參數為準 2不能直接將訪問屬性參數直接賦值到目標對象，但可以將值拿到以后，將這 個值復制過去 ~~~ * 來一個有意思的小例子 ~~~ 1.使用場景當后臺接口數據返回，快速實例化對象 ~~~ ~~~ const a = { name: 'wang', age: 18, aObj: { city: 'dl' } } class Test { constructor(obj) { Object.assign(this, obj) } isunderAge() { if (this.age <= 18) { return true } return false } get info() { return `${this.name}_${this.age}` } } const test = new Test(a) test.aObj.city = 'z' console.log(test.age) console.log(test.info) console.log(test.aObj.city) console.log(a.aObj.city) console.log(test.info) ~~~ * 可以簡單的復制一個對象 ~~~ function func (obj) { // obj.name = 'func obj' // console.log(obj) const funcObj = Object.assign({}, obj) funcObj.name = 'func obj' console.log(funcObj) } const obj = { name: 'global obj' } func(obj) console.log(obj) ~~~ [具體使用場景見阮一峰老師文章](http://es6.ruanyifeng.com/#docs/object-methods#Object-assign) （1）為對象添加屬性 （2）為對象添加方法 （3）克隆對象 （4）合并多個對象 （5）為屬性指定默認值