合并兩個JavaScript對象的方法有四種，各有優(yōu)劣。1. Object.assign()是es6方法，淺拷貝，同名屬性源對象覆蓋目標對象；2. 擴展運算符(…)語法更簡潔，同樣是淺拷貝，同名屬性后面對象覆蓋前面；3. 手動遍歷復制靈活性高，可控制復制屬性，需遞歸實現(xiàn)深拷貝；4. 第三方庫如lodash提供深拷貝和自定義策略，功能強大但增加依賴。處理屬性沖突時，若需覆蓋用前兩種方法，復雜策略則選后兩種。淺拷貝復制引用，修改嵌套屬性影響原對象，深拷貝創(chuàng)建新對象隔離狀態(tài)，用于如react中state更新。其他方法如JSon.parse(json.stringify(obj))可深拷貝但丟失函數(shù)和symbol屬性。選擇方案應根據(jù)具體需求權(quán)衡優(yōu)缺點。
合并兩個JavaScript對象，簡單來說就是把一個對象的屬性和值復制到另一個對象上。方法有很多，但目標只有一個：更高效、更安全地完成任務。
解決方案
合并對象，最常用的方法大概有四種，各有優(yōu)劣，具體用哪個，還得看你的場景。
1. Object.assign()
這是ES6引入的，用起來最簡單粗暴。直接把源對象的所有可枚舉屬性復制到目標對象。
const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // { a: 1, b: 4, c: 5 } console.log(returnedTarget); // { a: 1, b: 4, c: 5 }
注意，Object.assign()是淺拷貝。如果屬性值是對象，只會復制引用，而不是創(chuàng)建一個新的對象。而且，如果目標對象和源對象有同名屬性，源對象的屬性會覆蓋目標對象的屬性。
2. 擴展運算符 (…)
這也是ES6引入的，語法更簡潔，也更常用。
const obj1 = { a: 1, b: 2 }; const obj2 = { b: 4, c: 5 }; const mergedObj = { ...obj1, ...obj2 }; console.log(mergedObj); // { a: 1, b: 4, c: 5 }
擴展運算符也是淺拷貝，和Object.assign()一樣，同名屬性后面的對象會覆蓋前面的對象。
3. 手動遍歷復制
如果需要更精細的控制，比如只想復制某些屬性，或者需要進行深拷貝，那就得手動遍歷對象屬性，一個一個復制。
function mergeObjects(target, source) { for (let key in source) { if (source.hasOwnProperty(key)) { // 確保只復制自身的屬性 target[key] = source[key]; } } return target; } const obj1 = { a: 1, b: 2 }; const obj2 = { b: 4, c: 5 }; const mergedObj = mergeObjects(obj1, obj2); console.log(mergedObj); // { a: 1, b: 4, c: 5 }
這種方法靈活性最高，但代碼也最繁瑣。如果需要深拷貝，還需要遞歸處理。
4. 使用第三方庫（例如 Lodash）
Lodash 提供了 _.merge() 和 _.assign() 等方法，可以更方便地進行深拷貝和自定義合并策略。
const _ = require('lodash'); const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { b: { d: 3 }, e: 4 }; const mergedObj = _.merge({}, obj1, obj2); // 深拷貝 console.log(mergedObj); // { a: 1, b: { c: 2, d: 3 }, e: 4 }
第三方庫的優(yōu)勢在于功能強大，經(jīng)過充分測試，但引入額外的依賴會增加項目體積。
如何處理合并時出現(xiàn)的屬性沖突？
屬性沖突的處理方式取決于你的需求。如果你希望后面的對象覆蓋前面的對象，那么Object.assign()和擴展運算符就足夠了。如果需要更復雜的沖突解決策略，比如合并數(shù)組、保留原始值等，那么就需要手動遍歷或者使用 Lodash 這樣的庫。
一個實際的例子：假設你要合并兩個配置對象，后面的配置對象優(yōu)先級更高，可以覆蓋前面的配置。
const defaultConfig = { theme: 'light', language: 'en', features: ['a', 'b'] }; const userConfig = { theme: 'dark', features: ['c', 'd'] }; const mergedConfig = { ...defaultConfig, ...userConfig }; console.log(mergedConfig); // { theme: 'dark', language: 'en', features: [ 'c', 'd' ] }
淺拷貝和深拷貝的區(qū)別是什么？什么時候需要深拷貝？
淺拷貝只復制對象的引用，而深拷貝會創(chuàng)建一個新的對象，并將原始對象的所有屬性和值復制到新對象中。
如果對象包含嵌套的對象或數(shù)組，淺拷貝可能會導致問題。修改淺拷貝后的對象的嵌套屬性，會影響到原始對象。
深拷貝的例子：
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = _.cloneDeep(obj1); // 使用 Lodash 進行深拷貝 obj2.b.c = 3; console.log(obj1); // { a: 1, b: { c: 2 } } console.log(obj2); // { a: 1, b: { c: 3 } }
深拷貝通常用于需要隔離對象狀態(tài)的場景，比如在 React 中更新 state 時，為了避免直接修改 state，通常需要深拷貝一份 state 對象。
除了上述方法，還有沒有其他合并對象的方式？
除了上面提到的四種方式，還有一些不太常用的方法，比如使用 JSON.parse(JSON.stringify(obj)) 進行深拷貝，但這會丟失函數(shù)和 Symbol 類型的屬性。
另外，一些庫也提供了自定義的合并方法，可以根據(jù)具體需求選擇。重要的是理解各種方法的優(yōu)缺點，并根據(jù)實際情況選擇最合適的方案。
