javascript對(duì)象的多種合并方式詳解
對(duì)象合并的多種方式（對(duì)于通過(guò)接口獲取數(shù)據(jù)之后賦值給本地對(duì)象的時(shí)候極其有用）
第一種：手動(dòng)賦值(很撈)
const obj1 = {
name: "zs",
age: 13,
};
const obj2 = {
name: "ls",
sex: "女",
};
obj1.name = obj2.name;
obj1.sex = obj2.sex;
這種方法時(shí)最簡(jiǎn)單的，但是日常項(xiàng)目中一個(gè)對(duì)象的屬性是非常多的，如果還是用這種方法的話就會(huì)有點(diǎn)繁瑣了
第二種：擴(kuò)展運(yùn)算符
const obj1 = {
name: "zs",
age: 13,
};
const obj2 = {
name: "ls",
sex: "女",
};
const newObj = { ...obj1, ...obj2 };
console.log(newObj === obj1); //false
console.log(newObj === obj2); //false
通過(guò)擴(kuò)展運(yùn)算符的特性可以快速的進(jìn)行對(duì)象的合并，缺點(diǎn)就是需要用一個(gè)新的變量來(lái)接收
第三種：Object.assign() (最推薦)
const obj1 = {
name: "zs",
age: 13,
};
const obj2 = {
name: "ls",
sex: "女",
};
const newObj = Object.assign(obj1, obj2);
console.log(newObj === obj1); //true
console.log(newObj === obj2); //false
console.log(newObj);
// {
// name:'ls',
// age:13,
// sex:'女'
// }
Object.assign()方法可以接收一個(gè)目標(biāo)對(duì)象和一個(gè)或者多個(gè)源對(duì)象作為參數(shù)，如果對(duì)象中有一樣的屬性，后面對(duì)象的屬性會(huì)覆蓋掉前面對(duì)象的那個(gè)屬性。
其原理是將后面的對(duì)象通過(guò) set 訪問(wèn)屬性來(lái)添加進(jìn)目標(biāo)對(duì)象，所以最后返回的值其實(shí)就是第一個(gè)目對(duì)象，可以在目標(biāo)對(duì)象上添加訪問(wèn)屬性來(lái)見(jiàn)識(shí)覆蓋過(guò)程
const obj1 = {
set a(val) {
console.log(val);
},
};
Object.assign(obj1, { a: "tom" }, { a: "jerry" }, { a: "dog" });
//'tom'
//'jerry'
//'dog'
這個(gè)方法的使用場(chǎng)景有很多，都特別好用，例如：
1.vue 項(xiàng)目清空表單
日常有些同學(xué)清空表單可能會(huì)給 form 里面的數(shù)據(jù)一個(gè)一個(gè)的賦空值來(lái)進(jìn)行表單的清空操作，其實(shí)效率是非常低的,但是如果使用 Object.assign()和$options 配合的話，效率就很高
// 日常 this.ruleForm.name=''; this.ruleForm.phone=''; this.ruleForm.imgUrl=''; this.ruleForm.des=''; ...此處省略一萬(wàn)字 // 使用Object.assign和$options Object.assign(this.ruleForm,this.$options.data)
Tips： $options 存儲(chǔ)的是 Vue 實(shí)例的初始值，所以通過(guò) Object.assign()覆蓋值的特性，可以快速的做到重置表單，同理，如果是在進(jìn)行表單數(shù)據(jù)修改的時(shí)候也能對(duì)頁(yè)面的 ruleForm 進(jìn)行快速的賦值
const { data } = await xxxApi.getList();
Object.assign(this.ruleForm, data);
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
查看QQ是否在線狀態(tài)的網(wǎng)頁(yè)代碼
這個(gè)其實(shí)就是利用qq官方提供的東西，簡(jiǎn)單的通過(guò)圖片來(lái)測(cè)試是否在線，隱身也是不在線狀態(tài)。純粹學(xué)習(xí)使用。2010-04-04
這篇文章介紹了js 表單提交后按鈕變灰的實(shí)例代碼，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了TypeScript 類型編程之索引類型遞歸去掉可選修飾，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
如何使用wheelnav.js構(gòu)建酷炫的動(dòng)態(tài)導(dǎo)航菜單
本文主要介紹一種基于SVG的web動(dòng)態(tài)導(dǎo)航組件,通過(guò)這個(gè)組件可以實(shí)現(xiàn)很多豐富酷炫的效果,首先介紹這款wheelnav.js的相關(guān)知識(shí),然后結(jié)合代碼講解如何在html頁(yè)面中創(chuàng)建其對(duì)象,接著講解wheelnav的一些屬性和方法,最后給出基于wheelnav的實(shí)際成果,喜歡的朋友一起學(xué)習(xí)吧2024-06-06
chrome監(jiān)聽(tīng)cookie變化與賦值問(wèn)題
這篇文章主要介紹了chrome監(jiān)聽(tīng)cookie變化與賦值問(wèn)題,cookie監(jiān)聽(tīng)與賦值操作需要manifest文件里聲明權(quán)限問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
IE中提供了一個(gè)fireEvent方法大概就是觸發(fā)某個(gè)事件發(fā)生的意思，以為是和onclick()一樣，看來(lái)是我自已為是了,有時(shí)間還要多看看javascript的細(xì)節(jié)啊,廣大網(wǎng)友也是啊2013-02-02
JS實(shí)現(xiàn)設(shè)置ff與ie元素絕對(duì)位置的方法
這篇文章主要介紹了JS實(shí)現(xiàn)設(shè)置ff與ie元素絕對(duì)位置的方法,涉及JavaScript針對(duì)頁(yè)面元素及元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-03-03
微信小程序websocket實(shí)現(xiàn)聊天功能
這篇文章主要為大家詳細(xì)介紹了微信小程序websocket實(shí)現(xiàn)聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了JavaScript的URL對(duì)象是什么，還有各個(gè)屬性的具體實(shí)現(xiàn)方法，對(duì)JS URL感興趣的同學(xué)，可以參考下2021-05-05
如何用js將blob為pcm格式轉(zhuǎn)換為MP3格式
要將PCM文件轉(zhuǎn)換為MP3文件,您可以使用Js實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于如何用js將blob為pcm格式轉(zhuǎn)換為MP3格式的相關(guān)資料,需要的朋友可以參考下2023-11-11