瞎說系列之Object.assign入門

前言

過去的一個多月新接手了一個公司的老項目，在實現(xiàn)新需求的同時還需要對有些地方進行重構(gòu)，故而導(dǎo)致了沒時間更新文章。最近趁著周末更新一篇關(guān)于Object.assign使用的文章。

簡介

Object.assign()方法用于將所有可枚舉的屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象，它將返回目標(biāo)對象。這里有兩點需要注意：1、該方法復(fù)制的是可枚舉的屬性的值，不可枚舉的屬性不會處理。2、它返回的是一個對象。

語法

Object.assign(target,...sources) 復(fù)制代碼

基本用法

合并對象

const target = { a: 1 } const source1 = { b: 2 } const source2 = { c: 3 } Object.assign(target, source1, source2) console.log(target) // {a: 1, b: 2, c: 3} 復(fù)制代碼

注意：如果目標(biāo)對象與源對象的屬性具有相同的鍵，或者多個源對象的屬性具有相同的鍵，則后面對象的屬性會覆蓋前面對象的屬性。

const target = { a: 1, b: 1 } const source1 = { b: 2, c: 2 } const source2 = { c: 3 } Object.assign(target, source1, source2) console.log(target) // {a: 1, b: 2, c: 3} 復(fù)制代碼

如果只傳入了一個參數(shù)，則該方法會直接返回該參數(shù)。

const target = { a: 1 } Object.assign(target) console.log(target) // {a: 1} console.log(Object.assign(target) === target) // true 復(fù)制代碼

如果傳入的參數(shù)不是對象，原始類型會被包裝為對象。

const target = Object.assign(1) console.log(target) // Number?{1} typeof target // "object" 復(fù)制代碼

null和undefined無法被轉(zhuǎn)為對象，所以如果把它們兩個作為目標(biāo)對象則會報錯。

const target = Object.assign(null) const tar = Object.assign(undefined) // Cannot convert undefined or null to object 復(fù)制代碼

如果null和undefined作為源對象，則不會報錯，因為基本數(shù)據(jù)類型被包裝，null和undefined會被忽略。

const target = Object.assign({a:1}, null) const tar = Object.assign({a:1}, undefined) // {a:1} const target1 = Object.assign(1, null) // Number?{1} 復(fù)制代碼

如果null和undefined作為源對象中的屬性值，則它們不會被忽略

const target = Object.assign({ a: 1 }, { b: null }, { c: undefined }) console.log(target) // {a: 1, b: null, c: undefined} 復(fù)制代碼

拷貝

復(fù)制一個對象

const target = Object.assign({}, { a: 1 }) console.log(target) // {a: 1} 復(fù)制代碼

拷貝symbol類型的屬性

const target = Object.assign({}, { a: 1 }, { [Symbol('foo')]: 2 }) console.log(target) // {a: 1, Symbol(foo): 2} 復(fù)制代碼

拷貝的屬性是有限制的，繼承屬性和不可枚舉屬性無法被拷貝。

const obj = Object.defineProperty({}, 'a', {enumerable: false,value: 1 }) console.log(obj) // {a: 1} const target = Object.assign({b: 2}, obj) console.log(target) // {b: 2} 復(fù)制代碼

現(xiàn)在把a屬性變成可枚舉的屬性。

const obj = Object.defineProperty({}, 'a', {enumerable: true,value: 1 }) console.log(obj) // {a: 1} const target = Object.assign({b: 2}, obj) console.log(target) // {b: 2, a: 1} 復(fù)制代碼

接下來再看看基本數(shù)據(jù)類型的可枚舉性。

注意：首先基本數(shù)據(jù)類型會被包裝成對象，null和undefined會被忽略。其次只有字符串的包裝對象才可能有自身可枚舉屬性。

const v1 = "abc" const v2 = true const v3 = 10 const v4 = Symbol("foo") const target = Object.assign({}, v1, null, v2, undefined, v3, v4) console.log(target) // {0: "a", 1: "b", 2: "c"} 復(fù)制代碼

拷貝一個數(shù)組。該方法會把數(shù)組視為對象，同時在拷貝的時候通過位置來進行覆蓋。

const target = Object.assign([1,2,3],[4,5]) console.log(target) // [4, 5, 3] 復(fù)制代碼

深淺拷貝

Object.assgin()實現(xiàn)的是淺拷貝。如果源對象中的某個屬性的值也是對象，那么目標(biāo)對象拷貝得到的是這個對象的引用，一旦這個對象發(fā)生改變，那么拷貝后的目標(biāo)對象也做相應(yīng)的改變。

let obj1 = { a: 0 , b: { c: 0}} let obj2 = Object.assign({}, obj1) console.log(JSON.stringify(obj2)) // {"a":0,"b":{"c":0}} obj1.a = 1 console.log(JSON.stringify(obj1)) // {"a":1,"b":{"c":0}} console.log(JSON.stringify(obj2)) // {"a":0,"b":{"c":0}} obj2.a = 2 console.log(JSON.stringify(obj1)) // {"a":1,"b":{"c":0}} console.log(JSON.stringify(obj2)) // {"a":2,"b":{"c":0}} obj1.b.c = 3 console.log(JSON.stringify(obj1)) // {"a":1,"b":{"c":3}} console.log(JSON.stringify(obj2)) // {"a":0,"b":{"c":3}} 復(fù)制代碼

至于深淺拷貝的區(qū)別以及如何實現(xiàn)的問題，會在之后的文章中詳細(xì)說明。

常見用途

為對象添加屬性

class Person {constructor(x, y) {Object.assign(this, {x, y})} } 復(fù)制代碼

為對象添加方法

Object.assign(someClass.prototype, {foo(x, y){....} }) 復(fù)制代碼

合并多個對象

Object.assign(target, ...sources) 復(fù)制代碼

復(fù)制一個對象

const target = Object.assign({}, { a: 1 }) console.log(target) // {a: 1} 復(fù)制代碼

為屬性指定默認(rèn)值

const DEFAULT_VALUE = {name: 'Joe',age: '27' } function foo(options) {return Object.assign({}, DEFAULT_VALUE, options) } 復(fù)制代碼

瀏覽器兼容性

最后

感謝各位能夠耐心的讀完，如有錯誤歡迎指正，讓我們一起進步。后續(xù)的內(nèi)容，敬請期待。

轉(zhuǎn)載于:https://juejin.im/post/5c96f5c45188252d7e34e550

總結(jié)

以上是生活随笔為你收集整理的瞎说系列之Object.assign入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。