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ù)用于將一個或多個對象的內(nèi)容合并到目標對象。
$.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ù)組當中，是一種改變原數(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)文章
eclipse中js文件報錯的情況，或許大家早已習以為常了，那么有什么好的方法可以將其忽略掉呢？如果你也在尋找此問題，那么本文或許可以幫助到你2013-10-10
這篇文章主要為大家詳細介紹了如何利用原生js實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
js中字符串編碼函數(shù)escape()、encodeURI()、encodeURIComponent()區(qū)別詳解
JavaScript中有三個可以對字符串編碼的函數(shù)，分別是： escape,encodeURI,encodeURIComponent，相應3個解碼函數(shù)：unescape,decodeURI,decodeURIComponent 。接下來通過本文給大家介紹三者之家的區(qū)別，感興趣的朋友一起學習吧2016-04-04
JS加密插件CryptoJS實現(xiàn)的Base64加密示例
這篇文章主要介紹了JS加密插件CryptoJS實現(xiàn)的Base64加密,結(jié)合實例形式分析了CryptoJS進行base64加密的簡單實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)盒子滾動動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
相信大家都知道圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等。可視化圖表可以幫助開發(fā)者更容易理解復雜的數(shù)據(jù)，提高生產(chǎn)的效率和Web應用和項目的可靠性。現(xiàn)在就讓我們大家一起來學習用D3.js來實現(xiàn)餅圖的方法，有需要的可以參考借鑒。2016-09-09
下面小編就為大家?guī)硪黄猨avascript幀動畫(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了Bootstrap面板的學習使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法，文章圍繞主題展開數(shù)據(jù)結(jié)構(gòu)與算法的概念，以及幾種常見的數(shù)據(jù)結(jié)構(gòu)是什么，有什么優(yōu)點和缺，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了js實現(xiàn)透明度漸變效果的方法,涉及javascript實現(xiàn)漸變效果的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04