JavaScript中合并Object的三種基本方法小結(jié)
在開發(fā)過程中，我們經(jīng)常會(huì)遇到合并對(duì)象的需求，今天我們就來了解一下合并對(duì)象的幾種基本方法。
Object.assign()
Object.assign() 方法可以將一個(gè)或多個(gè)源對(duì)象的屬性復(fù)制到目標(biāo)對(duì)象中。如果源對(duì)象有自己的屬性，那么它們的值將被保留。
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }Object.assign() 是淺拷貝，如果源對(duì)象中有值的引用，合并后在目標(biāo)對(duì)象中修改值引用，同時(shí)會(huì)修改源對(duì)象的值引用。
const o1 = { a: 1 };
const o2 = { b: {
name: "b"
} };
const obj = Object.assign({}, o1, o2);
obj.b.name = "new_b";
console.log(o2.b); // {name: 'new_b'}解構(gòu)賦值
使用解構(gòu)賦值可以將對(duì)象的屬性復(fù)制到一個(gè)新的對(duì)象中。
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const obj = { ...o1, ...o2 };
console.log(obj); // {a: 1, b: 2, c: 2}可以看出，使用結(jié)構(gòu)賦值合并對(duì)象時(shí)，后面對(duì)象的屬性值會(huì)覆蓋前面已有屬性值。
使用遞歸方法
我們可以通過遞歸的方法將對(duì)象中的嵌套對(duì)象合并到一個(gè)新的對(duì)象中。
/** @format */
function mergeObjects(obj1, obj2) {
const mergedObj = Object.assign({}, obj1, obj2);
// 遞歸處理嵌套對(duì)象
Object.keys(mergedObj).forEach((key) => {
if (typeof mergedObj[key] === "object" && obj1[key] && obj2[key]) {
mergedObj[key] = mergeObjects(obj1[key], obj2[key]);
}
});
return mergedObj;
}
const obj1 = { a: 1, b: { c: 2, d: 3, e: { name: "e" } } };
const obj2 = { a: 2, b: { c: 3, d: 4, e: { age: 18 } } };
const mergedObj = mergeObjects(obj1, obj2);
console.log(mergedObj);
// {a:2,b:{c:3,d:4,e:{name:e,age:18}}}總結(jié)
以上介紹的是合并對(duì)象的三種基本操作，它們也只是簡(jiǎn)化了合并對(duì)象的步驟，在具體使用的時(shí)候，需要根據(jù)場(chǎng)景判斷哪種最合適。
到此這篇關(guān)于JavaScript中合并Object的基本方法小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript Object合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用JS定時(shí)器實(shí)現(xiàn)元素移動(dòng)
這篇文章主要為大家詳細(xì)介紹了利用JS定時(shí)器實(shí)現(xiàn)元素移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼
這篇文章主要介紹了Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
popdiv...2006-07-07
QuaggaJS是一個(gè)功能強(qiáng)大的條形碼識(shí)別庫(kù),適合需要在瀏覽器中實(shí)現(xiàn)條形碼和二維碼掃描功能的應(yīng)用場(chǎng)景,尤其是需要支持多種條形碼格式的情況,本文給大家介紹QuaggaJS用法,感興趣的朋友一起看看吧2025-06-06
這篇文章主要為大家詳細(xì)介紹了js自定義Tab選項(xiàng)卡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript報(bào)錯(cuò)：Uncaught ReferenceError: XYZ is&
在 JavaScript 編程中,“Uncaught ReferenceError: XYZ is not defined” 是一種常見的錯(cuò)誤,這種錯(cuò)誤通常發(fā)生在試圖使用一個(gè)未聲明的變量或標(biāo)識(shí)符時(shí),故本文給大家介紹了JavaScript報(bào)錯(cuò)：Uncaught ReferenceError: XYZ is not defined的解決方法,需要的朋友可以參考下2024-07-07
JS禁止瀏覽器右鍵查看元素或按F12審查元素自動(dòng)關(guān)閉頁(yè)面示例代碼
這篇文章主要給大家介紹了關(guān)于利用Javascript如何禁止瀏覽器右鍵查看元素，或者通過按F12審查元素，觸犯這兩個(gè)條件會(huì)自動(dòng)并關(guān)閉頁(yè)面的相關(guān)資料，通過設(shè)置這個(gè)可以防止別人扒下自己的網(wǎng)頁(yè)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
JavaScript中Textarea滾動(dòng)條不能拖動(dòng)的解決方法
這篇文章主要介紹了JavaScript中Textarea滾動(dòng)條不能拖動(dòng)的解決方法,主要針對(duì)IE瀏覽器中Textarea滾動(dòng)條綁定了onfocus事件時(shí)分析對(duì)應(yīng)的處理方法,需要的朋友可以參考下2015-12-12
關(guān)于js布爾型、null和undefined以及類型檢測(cè)舉例詳解
這篇文章主要介紹了關(guān)于js布爾型、null和undefined以及類型檢測(cè)的相關(guān)資料,涵蓋隱式轉(zhuǎn)換、相等比較及常用檢測(cè)技巧,幫助避免開發(fā)中的常見錯(cuò)誤,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-05-05
分享一個(gè)原生的JavaScript拖動(dòng)方法
本文給大家分享的是基于JavaScript的setCapture方法實(shí)現(xiàn)的拖動(dòng)效果，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下2016-09-09