摘要：若數(shù)值字符串和布爾值做為待合并數(shù)據(jù)，合并至目標(biāo)目標(biāo)對(duì)象時(shí)，只有字符串會(huì)以數(shù)組形式，拷貝到目標(biāo)對(duì)象。上面代碼中，布爾值數(shù)值字符串分別轉(zhuǎn)成對(duì)應(yīng)的包裝對(duì)象，可以看到它們的原始值都在包裝對(duì)象的內(nèi)部屬性上面，這個(gè)屬性是不會(huì)被拷貝的。

延續(xù)之前的關(guān)于ES6的學(xué)習(xí)內(nèi)容整理，該篇主要是整理ES6中關(guān)于對(duì)象的擴(kuò)展，希望對(duì)大家有幫助。之前已經(jīng)整理了ES6--字符串?dāng)U展和ES6--函數(shù)擴(kuò)展，大家有興趣可以移步了解。

允許直接寫入變量/函數(shù)，作為對(duì)象的屬性/方法。

let str = "Clearlove"
let obj = {str}
obj // { str: "Clearlove" }

// 等同于
let str = "Clearlove"
let obj = { str: str }

作為方法時(shí)的簡寫:

let obj = {
  method() {
    return "Hello~"
  }
}

// 等同于
let obj = {
  method: function() {
    return "Hello~"
  }
}

屬性和方法的簡寫一般作為函數(shù)函數(shù)的返回值， 對(duì)象屬性的賦值器和構(gòu)造器, 以及CommonJS 模塊輸出一組變量，就非常合適使用簡潔寫法。

let Obj = {};

function getItem (key) {
  return key in Obj ? Obj[key] : null;
}

function setItem (key, value) {
  Obj[key] = value;
}

function clear () {
  Obj = {};
}

module.exports = { getItem, setItem, clear }

// 等同于
module.exports = {
  getItem: getItem,
  setItem: setItem,
  clear: clear
}

javascript中定義對(duì)象屬性，最常見的方式如下:

let obj = {}
obj.iseditable = true

ES6中允許用表達(dá)式作為對(duì)象的屬性，將表達(dá)式放在一對(duì)中括號(hào)中，如下：

let key1 = "key1"
let obj = {
  [key1]: "123",
  ["key" + "2"]: "abc"
}

表達(dá)式還可以定義方法名：

let obj = {
  ["say" + "hello"]() {
    return "hello"
  }
}

obj.sayhello() // hello

用于比較兩個(gè)值是否嚴(yán)格相等，與嚴(yán)格比較運(yùn)算符===基本一致

Object.is("Clearlove", "Clearlove") // true
Object.is({}, {}) // false

與嚴(yán)格比較運(yùn)算符===的差異主要有兩點(diǎn)：1. +0不等于-0, 2. NaN等于自身

+0 === -0 //true
NaN === NaN // false

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

ES5可以通過如下方法擴(kuò)展Object.is方法：

Object.defineProperty(Object, "is", {
  value: function(x, y) {
    if (x === y) {
      // 針對(duì)+0 不等于 -0的情況
      return x !== 0 || 1 / x === 1 / y;
    }
    // 針對(duì)NaN的情況
    return x !== x && y !== y;
  },
  configurable: true,
  enumerable: false,
  writable: true
});

Object.assign方法用于對(duì)象合并，將待合并對(duì)象的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象中。

let target = { name: "Clearlvoe" }

let age = { age: 18 }
let sex = { sex: "男" }

Object.assign(target, age, sex)
target // {name: "Clearlvoe", age: 18, sex: "男"}

如果目標(biāo)對(duì)象與待合并對(duì)象有同名屬性，或多個(gè)待合并對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。

如果只有一個(gè)參數(shù)，Object.assign會(huì)直接返回該參數(shù)。

let target = { name: "Clearlvoe" }
Object.assign(target) //  { name: "Clearlvoe" }
Object.assign(target) === target // true

如果該參數(shù)不是對(duì)象，則會(huì)先轉(zhuǎn)成對(duì)象，然后返回。但undefined和null無法轉(zhuǎn)化為對(duì)象，所有以它們?yōu)閰?shù)時(shí)，會(huì)報(bào)錯(cuò)。

typeof Object.assign(2) // "object"

Object.assign(undefined) // Uncaught TypeError: Cannot convert undefined or null to object
Object.assign(null) // Uncaught TypeError: Cannot convert undefined or null to object

但如果undefined或null是作為帶合并數(shù)據(jù)，則不會(huì)報(bào)錯(cuò)，因?yàn)闊o法轉(zhuǎn)化為對(duì)象，所有跳過。

let target = { name: "Clearlvoe" }
Object.assign(target, undefined) === obj // true
Object.assign(target, null) === obj // true

若數(shù)值、字符串和布爾值做為待合并數(shù)據(jù)，合并至目標(biāo)目標(biāo)對(duì)象時(shí)，只有字符串會(huì)以數(shù)組形式，拷貝到目標(biāo)對(duì)象。而數(shù)值和布爾值則會(huì)被忽略。

let str = "abc";
let boolean = true;
var num = 10;

let obj = Object.assign({}, str, boolean, num);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

字符串能被拷貝，是因?yàn)樽址陌b對(duì)象，會(huì)產(chǎn)生可枚舉屬性。

