欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 對(duì)象合并的幾種方法小結(jié)

 更新時(shí)間:2023年02月17日 09:06:44   作者:憂郁的蛋~  
本文主要介紹了JavaScript 對(duì)象合并的幾種方法小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

JavaScript 中有多種方法可以合并對(duì)象。

1、使用 Object.assign() 方法

它可以將一個(gè)或多個(gè)對(duì)象的屬性復(fù)制到目標(biāo)對(duì)象中。例如:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { a: 1, b: 3, c: 4 }

這里我們使用空對(duì)象({})作為第一個(gè)參數(shù),避免直接修改第一個(gè)對(duì)象。

2、使用解構(gòu)賦值語(yǔ)法

這種方法會(huì)在合并對(duì)象時(shí)保留鍵值相同的對(duì)象的屬性,例如:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 3, c: 4 }

這里使用了擴(kuò)展運(yùn)算符,可以將一個(gè)對(duì)象的屬性解構(gòu)到另一個(gè)對(duì)象中。

3、使用 Lodash 中的 merge() 方法

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = _.merge(obj1, obj2);
console.log(obj3); // { a: 1, b: 3, c: 4 }

4、for-in 循環(huán) + 手動(dòng)賦值

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = {};
for (const key in obj1) {
  obj3[key] = obj1[key];
}
for (const key in obj2) {
  obj3[key] = obj2[key];
}
console.log(obj3); // { a: 1, b: 3, c: 4 }

5、使用 Object.keys() 和 Array.forEach() 方法

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = {};
Object.keys(obj1).forEach(key => {
  obj3[key] = obj1[key];
});
Object.keys(obj2).forEach(key => {
  obj3[key] = obj2[key];
});
console.log(obj3); // { a: 1, b: 3, c: 4 }

最后需要提醒的是,在合并對(duì)象時(shí)如果鍵值相同的對(duì)象屬性類型不同,例如一個(gè)為字符串類型,一個(gè)為數(shù)值類型,會(huì)覆蓋之前的屬性,因此需要根據(jù)項(xiàng)目需求做出相應(yīng)的處理。

此外,如果需要對(duì)合并對(duì)象的屬性進(jìn)行特殊處理,例如合并對(duì)象的屬性值是一個(gè)數(shù)組,需要合并成一個(gè)新數(shù)組,可以使用 Array.concat() 方法。

const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = Object.assign({}, obj1, {
  a: obj1.a.concat(obj2.a)
});
console.log(obj3); // { a: [1, 2, 3, 4] }

或者使用擴(kuò)展運(yùn)算符

const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = {...obj1, a: [...obj1.a, ...obj2.a]}
console.log(obj3); // { a: [1, 2, 3, 4] }

此外,如果需要對(duì)合并對(duì)象的屬性值進(jìn)行進(jìn)一步的處理,如去重、排序等,可以使用 Array.filter()、Array.sort() 等方法。

到此這篇關(guān)于JavaScript 對(duì)象合并的幾種方法小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript 對(duì)象合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • js獲取修改title與jQuery獲取修改title的方法

    js獲取修改title與jQuery獲取修改title的方法

    這篇文章主要介紹了js獲取修改title與jQuery獲取修改title的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-02-02
  • 原生js實(shí)現(xiàn)2048小游戲

    原生js實(shí)現(xiàn)2048小游戲

    這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)2048小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-03-03
  • JavaScript中 創(chuàng)建動(dòng)態(tài) QML 對(duì)象的方法

    JavaScript中 創(chuàng)建動(dòng)態(tài) QML 對(duì)象的方法

    這篇文章主要介紹了 JavaScript中 創(chuàng)建動(dòng)態(tài) QML 對(duì)象,下面文章主要分析了兩中方法,分別是從 QML 字符串創(chuàng)建對(duì)象和動(dòng)態(tài)創(chuàng)建組件以及刪除對(duì)象等方法,具有有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2021-12-12
  • 奇偶行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類

    奇偶行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類

    奇或偶數(shù)行高亮顯示及鼠標(biāo)莫過(guò)高亮顯示,一個(gè)經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒(méi)有一個(gè)封裝成類直接用的.想象自己當(dāng)初谷歌這個(gè)類時(shí),還真沒(méi)少折騰時(shí)間.
    2010-07-07
  • JavaScript內(nèi)存管理與閉包實(shí)例詳解

    JavaScript內(nèi)存管理與閉包實(shí)例詳解

    不管什么樣的編程語(yǔ)言,在代碼的執(zhí)行過(guò)程中都是需要給它分配內(nèi)存的,下面這篇文章主要給大家介紹了關(guān)于JavaScript內(nèi)存管理與閉包的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • JS中for...in?和?for...of?的區(qū)別解析

    JS中for...in?和?for...of?的區(qū)別解析

    for?…?in?用于迭代對(duì)象的可枚舉字符串屬性,包括自身屬性和繼承的屬性,但不會(huì)遍歷對(duì)象的原型鏈上的?非可枚舉屬性,以及對(duì)象的方法,這篇文章主要介紹了JS中for...in?和?for...of?的區(qū)別,需要的朋友可以參考下
    2024-03-03
  • JS實(shí)現(xiàn)圖片輪播效果實(shí)例詳解【可自動(dòng)和手動(dòng)】

    JS實(shí)現(xiàn)圖片輪播效果實(shí)例詳解【可自動(dòng)和手動(dòng)】

    這篇文章主要介紹了JS實(shí)現(xiàn)圖片輪播效果,結(jié)合完整實(shí)例形式分析了javascript可自動(dòng)和手動(dòng)輪播圖的原理、布局與輪播功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-04-04
  • IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]

    IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]

    長(zhǎng)久以來(lái)JavaScript兼容性一直是Web開發(fā)者的一個(gè)主要問(wèn)題。在正式規(guī)范、事實(shí)標(biāo)準(zhǔn)以及各種實(shí)現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬
    2011-10-10
  • uni-app的h5頁(yè)面中onHide/onUnload方法不觸發(fā)的問(wèn)題解決方法

    uni-app的h5頁(yè)面中onHide/onUnload方法不觸發(fā)的問(wèn)題解決方法

    uni-app的頁(yè)面的生命周期包括onInit、onLoad、onShow、onReady、onHide和onUnload等幾個(gè)階段,這篇文章主要給大家介紹了關(guān)于uni-app的h5頁(yè)面中onHide/onUnload方法不觸發(fā)的問(wèn)題解決方法,需要的朋友可以參考下
    2023-12-12
  • Bootstrap簡(jiǎn)單實(shí)用的表單驗(yàn)證插件BootstrapValidator用法實(shí)例詳解

    Bootstrap簡(jiǎn)單實(shí)用的表單驗(yàn)證插件BootstrapValidator用法實(shí)例詳解

    這篇文章主要介紹了Bootstrap簡(jiǎn)單實(shí)用的表單驗(yàn)證插件BootstrapValidator用法,結(jié)合實(shí)例形式詳細(xì)分析了Bootstrap表單驗(yàn)證插件BootstrapValidator基本功能、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
    2020-03-03

最新評(píng)論