定義和用法

concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組。

該方法不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本。

語(yǔ)法

arrayObject.concat(arrayX,arrayX,......,arrayX)

返回一個(gè)新的數(shù)組。該數(shù)組是通過(guò)把所有 arrayX 參數(shù)添加到 arrayObject 中生成的。如果要進(jìn)行 concat() 操作的參數(shù)是數(shù)組，那么添加的是數(shù)組中的元素，而不是數(shù)組
。

我們有兩個(gè)這樣的數(shù)組

var arr1 = [1,2,3];
var arr2 = [4,5,6];

任務(wù)：合并成這樣，請(qǐng)至少提供兩種思路。

var arr1 = [1,2,3,4,5,6];

思路一：我們可以把第二個(gè)數(shù)組里面的值挨個(gè)添加到第一個(gè)數(shù)組的末尾。

1：數(shù)組怎么添加內(nèi)容 ？[] || push || shift

2：怎么向數(shù)組最后一個(gè)索引添加值？ push || [數(shù)組.length]

3：怎么挨個(gè)向數(shù)組一添加內(nèi)容？ for

4: for循環(huán)多少次？ 你要添加多少就循環(huán)多少次，也就是arr2的長(zhǎng)度

5: 要添加什么內(nèi)容？arr2里面的值，怎么獲取，arr[?]

代碼實(shí)現(xiàn)：

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

問(wèn)題來(lái)了，原生js提供的concat方法不會(huì)修改原數(shù)組(arr1)的內(nèi)容，而是返回一個(gè)新數(shù)組。

分析：既然是要返回值，那我們可以定義一個(gè)函數(shù)，然后再定義一個(gè)變量，這個(gè)變量來(lái)接收我們添加好的值，但是我們會(huì)一個(gè)問(wèn)題，那就是不能在arr1上面push內(nèi)容了，不然還是會(huì)修改原數(shù)組的內(nèi)容。于是我覺(jué)得要把原數(shù)組復(fù)制一份，但是又有一個(gè)問(wèn)題，就是對(duì)象是引用類型，簡(jiǎn)單來(lái)說(shuō)雖然我們可以把數(shù)組1復(fù)制到一個(gè)變量中，但是如果我用push或者[]的形式修改里面的值，或者添加，那么我們的原數(shù)組也會(huì)被修改，（如果你不知道什么是引用類型，可以去看我博客的第一頁(yè)或者在第二頁(yè)）這不是我們想要的結(jié)果，但是我們必須復(fù)制一份arr1。此時(shí)你有什么解決方法？

解決數(shù)組引用問(wèn)題：

for(var i=0;i<arr1.length;i++){
arr3[i] = arr1[i];
}

我的思路是把數(shù)組1的值挨個(gè)的添加到arr3這個(gè)數(shù)組中，此時(shí)的arr3是這樣的

console.log(arr3) //[1, 2, 3]

任務(wù)：在這個(gè)新的數(shù)組arr3中添加arr2的所以值，方法和第一步一樣，如果忘記了回頭看看。

代碼實(shí)現(xiàn)：

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [];
for(var i=0;i<arr1.length;i++){
arr3[i] = arr1[i];
}
for(var i=0;i<arr2.length;i++){
arr3.push(arr2[i]);
}
console.log(arr3);

問(wèn)題：雖然這個(gè)已經(jīng)實(shí)現(xiàn)了數(shù)組的合并，但是我每次合并都要重新寫(xiě)一份，那樣太麻煩，于是我們得想個(gè)辦法把它封裝成一個(gè)函數(shù)，下次我們要用的時(shí)候調(diào)用它就行。

var arr1 = [1,2,3];
var arr2 = [4,5,6,7];
function Concat(arr1,arr2){
var arr3 = [];
for(var i=0;i<arr1.length;i++){
arr3[i] = arr1[i];
}
for(var i=0;i<arr2.length;i++){
arr3.push(arr2[i]);
}
return arr3;
}
console.log(Concat(arr1,arr2));

思路二：

分析：把a(bǔ)rr1和arr2都轉(zhuǎn)換成字符串，然后將這兩段字符串相加得到一個(gè)組合，然后再把這個(gè)字符串轉(zhuǎn)成數(shù)組。

代碼實(shí)現(xiàn)：

var arr1 = [1,2,3];
var arr2 = [4,5,6,7,8,9];
var arr3 = (arr1.join(",")+","+arr2.join(",")).split(",");

出了點(diǎn)小問(wèn)題，這個(gè)這個(gè)數(shù)組里面的值是字符串了。

["1", "2", "3", "4", "5", "6", "7", "8", "9"]

解決思路：遍歷這個(gè)數(shù)組，挨個(gè)把他們轉(zhuǎn)換成數(shù)字。

var arr1 = [1,2,3];
var arr2 = [4,5,6,7,8,9];
var arr3 = (arr1.join(",")+","+arr2.join(",")).split(",");
for(var i=0;i<arr3.length;i++){
arr3[i] = +arr3[i];
}
console.log(arr3);

課外擴(kuò)展：繼承版

var arr1 = [1,2,3];
var arr2 = [4,5,6,7,8,9];
Array.prototype.Concat = function(arr){
var arr3 = [];
for(var i=0;i<this.length;i++){
arr3[i] = this[i];
}
for(var i=0;i<arr.length;i++){
arr3.push(arr[i]);
}
return arr3;
}
console.log(arr1.Concat(arr2));

以上所述是小編給大家介紹的JavaScript模擬數(shù)組合并concat的相關(guān)知識(shí)，希望對(duì)大家有所幫助！

最新評(píng)論