快捷導(dǎo)航

javaScript合并對(duì)象的多種方式及知識(shí)擴(kuò)展

更新時(shí)間：2023年02月14日 11:31:14 作者：猿小張

眾所周知JavaScript中有多種方法可以合并對(duì)象,下面這篇文章主要給大家介紹了關(guān)于javaScript合并對(duì)象的多種方式及知識(shí)擴(kuò)展,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、方式一：Object.assign(obj1, obj2, …)

參數(shù)1：obj1 是目標(biāo)對(duì)象
參數(shù)2：obj2 是源對(duì)象

注意：對(duì)象與對(duì)象之間，同名屬性，會(huì)被后面對(duì)象的屬性值所覆蓋

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

2、方式二：es6 新增語(yǔ)法，擴(kuò)展運(yùn)算符 … 【三點(diǎn)】

{…obj1, …obj2}
注意：對(duì)象與對(duì)象之間，同名屬性，會(huì)被后面對(duì)象的屬性值所覆蓋

const obj1 = {
	a: 1,
	b: 2,
}
const obj2 = {
	b: 3,
	c: 4,
}
const result = {...obj1, ...obj2}  // 返回一個(gè)新的對(duì)象。
console.log(result) // {a: 1, b: 3, c: 4}

// 順帶一提， 數(shù)組之間的合并，也可以使用 擴(kuò)展運(yùn)算符 .
// 如： [...arr1, ...arr2]

知識(shí)擴(kuò)展：

擴(kuò)展運(yùn)算符 … 【三點(diǎn)】，也可以用于數(shù)組與數(shù)組之間的合并。

不同的是：
數(shù)組之間只會(huì)合并，就算是相同的值，也不會(huì)覆蓋。（這是不同于對(duì)象的地方。）

let arr1 = [1,2,4]
let arr2 = [4,5,6]
let arr3 = [...arr1, ...arr2]
console.log(arr3)  // [1, 2, 4, 4, 5, 6]

最后需要提醒的是，在合并對(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() 等方法。

總結(jié)：

到此這篇關(guān)于javaScript合并對(duì)象的多種方式及知識(shí)擴(kuò)展的文章就介紹到這了,更多相關(guān)js合并對(duì)象方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)的楊輝三角【帕斯卡三角形】算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的楊輝三角【帕斯卡三角形】算法,結(jié)合實(shí)例形式分析了楊輝三角的原理及javascript實(shí)現(xiàn)楊輝三角的相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
ES6 Promise基礎(chǔ)用法(resolve、reject、then、catch,a
Promise是JavaScript中處理異步操作的對(duì)象,它有三種狀態(tài)：Pending、Fulfilled、Rejected,使用new Promise創(chuàng)建Promise對(duì)象,通過(guò)resolve和reject改變狀態(tài),then和catch方法用于處理成功和失敗的結(jié)果,本文介紹ES6 Promise用法,感興趣的朋友一起看看吧
2024-09-09
Javascript實(shí)現(xiàn)一朵從含苞到綻放的玫瑰
今天小編就為大家分享一篇關(guān)于Javascript實(shí)現(xiàn)一朵從含苞到綻放的玫瑰，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-03-03
微信小程序如何實(shí)現(xiàn)五星評(píng)價(jià)功能
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)五星評(píng)價(jià)功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
layer彈出層的關(guān)閉問(wèn)題詳解之在執(zhí)行完畢后關(guān)閉當(dāng)前彈出層
在前端頁(yè)面中用layer打開窗口供用戶輸入或選擇是非常常見(jiàn)的用法,但是有時(shí)為了完成一次操作,需要彈出多個(gè)窗口進(jìn)行選擇、輸入或者提示,因此在關(guān)閉窗口的時(shí)候需要實(shí)現(xiàn)指定關(guān)閉任意窗口,需要的朋友可以參考下
2023-10-10
如何輕松在JavaScript中字符串的字符之間添加空格
在前端開發(fā)的過(guò)程中,我們經(jīng)常會(huì)遇到需要對(duì)于輸入的字符串進(jìn)行格式化處理,下面這篇文章主要給大家介紹了關(guān)于如何輕松在JavaScript中字符串的字符之間添加空格的相關(guān)資料,需要的朋友可以參考下
2023-03-03
JavaScript實(shí)現(xiàn)給定時(shí)間相加天數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)給定時(shí)間相加天數(shù)的方法,涉及JavaScript針對(duì)日期與時(shí)間操作相關(guān)技巧,需要的朋友可以參考下
2016-01-01
JavaScript實(shí)現(xiàn)一個(gè)帶AI的井字棋游戲源碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)一個(gè)帶AI的井字棋游戲源碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-05-05
JS判斷當(dāng)前是否平板安卓并是否支持cordova方法的示例代碼
這篇文章主要介紹了JS判斷當(dāng)前是否平板安卓并是否支持cordova方法,pc和安卓平板共用一套代碼,平板的代碼用了cordova做了一個(gè)殼子嵌套如果用了cordova就不支持elementUI中的上傳功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08
javascript將DOM節(jié)點(diǎn)添加到文檔的方法實(shí)例分析
這篇文章主要介紹了javascript將DOM節(jié)點(diǎn)添加到文檔的方法,對(duì)比分析了javascript的兩種節(jié)點(diǎn)創(chuàng)建的方法,涉及javascript節(jié)點(diǎn)操作及運(yùn)行時(shí)間計(jì)算的相關(guān)技巧,需要的朋友可以參考下
2015-08-08