javaScript合并對(duì)象的多種方式及知識(shí)擴(kuò)展
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 新增語法，擴(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)文章
JavaScript Event學(xué)習(xí)第二章 Event瀏覽器兼容性
在這一章我將對(duì)重要的事件做一個(gè)概述，包括一些流行的瀏覽器的兼容性問題。2010-02-02
下面小編就為大家?guī)硪黄狫avaScript 函數(shù)的執(zhí)行過程。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
JavaScript中string轉(zhuǎn)換成number介紹
這篇文章主要介紹了JavaScript中string轉(zhuǎn)換成number介紹,本文講解了3種將string值轉(zhuǎn)換成number的方法,需要的朋友可以參考下2014-12-12
JS實(shí)現(xiàn)新浪微博效果帶遮罩層的彈出框代碼
這篇文章主要介紹了JS實(shí)現(xiàn)新浪微博效果帶遮罩層的彈出框代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
layer.msg()去掉默認(rèn)時(shí)間,實(shí)現(xiàn)手動(dòng)關(guān)閉的方法
今天小編就為大家分享一篇layer.msg()去掉默認(rèn)時(shí)間,實(shí)現(xiàn)手動(dòng)關(guān)閉的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)簽字功能,本文通過效果圖展示，實(shí)例代碼講解的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
雖然Uniapp可以使用Vue.js自帶的$http,但也可以使用Axios,只需要在項(xiàng)目中進(jìn)行簡(jiǎn)單的配置,這篇文章主要給大家介紹了關(guān)于uniapp引入axios異步框架的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas實(shí)現(xiàn)簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
JavaScript switch語句使用方法簡(jiǎn)介
這篇文章主要介紹了JavaScript switch語句使用方法簡(jiǎn)介,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)代碼,原理是綁定數(shù)據(jù)，然后動(dòng)態(tài)的修改數(shù)據(jù)，從而實(shí)現(xiàn)動(dòng)態(tài)樣式的改變而已,需要的朋友可以參考下2017-02-02