Object(true) // {[[PrimitiveValue]]: true}
Object(10)  //  {[[PrimitiveValue]]: 10}
Object("abc") // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

上面代碼中，布爾值、數(shù)值、字符串分別轉(zhuǎn)成對(duì)應(yīng)的包裝對(duì)象，可以看到它們的原始值都在包裝對(duì)象的內(nèi)部屬性[[PrimitiveValue]]上面，這個(gè)屬性是不會(huì)被Object.assign拷貝的。只有字符串的包裝對(duì)象，會(huì)產(chǎn)生可枚舉的實(shí)義屬性，那些屬性則會(huì)被拷貝。

Object.assign拷貝的屬性是有限制的，只拷貝源對(duì)象的自身屬性（不拷貝繼承屬性），也不拷貝不可枚舉的屬性（enumerable: false）。

Object.assign({name: "Clearlove"},
  Object.defineProperty({}, "invisible", {
    enumerable: false,
    value: "hello"
  })
)
// {name: "Clearlove"}

上面代碼中，Object.assign要拷貝的對(duì)象只有一個(gè)不可枚舉屬性invisible，這個(gè)屬性并沒有被拷貝進(jìn)去。

Object.assign()是淺拷貝，如果源對(duì)象的某個(gè)屬性值是對(duì)象，那么目標(biāo)對(duì)象拷貝到的是這個(gè) 對(duì)象的引用。

let source = {person: { name: "Clearlove"}}
let target = Object.assign({}, source)

source.person.name = "Meiko"
target.person.name  // "Meiko"  

對(duì)于這種嵌套的對(duì)象，一旦遇到同名屬性，Object.assign()的處理方法是替換，而不是添加。

let source = {person: { name: "Clearlove" }}
let target = {person: { name: "Meiko", age: 18 }}
Object.assign(target, source) // {person: { name: "Clearlove" }} 

class LOL {
  constructor(name, age) {
    Object.assign(this, {name, age})
  } 
}

上面方法通過Object.assign方法，將name屬性和age屬性添加到LOL類的對(duì)象實(shí)例。

Object.assign(SomeClass.prototype, {
  addClass(classname) {
    ....
  },
  removeClass(class) {
    ....
  }
})

function clone(origin) {
  return Object.assign({}, origin);
}

上面代碼將原始對(duì)象拷貝到一個(gè)空對(duì)象，就得到了原始對(duì)象的克隆。

不過，采用這種方法克隆，只能克隆原始對(duì)象自身的值，不能克隆它繼承的值。如果想要保持繼承鏈，可以采用下面的代碼。

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin)
  return Object.assign(Object.create(originProto), origin) 
}

將對(duì)個(gè)對(duì)象合并到目標(biāo)對(duì)象中

const merge = (target, ...sources) => Object.assign(target, ...sources)

如果希望合并后返回一個(gè)新對(duì)象，可以改寫上面函數(shù)，對(duì)一個(gè)空對(duì)象合并

const merge = (...sources) => Object.assign({}, ...sources)

const DEAFULT = {
  number: 0,
  template: "html"
}

funcition processContent(options) {
  options = Object.assigin({}, DEAFULT, options)
  console.log(options)
}

注意，由于存在淺拷貝的問題，DEFAULT對(duì)象和options對(duì)象的所有屬性的值，最好都是簡單類型，不要指向另一個(gè)對(duì)象。否則，DEFAULT對(duì)象的該屬性很可能不起作用。

對(duì)象的每個(gè)屬性都有一個(gè)描述對(duì)象(Descriptor)，用來控制該屬性的行為。

let person = { name: "Clearlove" }
Object.getOwnPropertyDescriptor(person, "name")

//  {
//    value: Clearlove,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

描述對(duì)象的enumerable屬性，稱為”可枚舉性“，如果該屬性為false，就表示某些操作會(huì)忽略當(dāng)前屬性。
目前有四個(gè)操作會(huì)忽略enumerable為false的屬性：

for..in循環(huán)： 只遍歷自身和繼承的可枚舉的屬性

Object.keys(): 返回對(duì)象所有可枚舉的屬性的鍵名

JSON.stringify: 只字符串化可枚舉的屬性

Object.assign(): 忽略enumerable為false的屬性，只拷貝可枚舉的屬性

這四個(gè)操作之中，前三個(gè)是 ES5 就有的，最后一個(gè)Object.assign()是 ES6 新增的。其中，只有for...in會(huì)返回繼承的屬性，其他三個(gè)方法都會(huì)忽略繼承的屬性，只處理對(duì)象自身的屬性。實(shí)際上，引入“可枚舉”（enumerable）這個(gè)概念的最初目的，就是讓某些屬性可以規(guī)避掉for...in操作，不然所有內(nèi)部屬性和方法都會(huì)被遍歷到。

比如，對(duì)象原型的toString方法，以及數(shù)組的length屬性，就通過“可枚舉性”，從而避免被for...in遍歷到。

Object.getOwnPropertyDescriptor(Object.prototype, "toString").enumerable
// false

Object.getOwnPropertyDescriptor([], "length").enumerable
// false

上面代碼中，toString和length屬性的enumerable都是false，因此for...in不會(huì)遍歷到這兩個(gè)繼承自原型的屬性。

另外，ES6 規(guī)定，所有 Class 的原型的方法都是不可枚舉的。

Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, "foo").enumerable
// false