js對象合并的4種方式與數(shù)組合并的4種方式
更新時間：2022年10月13日 12:11:45 作者：燕穗子博客
這篇文章主要介紹了js對象合并的4種方式與數(shù)組合并的4種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
一、對象合并
1、拓展運算符（...）
ES6入門中是這樣說的:
對象的擴展運算符（...）用于取出參數(shù)對象的所有可遍歷屬性，拷貝到當前對象之中。
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() 方法用于將所有可枚舉屬性的值從一個或多個源對象分配到目標對象。它將返回目標對象。
用于對象合并，寫法如下：
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ù)用于將一個或多個對象的內容合并到目標對象。
$.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、關于Apply
使用Apply方法：這個方法是將數(shù)組各項添加到另一個數(shù)組當中，是一種改變原數(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']以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
開發(fā)中常見的組件主要分為公共組件和頁面組件兩種,因此注冊組件的方式也分為兩種全局注冊和局部注冊,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
uni-app使用uni-download和uni.saveFile下載保存文件遇到的問題及解決方法
這篇文章主要給大家介紹了關于uni-app使用uni-download和uni.saveFile下載保存文件遇到的問題及解決方法的相關資料,文中給出了詳細的代碼示例,需要的朋友可以參考下2024-01-01
由于javascript是一種無類型語言,所以一個數(shù)組的元素可以具有任意的數(shù)據(jù)類型,同一個數(shù)組的不同元素 可以具有不同的類型,數(shù)組的元素設置可以包含其他數(shù)組,這樣就可以創(chuàng)建一個復雜的數(shù)組了.2009-12-12
這篇文章主要為大家詳細介紹了小程序實現(xiàn)點擊圖片放大預覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
本篇文章主要介紹了談談第三方App接入微信登錄 解讀 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。2016-12-12
這篇文章主要介紹了javascript實現(xiàn)tab切換特效，實現(xiàn)的方法很簡單，特別適合初學者學習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
我們知道，動畫其實是由一幀一幀的圖像構成的。有Web動畫那么就會存在該動畫在播放運行時的幀率。而幀率在不同設備不同情況下又是不一樣的。有的時候，一些復雜或者重要動畫，需要實時監(jiān)控它們的幀率，從而更好的優(yōu)化它們，本文就是介紹Web動畫幀率（FPS）計算方法。2021-05-05
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)自定義導航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要將為大家介紹一下JavaScript中遞歸與回溯的原理及使用，文中通過一些例題進行了詳細介紹，感興趣的小伙伴可以跟隨小編一起學習一下2022-07-07