Object.assign 是 JavaScript 中用于復制對象屬性的方法,其核心作用是將一個或多個源對象的可枚舉屬性復制到目標對象中并返回。1. 基本用法是合并對象,語法為 object.assign(target, …sources),若屬性名重復,后面的源對象屬性會覆蓋前面的;2. 它執(zhí)行的是淺拷貝,并不復制嵌套對象的內(nèi)部結(jié)構(gòu),僅復制引用地址,因此修改副本會影響原對象;3. 常見應(yīng)用場景包括 react 狀態(tài)更新與配置項合并,確保原有對象部分更新而非完全替換;4. 展開運算符(…)是其替代方案之一,行為一致但寫法不同。使用時需特別注意淺拷貝帶來的潛在副作用。
Object.assign 在 JavaScript 中是一個非常實用的對象操作方法,主要用來復制一個或多個源對象的所有可枚舉屬性到目標對象中,并返回修改后的目標對象。它常用于合并對象、淺拷貝等場景。
一、基本用法:合并對象最常見
Object.assign 的基本語法是:
Object.assign(target, ...sources)
- target 是目標對象。
- sources 是一個或多個源對象。
使用時,所有源對象的可枚舉屬性會被復制到目標對象中。如果多個源對象有相同屬性名,后面的會覆蓋前面的。
舉個例子:
const obj1 = { a: 1 }; const obj2 = { b: 2 }; const obj3 = { c: 3 }; const result = Object.assign({}, obj1, obj2, obj3); console.log(result); // { a: 1, b: 2, c: 3 }
這里我們用了一個空對象 {} 作為 target,這樣就不會修改原始對象。
二、淺拷貝不是深拷貝,這點要特別注意
很多人誤以為 Object.assign 能做深拷貝,其實它是淺拷貝。
什么意思呢?比如對象里嵌套了另一個對象:
const original = { name: 'Tom', info: { age: 25, }, }; const copy = Object.assign({}, original); copy.info.age = 30; console.log(original.info.age); // 30
可以看到,雖然我們只改了 copy 的 info.age,original 里的值也被影響了。因為 info 屬性是個引用類型,Object.assign 只復制了這個引用地址,而不是真正把里面的對象也復制一份。
所以:
三、應(yīng)用場景:常用在配置合并、狀態(tài)更新等地方
Object.assign 在實際開發(fā)中很常見,尤其是在 React 狀態(tài)更新、配置項合并這些場景。
比如在 React 中更新 state:
this.setState(prevState => { return { user: Object.assign({}, prevState.user, { name: 'Jerry' }), }; });
這樣就能保證原來的 user 對象不會被完全替換,而是只更新 name 字段。
再比如設(shè)置默認配置:
function init(options) { const defaultConfig = { timeout: 1000, retry: 3, }; const config = Object.assign({}, defaultConfig, options); console.log(config); } init({ retry: 5 }); // { timeout: 1000, retry: 5 }
四、替代方案:展開運算符也能實現(xiàn)類似功能
es6 中的展開運算符(…)也可以合并對象,效果和 Object.assign 類似:
const obj1 = { a: 1 }; const obj2 = { b: 2 }; const merged = { ...obj1, ...obj2 };
不過要注意,它們一樣都是淺拷貝,行為一致,區(qū)別主要是寫法不同。
基本上就這些。Object.assign 不復雜但容易忽略細節(jié),特別是淺拷貝的問題,在處理嵌套對象時一定要多加小心。