快捷導(dǎo)航

JS數(shù)組合并與對象合并的方法匯總

更新時(shí)間：2024年12月29日 09:09:45 作者：碼嘍的自我修養(yǎng)

這篇文章主要給大家介紹了關(guān)于JS數(shù)組合并與對象合并的方法,本文將介紹常見的JS對象合并和數(shù)組合并方法,幫助讀者更好地理解和運(yùn)用這些方法,需要的朋友可以參考下

1 數(shù)組合并

1.1 concat 方法

js的Array對象提供了一個(gè)叫concat()方法，連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。

var a=[1,2,3],b=[4,5,6];
var c=a.concat(b);
console.log(c);// 1,2,3,4,5,6
console.log(a);// 1,2,3  不改變本身

這里有一個(gè)問題，concat方法連接a、b兩個(gè)數(shù)組后，a、b兩個(gè)數(shù)組的數(shù)據(jù)不變，同時(shí)會返回一個(gè)新的數(shù)組。這樣當(dāng)我們需要進(jìn)行多次的數(shù)組合并時(shí)，會造成很大的內(nèi)存浪費(fèi)，所以這個(gè)方法肯定不是最好的。

1.2 循環(huán)遍歷

大概的思路是：遍歷其中一個(gè)數(shù)組，把該數(shù)組中的所有元素依次添加到另外一個(gè)數(shù)組中。直接上代碼：

var a=[0,1];
var b=[2,3,4];
 
for(var i=0;i<b.length;i++){
      a.push(b[i]) 
}
 
console.log(a);//[0,1,2,3,4]

這樣的寫法可以解決第一種方案中對內(nèi)存的浪費(fèi)，但是會有另一個(gè)問題：丑！這么說不是沒有道理，如果能只用一行代碼就搞定，豈不快哉~

1.3 apply

函數(shù)的apply方法有一個(gè)特性，那就是func.apply(obj,argv)，argv是一個(gè)數(shù)組。所以我們可以利用這點(diǎn)，

合并數(shù)組a和數(shù)組b,使用Array.prototype.push.apply(a,b) 或者 a.push.apply(a,b);

// ES5 的寫法
var a = [0, 1, 2];
var b = [3, 4, 5];
Array.prototype.push.apply(a, b);
 
或者
 
a.push.apply(a,b)
 
//console.log(a);//[0,1,2,3,4,5]

a.push.apply(a,b);

　調(diào)用a.push這個(gè)函數(shù)實(shí)例的apply方法，同時(shí)把，b當(dāng)作參數(shù)傳入，這樣a.push這個(gè)方法就會遍歷b數(shù)組的所有元素，達(dá)到合并的效果。

　這里可能有點(diǎn)繞，我們可以把b看成[4,5,6]，變成這樣：

a.push.apply(a,[4,5,6]);

　然后上面的操作就等同于：

a.push(4,5,6);

1.4 ES6寫法——擴(kuò)展運(yùn)算

// ES6 的寫法一
var a = [0, 1, 2];
var b = [3, 4, 5];
a.push(...b);
console.log(a)//[0,1,2,3,4,5]

// ES6 的寫法二
var a = [0, 1, 2];
var b = [3, 4, 5];
var c=[...a, ...b]
console.log(c)//[0,1,2,3,4,5]

1.5 ES6寫法——使用forEach()

var arr1 = [1, 2, 3];
var arr2 = ["a","b","c","d","e","f"];
 
arr1.forEach(item=>{
arr2.push(item)
});
 
console.log(arr2) // [1, 2, 3, "a", "b", "c", "d", "e", "f"]

注意：

1）以上合并方法并沒有考慮過a、b兩個(gè)數(shù)組誰的長度更小。

所以好的做法是預(yù)先判斷a、b兩個(gè)數(shù)組哪個(gè)更大，然后使用大數(shù)組合并小數(shù)組，這樣就減少了數(shù)組元素操作的次數(shù)！

2）有時(shí)候我們不希望原數(shù)組（a、b）改變，這時(shí)就只能使用concat了。

2 對象合并

2.1 $.extend()（淺拷貝）

var obj1= {'a': 1};
var obj2= {'b': 1};
var c = $.extend(obj1, obj2);
console.log(obj1); // {a: 1, b: 1}  obj1已被修改

或者

<br>var obj3 = $.extend({}, obj1, obj2) <br>console.log(obj3); //{a: 1, b: 1} 不會改變obj1,obj2

2.2 遍歷賦值（淺拷貝）

var obj1={'a':1};
var obj2={'b':2,'c':3};
for(var key in obj2){
     if(obj2.hasOwnProperty(key)===true){//此處hasOwnProperty是判斷自有屬性，用 for in 循環(huán)遍歷對象的屬性時(shí)，原型鏈上的所有屬性都將被訪問會避免原型對象擴(kuò)展帶來的干擾
           obj1[key]=obj2[key];
} 
}
 
console.log(obj1);//{'a':1,'b':2,'c':3};

2.3 Obj.assign() （淺拷貝）

可以把任意多個(gè)的源對象自身的可枚舉屬性拷貝給目標(biāo)對象，然后返回目標(biāo)對象。

Object.assign(target, ...sources)

//a. 復(fù)制一個(gè)對象<br>var obj = { a: 1 ,b:2};
var copyObj = Object.assign({}, obj);
console.log(copyObj); // { a: 1,b:2 }<br><br>//b.合并多個(gè)對象
 
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
 
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 且目標(biāo)對象自身也會改變?！?/pre>

2.4 對象的深拷貝和淺拷貝

2.4.1 淺拷貝

var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
 
$.extend(obj1, obj2);   //obj1拷貝了obj2的屬性
 
console.log(obj1)  // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1)  // 22
 
obj2.b.b1=44;   //obj2重新賦值
console.log(obj1.b.b1)  // 44  obj1.b僅拷貝了對象的指引，所以受原obj2的影響

2.4.2 深拷貝

var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
 
$.extend(true,obj1, obj2);   //第一個(gè)參數(shù)設(shè)為true表示深復(fù)制
 
console.log(obj1)  // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1)  // 22
 
obj2.b.b1=44;   //obj2重新賦值
console.log(obj1.b.b1)  // 22 obj1拷貝了obj2的所有屬性以及值，并不受obj2的影響

以上的 $.extend(true,obj1, obj2) 只是深拷貝方法的其中一種，還有其他方法比如JSON序列化、遞歸等。

到此這篇關(guān)于JS數(shù)組合并與對象合并的方法匯總的文章就介紹到這了,更多相關(guān)JS數(shù)組合并與對象合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: