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