ES6入門之對象的新增方法

1. Object.is()

用來解決在ES5中 兩種相等運算符的缺點。用來比較兩個值是否嚴格相等，行爲和（===）基本一致。

在ES5中判斷兩個值是否相等，只能用（==）相等運算符和（===）嚴格相等運算符，可是這兩貨都有缺點，前者 兩邊的值都會轉換數據類型，後者 NaN不等於自身還有 +0 == -0。

Object.is('foo', 'foo')  // true
Object.is({}, {})  // false

// 在 Object.is()

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

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

2. Object.assign()

用於對象的合併，將源對象的全部可枚舉屬性，複製到目標對象，如今經常使用來進行淺拷貝。

const t = {a: 1}
const s1 = {b: 2}
const s2= {c: 3}

Object.assign(t, s2, s2)
// t  {a:1, b:2, c:3}

// 在上面中第一個參數t是目標對象，s1 s2是源對象

注意：若是目標對象和源對象有同名屬性，或者多個同名，那麼在後面的屬性會將前面的覆蓋。

const t = {a: 1, b: 2}
const s1 = {b: 3, c: 4}
const s2 = {c: 5}

Object.assign(t, s1, s2)
t // {a:1, b:3, c:5}

若是Object.assign的參數只有一個，那麼就返回該參數，另外若是該參數不是對象，那麼Object.assign會將其轉爲對象在返回

const t = {a: 2}
Object.assign(t)
t // {a: 2}

Object.assigin(2)
// "object"

另外因爲null 和 undefined 沒法轉換位對象，那麼若是他們做爲第一個參數就會報錯，若是不是在第一個參數則不會有這個問題

Object.assign(undefined)    // 報錯
Object.assign(null)     //報錯

這樣就不會報錯：以下

const t = {a: 2}

Object.assign(t, undefined)     // true
Object.assign(t, null)      // true

其餘（數值，字符串，布爾值）數值再也不第一個也不會報錯，可是字符串會以數組的形式被拷入目標對象，兩外兩個則不會作任何操做。

const a = 'abc'
const b = true
const c = 12

const o = Object.assign({}, a, b, c)
o // {"0": "a", "1": "b", "2": "c"}

// 由於布爾值number 的原始值都在對象的內部屬性[[PrimitiveValue]]
上面，這個屬性不能別Object.assign拷貝

Obeject.assign 拷貝的屬性是有限制的，只能拷貝源對象的自身屬性，也不能拷貝不可枚舉的屬性，另外 Symbol值的屬性也能被拷貝

注意點：

1. 淺拷貝

Object.assign 實現的是淺拷貝，也就是說若是源對象的某個屬性值是對象，那麼目標對象拷貝獲得的是這個對象的引用

2. 同名屬性的替換

若是遇到同名屬性，那Object.assign的處理方法是替換還不是追加

3. 數組的處理

在處理數組的時候，Object.assign是將其是爲對象來處理，若是下標相同則是覆蓋而不是追加

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

4. 取值函數的處理

Object.assign 只能進行值的複製，若是複製的值是一個函數，那麼就等函數求值執行完在進行值的複製

常見用途：

1. 爲對象添加屬性
2. 爲對象添加方法
3. 克隆對象
4. 合併多個對象
5. 爲屬性指定默認值

3. Object.getOwnPropertyDescriptors()

用來返回指定對象全部自身屬性（非繼承屬性）的描述對象

const o = {
    left: 123,
    top() {
        return 'new'
    }
}

Object.getOwnPropertyDescriptors(o)

// {
    left:{
        configurable: true
        enumerable: true
        value: 123
        writable: true
    },
    top: {
        configurable: true
        enumerable: true
        value: ƒ top()
        writable: true
    }
}

Object.getOwnPropertyDescriptors() 返回一個對象，全部原對象的屬性名都是該
對象的屬性名，對應的屬性值就是該屬性的描述對象。

4. __proto__屬性，Object.setPrototypeOf()，Object.getPrototypeOf()

4.1. __proto__屬性

用來讀取或設置當前對象的prototype對象，另外這是一個內部屬性。__proto__是調用的 Object.prototype.__proto__ 方法

//es5 寫法
const o = {
    method: function() {}
}
o.__proto__ = someOtherObj

//es6 寫法
var o = Object.create(someOtherObj)
o.method = function(){}

4.2 Object.setPrototypeOf()

做用和 __proto__相同，用來設置一個對象的prototype對象，返回參數自己

// 格式
Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null)

=== 如下寫法

function setPrototyoeOf(obj, proto) {
    obj.__proto__ = proto
    return obj
}

// 例子
let proto = {}
let o = {
    x: 10
}
Object.setPrototypeOf(o, proto)

proto.y = 20
proto.z = 40

o.x // 10
o.y // 20
o.z // 40

// 上面 將proto設爲 o 對象的原型，因此能夠從o 中讀取proto 的屬性

注意：若是第一參數不是對象，將自動轉換爲對象，因爲返回的仍是第一個參數，因此這個操做不會產生任何效果，另外因爲 undefined 和 null 沒法轉換爲對象，因此第一個參數若是是這兩個則會報錯

Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // true

Object.setPrototypeOf(undefined, {})
// TypeError: Object.setPrototypeOf called on null or undefined

Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined

4.3 Object.getPrototypeOf()

用於讀取一個對象的原型對象和Object.setPrototypeOf 配套使用。全部的特性也和 上面同樣，第一個參數若是不是對象將轉換爲對象，undefined和null 會報錯

5. Object.keys()，Object.values()，Object.entries()

5.1 Object.keys()

用於返回一個數組，成員的參數是對象自身的全部可遍歷屬性的鍵名

let obj = {
    x: 1,
    y: 'b'
}

Object.keys(obj)
// ["x", "y"]

5.2 Object.values()

返回值是一個數組，成員是對象自身的（不含繼承的）全部可遍歷屬性的值。Objet.values只返回對象自身的可遍歷屬性。

let obj = {
    x: 1,
    y: 'b'
}

Object.keys(obj)
// [1, "b"]

另外Object.values遍歷的時候若是遇到屬性名爲數值的屬性，那麼將按照數值大小，從小到大遍歷，以下：

const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]

注意：Object.values 會過濾屬性名爲 Symbol的屬性

Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']

若是Object.values的參數是一個字符串 那麼將返回字符串拆解的數組

Object.values('symbol')
["s", "y", "m", "b", "o", "l"]

注意： 若是Object.values 的參數爲boolean值或者number，那麼返回值是一個空數組，

Object.values(true)
[]
Object.values(2,null)
[]

5.3 Object.entries()

返回一個數組，成員是對象自身（不含繼承的）全部可遍歷屬性的鍵值對數組，一樣 Symbol 屬性的值會被過濾。

const p = { f: 'b', az: 22 };
Object.entries(p)
// [ ["f", "b"], ["az", 22] ]


Object.entries({ [Symbol()]: 456, o: 'c' });
// [ [ 'o', 'c'] ]

Object.entries 能夠用來遍歷對象的屬性

Object.entries 將對象轉爲真正的Map結構

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }

6. Object.fromEntries()

是Object.entries 的逆操做，將一個鍵值對數組轉爲對象。主要是將鍵值對的數據結構還原爲對象，適用於將Map結構轉爲對象

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }

// 例二 將Map結構轉爲對象
const map = new Map().set('foo', true).set('bar', false);
Object.fromEntries(map)
// { foo: true, bar: false }

歡迎關注 公衆號【小夭同窗】

ES6入門系列

ES6入門之let、cont

ES6入門之變量的解構賦值

ES6入門之字符串的擴展

ES6入門之正則的擴展

ES6入門之數值的擴展

ES6入門之函數的擴展

ES6入門之對象的擴展

Git教程

前端Git基礎教程