淺析Object.assign()基本用法(物件合併、同名屬性覆蓋、僅1個引數時直接返回、target不是物件會轉成物件、源物件位置為非物件時不同的處理規則-字串的特殊情況、拷貝的屬性限制)及需要注意的點(淺拷貝、同名屬性替換、陣列的處理-把索引當屬性替換、取值函式先取值再拷貝)和常見應用(給物件新增屬性、合併多個物件、給屬性設定預設值)
一、基本用法
1、Object.assign
方法用於物件的合併,將源物件(source)的所有可列舉屬性,複製到目標物件(target)。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
Object.assign
方法的第一個引數是目標物件,後面的引數都是源物件。
2、注意,如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則後面的屬性會覆蓋前面的屬性。
const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
3、如果只有一個引數,Object.assign
會直接返回該引數。
const obj = {a: 1};
Object.assign(obj) === obj // true
4、如果該引數不是物件,則會先轉成物件,然後返回。
typeof Object.assign(2)
// 'object'
Object.assign(2)
// Number{2}
由於undefined
和null
無法轉成物件,所以如果它們作為引數,就會報錯。
Object.assign(undefined) // 報錯
Object.assign(null) // 報錯
// VM118021:1 Uncaught TypeError: Cannot convert undefined or null to object
// at Function.assign (<anonymous>)
// at <anonymous>:1:8
5、如果非物件引數出現在源物件的位置(即非首引數),那麼處理規則有所不同。
(1)首先,這些引數都會轉成物件,如果無法轉成物件,就會跳過。這意味著,如果undefined
和null
不在首引數,就不會報錯。
let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
(2)其他型別的值(即數值、字串和布林值)不在首引數,也不會報錯。但是,除了字串會以陣列形式,拷貝入目標物件,其他值都不會產生效果。
const v1 = 'abc';
const v2 = true;
const v3 = 10;
const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
上面程式碼中,v1
、v2
、v3
分別是字串、布林值和數值,結果只有字串合入目標物件(以字元陣列的形式),數值和布林值都會被忽略。這是因為只有字串的包裝物件,會產生可列舉屬性。(這個之前不清楚,需要了解一下喲)
Object(true) // {[[PrimitiveValue]]: true}
Object(10) // {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}
上面程式碼中,布林值、數值、字串分別轉成對應的包裝物件,可以看到它們的原始值都在包裝物件的內部屬性 [[PrimitiveValue]]
上面,這個屬性是不會被Object.assign
拷貝的。只有字串的包裝物件,會產生可列舉的實義屬性,那些屬性則會被拷貝。
6、Object.assign
拷貝的屬性是有限制的:
(1)只拷貝源物件的自身屬性(不拷貝繼承屬性),也不拷貝不可列舉的屬性(enumerable: false
)。
Object.assign({b: 'c'},
Object.defineProperty({}, 'invisible', {
enumerable: false,
value: 'hello'
})
)
// { b: 'c' }
上面程式碼中,Object.assign
要拷貝的物件只有一個不可列舉屬性invisible
,這個屬性並沒有被拷貝進去。
(2)屬性名為 Symbol 值的屬性,也會被Object.assign
拷貝。
Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }
二、需要注意的知識點
1、淺拷貝
Object.assign
方法實行的是淺拷貝,而不是深拷貝。也就是說,如果源物件某個屬性的值是物件,那麼目標物件拷貝得到的是這個物件的引用。
const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2
上面程式碼中,源物件obj1
的a
屬性的值是一個物件,Object.assign
拷貝得到的是這個物件的引用。這個物件的任何變化,都會反映到目標物件上面。
2、同名屬性的替換
對於這種巢狀的物件,一旦遇到同名屬性,Object.assign
的處理方法是替換,而不是新增。
const target = { a: { b: 'c', d: 'e' } }
const source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }
上面程式碼中,target
物件的a
屬性被source
物件的a
屬性整個替換掉了(需要格外注意是不是自己想要的)
3、陣列的處理
Object.assign
可以用來處理陣列,但是會把陣列視為物件。
Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]
這種就是把索引當做屬性,然後替換掉了,也需要特別注意下是不是自己想要的
4、取值函式的處理
Object.assign
只能進行值的複製,如果要複製的值是一個取值函式,那麼將求值後再複製。
const source = {
get foo() { return 1 }
};
const target = {};
Object.assign(target, source)
// { foo: 1 }
source
物件的foo
屬性是一個取值函式,Object.assign
不會複製這個取值函式,只會拿到值以後,將這個值複製過去。
三、常見應用場景
1、為物件新增屬性
class Point {
constructor(x, y) {
Object.assign(this, {x, y});
}
}
// 通過Object.assign方法,將x屬性和y屬性新增到Point類的物件例項
2、合併多個物件
(1)將多個物件合併到某個物件。
const merge = (target, ...sources) => Object.assign(target, ...sources);
(2)如果希望合併後返回一個新物件,可以改寫上面函式,對一個空物件合併。
const merge = (...sources) => Object.assign({}, ...sources);
3、為屬性指定預設值
const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
};
function processContent(options) {
options = Object.assign({}, DEFAULTS, options);
// ...
}
上面程式碼中,DEFAULTS
物件是預設值,options
物件是使用者提供的引數。Object.assign
方法將DEFAULTS
和options
合併成一個新物件,如果兩者有同名屬性,則option
的屬性值會覆蓋DEFAULTS
的屬性值。
注意,由於存在淺拷貝的問題,DEFAULTS
物件和options
物件的所有屬性的值,最好都是簡單型別,不要指向另一個物件。否則,DEFAULTS
物件的該屬性很可能不起作用。
還有就是需要注意同名屬性替換的問題。
const DEFAULTS = {
url: {
host: 'example.com',
port: 7070
},
};
processContent({ url: {port: 8000} })
// {
// url: {port: 8000}
// }
上面程式碼的原意是將 url.port
改成 8000,url.host
不變。實際結果卻是options.url
覆蓋掉DEFAULTS.url
,所以url.host
就不存在了。