js對(duì)象合并的4種方式與數(shù)組合并的4種方式
一、對(duì)象合并
1、拓展運(yùn)算符（...）
ES6入門(mén)中是這樣說(shuō)的:
對(duì)象的擴(kuò)展運(yùn)算符（...）用于取出參數(shù)對(duì)象的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中。
let obj1 = {
? ? name: '陳偉停',
? ? gender: '男',
? ? hobby: '唱歌'
};
let obj2 = {
? ? name: '陳偉停',
? ? gender: '男',
? ? hobby: '跳舞',
? ? nationality: '中國(guó)'
};
?
let obj = {...obj1, ...obj2};
console.log(obj); ?// { name: '陳偉停', gender: '男', hobby: '跳舞', nationality: '中國(guó)' }由上面的代碼可以看出：
- 同名屬性：合并，并且后邊的（obj2）把前邊的（obj1）覆蓋。
- 不同名屬性：屬性值不變，只合并。
注：第一級(jí)是深拷貝，第二級(jí)開(kāi)始都是淺拷貝。
2、Object.assign()
MDN上是這樣寫(xiě)的：
Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。
用于對(duì)象合并，寫(xiě)法如下：
let obj = Object.assign({}, obj1, obj2);
console.log(obj); ?// { name: '陳偉停', gender: '男', hobby: '跳舞', nationality: '中國(guó)' }由上面的代碼可以看出，效果與法一相同。
注：第一級(jí)是深拷貝，第二級(jí)開(kāi)始都是淺拷貝。
3、遞歸賦值
let obj = obj1;
for (var p in obj2){
? ? if(obj2.hasOwnProperty(p))
? ? obj[p] = obj2[p];
}
console.log(obj); ?// { name: '陳偉停', gender: '男', hobby: '跳舞', nationality: '中國(guó)' }由上面的代碼可以看出，效果與法一相同。 類(lèi)似于直接賦值增加屬性
注：第一級(jí)是深拷貝，第二級(jí)開(kāi)始都是淺拷貝
4、jquery中的extend()
jQuery.extend() 函數(shù)用于將一個(gè)或多個(gè)對(duì)象的內(nèi)容合并到目標(biāo)對(duì)象。
$.extend(obj1, obj2) ?// 淺拷貝 $.extend(true, obj1, obj2) ?// 深拷貝
二、數(shù)組合并
1、擴(kuò)展操作符
使用ES6語(yǔ)法的拓展運(yùn)算符：這個(gè)方法也是創(chuàng)建一個(gè)新數(shù)組
var newArray = [...array,...elements] console.log(newArray); // ["a", "b", 0, 1, 2]
2、使用array.concat()方法進(jìn)行合并
使用concat方法：這個(gè)方法不是添加到現(xiàn)有數(shù)組，而是創(chuàng)建并返回一個(gè)新數(shù)組。
var array = ["a", "b"]; var elements = [0, 1, 2]; ? var newArray = array.concat(elements); console.log(array); //['a', 'b'] console.log(newArray);// ["a", "b", 0, 1, 2]
3、關(guān)于Apply
使用Apply方法：這個(gè)方法是將數(shù)組各項(xiàng)添加到另一個(gè)數(shù)組當(dāng)中，是一種改變?cè)瓟?shù)組的方法
var array = ["a", "b"]; var elements = [0, 1, 2]; array.push.apply(array, elements); console.log(array); // ["a", "b", 0, 1, 2]
4、array.push()方法進(jìn)行合并
const heroes = ['Batman'];
?
heroes.push('Superman');
?
heroes; // ['Batman', 'Superman']
const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];
?
heroes.push(...villains);
?
heroes; // ['Batman', 'Superman', 'Joker', 'Bane']以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
開(kāi)發(fā)中常見(jiàn)的組件主要分為公共組件和頁(yè)面組件兩種,因此注冊(cè)組件的方式也分為兩種全局注冊(cè)和局部注冊(cè),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
uni-app使用uni-download和uni.saveFile下載保存文件遇到的問(wèn)題及解決方法
這篇文章主要給大家介紹了關(guān)于uni-app使用uni-download和uni.saveFile下載保存文件遇到的問(wèn)題及解決方法的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-01-01
由于javascript是一種無(wú)類(lèi)型語(yǔ)言,所以一個(gè)數(shù)組的元素可以具有任意的數(shù)據(jù)類(lèi)型,同一個(gè)數(shù)組的不同元素 可以具有不同的類(lèi)型,數(shù)組的元素設(shè)置可以包含其他數(shù)組,這樣就可以創(chuàng)建一個(gè)復(fù)雜的數(shù)組了.2009-12-12
微信小程序?qū)崿F(xiàn)點(diǎn)擊圖片放大預(yù)覽
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)點(diǎn)擊圖片放大預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
本篇文章主要介紹了談?wù)劦谌紸pp接入微信登錄 解讀 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。2016-12-12
javascript實(shí)現(xiàn)tab切換特效
這篇文章主要介紹了javascript實(shí)現(xiàn)tab切換特效，實(shí)現(xiàn)的方法很簡(jiǎn)單，特別適合初學(xué)者學(xué)習(xí)javascript實(shí)現(xiàn)tab切換特效，tab切換再也不是問(wèn)題，需要的朋友可以參考下2015-11-11
js apply/call/caller/callee/bind使用方法與區(qū)別分析
js apply/call/caller/callee/bind使用方法與區(qū)別分析,需要的朋友可以參考下。2009-10-10
我們知道，動(dòng)畫(huà)其實(shí)是由一幀一幀的圖像構(gòu)成的。有Web動(dòng)畫(huà)那么就會(huì)存在該動(dòng)畫(huà)在播放運(yùn)行時(shí)的幀率。而幀率在不同設(shè)備不同情況下又是不一樣的。有的時(shí)候，一些復(fù)雜或者重要?jiǎng)赢?huà)，需要實(shí)時(shí)監(jiān)控它們的幀率，從而更好的優(yōu)化它們，本文就是介紹Web動(dòng)畫(huà)幀率（FPS）計(jì)算方法。2021-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
JavaScript中關(guān)于遞歸與回溯的實(shí)例詳解
這篇文章主要將為大家介紹一下JavaScript中遞歸與回溯的原理及使用，文中通過(guò)一些例題進(jìn)行了詳細(xì)介紹，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07