一、合並對象
解決辦法:Object.assign 方法
Object.assign(form, obj)----->Object.assign(目標對象, 被合並的對象)
<script> let form = {name: 'liming', sex: '男'}; let obj = {class: '一班', age: 15}; console.log('before', form); Object.assign(form, obj); console.log('after', form); </script>
注意
直接拿原有一個對象作為目標對象,合並后,原對象會被改變。例如上面的“form“, 通過最后一句after的打印可以看出,form被改變了,有可能會影響頁面中用到它的地方。所以,如果是兩個對象在其他處還有用,建議聲明一個額外的空對象作為目標對象,這樣不會影響到2個原對象。
二、合並數組
我們在項目過程中,有時候會遇到需要將兩個數組合並成為一個的情況。比如:
var a = [1,2,3]; var b = [4,5,6];
有兩個數組a、b,需求是將兩個數組合並成一個。方法如下:
- 1、concat
js的Array對象提供了一個叫concat()方法,連接兩個或更多的數組,並返回結果。
var c = a.concat(b);//c=[1,2,3,4,5,6];
這里有一個問題,concat方法連接a、b兩個數組后,a、b兩個數組的數據不變,同時會返回一個新的數組。這樣當我們需要進行多次的數組合並時,會造成很大的內存浪費,所以這個方法肯定不是最好的。
-
2、for循環
大概的思路是:遍歷其中一個數組,把該數組中的所有元素依次添加到另外一個數組中。直接上代碼:
for(var i in b){ a.push(b[i]); }
這樣的寫法可以解決第一種方案中對內存的浪費
- 3、apply
函數的apply方法有一個特性,那就是func.apply(obj,argv),argv是一個數組。所以我們可以利用這點,直接上代碼:
a.push.apply(a,b);
調用a.push這個函數實例的apply方法,同時把,b當作參數傳入,這樣a.push這個方法就會遍歷b數組的所有元素,達到合並的效果。
這里可能有點繞,我們可以把b看成[4,5,6],變成這樣:
a.push.apply(a,[4,5,6]);
然后上面的操作就等同於:
a.push(4,5,6);
這樣就很清楚了!
另外,還要注意兩個小問題:
1)以上3種合並方法並沒有考慮過a、b兩個數組誰的長度更小。
所以好的做法是預先判斷a、b兩個數組哪個更大,然后使用大數組合並小數組,這樣就減少了數組元素操作的次數!
2)有時候我們不希望原數組(a、b)改變,這時就只能使用concat了。