ES6（六）—— Object

Object

• Object屬性能夠簡寫嗎？

  • 聲明一個object，key和value同樣能夠省略
  • 上面的key必須是字符串，若是key裏面要加動態變量（計算屬性名）
  • 方法的簡寫
  • ES6能夠添加異步函數

• 怎麼把一個對象複製到另外一個對象中？—— Object.assign()

  • 若是source和target有相同屬性
  • 若是target不是對象
  • 如何使用？
  • 解決什麼問題？
  • 有點缺陷？
• 對象擴展方法 —— Object.is()
• ES6-ES10學習版圖

Object屬性能夠簡寫嗎？

聲明一個object，key和value同樣能夠省略

//ES5 聲明一個變量
let x = 1
let y = 3
let obj = {
    x: x,
    y: y
}

//ES6
let obj = {
    x,
    y
}

上面的key必須是字符串，若是key裏面要加動態變量（計算屬性名）

//ES5
let x = 1
let y = 3
let obj = {
    x: x
}
obj[y] = 5
console.log(obj)
//{3: 5, x: 1}

//ES6
let x = 1
let y = 3
let z = 2
let obj = {
    x: x
    [y]: 6,
    [z + y]: 8
}
console.log(obj)
//{3: 6, x: 1, 5: 8}

方法的簡寫

//ES5
let obj = {
    x: 1,
    hello: function () {
        console.log('hello')
    }
}

//ES6
let obj = {
    x: 1,
    hello () { // 簡寫
        console.log('hello')
    }
}
obj.hello()

ES6能夠添加異步函數

let obj = {
    x: 1,
    * hello () { // 等同於function * functionName() {}
        console.log('hello')
    }
}
obj.hello() // （輸出爲空）

怎麼把一個對象複製到另外一個對象中？—— Object.assign()

Object.assign(target, ...sources)<br/>

<br/>
target 是目標對象 必選<br/>
sources 是源對象 非必選<br/>
此方法用域將全部可枚舉屬性的值從一個或多個源對象複製到目標對象，它將返回目標對象 (淺複製) <br/>

若是source和target有相同屬性

若是是0個源對象，則直接返回目標對象，若是對象有相同的屬性，那麼源對象的屬性會覆蓋掉目標對象中的屬性

const source1 = {
  a: 123,
  b: 123
}

const target = {
  a: 456,
  c: 456
}

const result = Object.assign(target, source1)
console.log(target)
// { a: 123, c: 456, b: 123 }
console.log(target === result)
// true

若是target不是對象

若是target不是對象，則自動轉換爲對象

let t = Object.assign(2)
// Number {2}
let s = Object.assign(2, {a: 2})
// Number {2, a: 2}

如何使用？

如何將下面的source對象拷貝到target對象中呢？

const target = {}
const source = {b: 4, c: 5}

// ES5 把souce遍歷一下，把裏面的數據逐個拷貝到target中
// 雖然原理簡單，可是實際操做出來仍是比較麻煩的
// ES6
Object.assign(target, source)
console.log(source, 'source')

解決什麼問題？

拷貝以後，若是要修改裏面name的值，外界也會跟着修改

function func(obj) {
  obj.name = 'func obj'
  console.log(obj) // { name: 'func obj' }
}

const obj = {
  name: 'global obj'
}

func(obj)
console.log(obj) // { name: 'func obj' }

避免這種狀況，使用assign複製到一個新對象上面

function func(obj) {
  const funcObj = Object.assign({}, obj)
  funcObj.name = 'func obj'
  console.log(funcObj)  // { name: 'func obj' }
}

const obj = {
  name: 'global obj'
}

func(obj)
console.log(obj) //   { name: 'global obj' }

有點缺陷？

上面那個方法是有缺陷的:<br/>
當賦值引用類型的值的時候，直接替換地址而無論裏面的值

const target = {
    a: {
        b: {
            c: {
                d: 4
            }
        }
    },
    e: 5,
    f: 6,
    h: 10
}
const source = {
    a: {
        b: {
            c: {
                d: 1
            }
        }
    },
    e: 2,
    f: 3
}
Object.assign(target, source)
console.log(target)
/*
{
    a: {
        b: {
            c: {
                d: 1
            }
        }
    },
    e: 2,
    f: 3
}
*/
// 若是target是空對象或者和source對象嚴格格式相同時進行了替換感受沒啥問題，可是上面的式子能夠看出來，Object.assign進行的是淺拷貝，當複製的是引用類型，那麼會將地址總體進行替換。因此h並無保留。

解決方式 ——> Object.assign + 遞歸

對象擴展方法 —— Object.is()

ES5以前咱們判斷兩個變量相等使用的是==和===，兩個等號在運算的時候，會先轉換數據類型，因此會遇到0 == false爲true的狀況，而三等號除了比較數值，還會比較類型。

可是下面三個等號，也會出現一些狀況，使用is方法能夠獲得正確的結果。不過通常狀況仍是建議使用三個等號。

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

學習版圖