js對(duì)象合并的4種方式與數(shù)組合并的4種方式
一、對(duì)象合并
1、拓展運(yùn)算符（...）
ES6入門中是這樣說的:
對(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í)開始都是淺拷貝。
2、Object.assign()
MDN上是這樣寫的：
Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。
用于對(duì)象合并，寫法如下：
let obj = Object.assign({}, obj1, obj2);
console.log(obj); ?// { name: '陳偉停', gender: '男', hobby: '跳舞', nationality: '中國(guó)' }由上面的代碼可以看出，效果與法一相同。
注：第一級(jí)是深拷貝，第二級(jí)開始都是淺拷貝。
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ó)' }由上面的代碼可以看出，效果與法一相同。 類似于直接賦值增加屬性
注：第一級(jí)是深拷貝，第二級(jí)開始都是淺拷貝
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)文章
eclipse如何忽略js文件報(bào)錯(cuò)(附圖)
eclipse中js文件報(bào)錯(cuò)的情況，或許大家早已習(xí)以為常了，那么有什么好的方法可以將其忽略掉呢？如果你也在尋找此問題，那么本文或許可以幫助到你2013-10-10
基于原生JS實(shí)現(xiàn)分頁(yè)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用原生js實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
js中字符串編碼函數(shù)escape()、encodeURI()、encodeURIComponent()區(qū)別詳解
JavaScript中有三個(gè)可以對(duì)字符串編碼的函數(shù)，分別是： escape,encodeURI,encodeURIComponent，相應(yīng)3個(gè)解碼函數(shù)：unescape,decodeURI,decodeURIComponent 。接下來(lái)通過本文給大家介紹三者之家的區(qū)別，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
JS加密插件CryptoJS實(shí)現(xiàn)的Base64加密示例
這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)的Base64加密,結(jié)合實(shí)例形式分析了CryptoJS進(jìn)行base64加密的簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
相信大家都知道圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來(lái)展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等?？梢暬瘓D表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和Web應(yīng)用和項(xiàng)目的可靠性。現(xiàn)在就讓我們大家一起來(lái)學(xué)習(xí)用D3.js來(lái)實(shí)現(xiàn)餅圖的方法，有需要的可以參考借鑒。2016-09-09
javascript幀動(dòng)畫(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇javascript幀動(dòng)畫(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了Bootstrap面板的學(xué)習(xí)使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下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)點(diǎn)和缺，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了js實(shí)現(xiàn)透明度漸變效果的方法,涉及javascript實(shí)現(xiàn)漸變效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04