在介紹前，拋出一個(gè)問題：如何將多個(gè)數(shù)組合并為一個(gè)數(shù)組？

以下的分享會(huì)分為如下小節(jié)：

1.concat方法的基礎(chǔ)介紹

2.從實(shí)例中感受concat方法

1.concat方法的基礎(chǔ)介紹

　　concat方法用于多個(gè)數(shù)組的合并。它將新數(shù)組的成員，添加到原數(shù)組的尾部，然后返回一個(gè)新數(shù)組，原數(shù)組不變。

console.log([].concat([1],[2],[3])); // [1, 2, 3]
console.log([].concat([[1],[2],[3]])); // [[1], [2], [3]]
console.log([].concat(4,[[5,6],[7]])); // [4, [5, 6], [7]]

　　上面代碼中，第一個(gè)返回值是將一個(gè)空數(shù)組與三個(gè)數(shù)組[1],[2],[3]合并為一個(gè)數(shù)組，因此返回了[1, 2, 3]。第二個(gè)是將一個(gè)空數(shù)組與一個(gè)二維數(shù)組合并，二維數(shù)組的成員為[1],[2],[3]，因此返回了[[1], [2], [3]]，注意，返回的是二維數(shù)組。第三個(gè)例子同理。這里對概念的理解很重要，即將新數(shù)組的成員，添加到原數(shù)組的尾部。

　　除了接受數(shù)組作為參數(shù)，concat也可以接受其他類型的值作為參數(shù)。它們會(huì)作為新的元素，添加數(shù)組尾部。

console.log([].concat(1,2,3)); //[1,2,3];
//等同于
console.log([].concat(1,[2,3])); //[1,2,3];
console.log([].concat([1],[2,3])); //[1,2,3]; 

　　這里雖然內(nèi)容較少，看起來挺簡單。但是真正理解起來真的不容易。

2.從實(shí)例中感受concat方法

　　說完基礎(chǔ)的知識，給大家看看我最近遇到的一個(gè)題目。原題是這樣的。

　　看例子就能明白是什么意思了。

　　這道題目中，其中一個(gè)解決方案就是：

var flatten = function (arr){
return [].concat.apply([],arr);
};

　　這一段簡單的函數(shù)就可以實(shí)現(xiàn)將數(shù)組中的元素合并的功能。但是當(dāng)我在理解這個(gè)返回值的時(shí)候，出現(xiàn)了一個(gè)問題。

　　問題：為什么使用apply方法和沒有使用apply方法會(huì)有區(qū)別？

console.log([].concat.apply([],[[1],[2],[3]])); //[1, 2, 3]
console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]]

　上面代碼中，同樣是在一個(gè)空數(shù)組中向尾部添加新數(shù)組，第一個(gè)返回的是[1,2,3]。第二個(gè)卻是一個(gè)二維數(shù)組。

　　經(jīng)過一段時(shí)間的折騰，終于理解了其中不同的原因所在。

　　首先，我們在空數(shù)組中調(diào)用實(shí)例方法concat的時(shí)候，是傳入concat中的參數(shù)，在push到數(shù)組的末尾。也就是說，會(huì)將空數(shù)組與傳入的數(shù)組的最外層數(shù)組進(jìn)行合并，然后返回一個(gè)新數(shù)組。

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

　　上面代碼中，從幾個(gè)數(shù)組，到一維數(shù)組，二維數(shù)組，三維數(shù)組逐漸變化的。

　　在Javascript中call，apply，bind方法的詳解與總結(jié) 文章中，有提到 apply方法的作用與call方法類似，也是改變this指向（函數(shù)執(zhí)行時(shí)所在的作用域），然后在指定的作用域中，調(diào)用該函數(shù)。同時(shí)也會(huì)立即執(zhí)行該函數(shù)。唯一的區(qū)別就是，它接收一個(gè)數(shù)組作為函數(shù)執(zhí)行時(shí)的參數(shù)。

　　apply方法的第一個(gè)參數(shù)也是this所要指向的那個(gè)對象，如果設(shè)為null或undefined或者this，則等同于指定全局對象。第二個(gè)參數(shù)則是一個(gè)數(shù)組，該數(shù)組的所有成員依次作為參數(shù)，在調(diào)用時(shí)傳入原函數(shù)。原函數(shù)的參數(shù)，在call方法中必須一個(gè)個(gè)添加，但是在apply方法中，必須以數(shù)組形式添加。

console.log([].concat.apply([],[[1],[2],[3]])); //[1, 2, 3]
console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]]

　　從代碼可以看出，第一段代碼是先在空數(shù)組上先調(diào)用了concat方法，該方法的作用是將新數(shù)組的成員，添加到原數(shù)組的尾部。再調(diào)用了apply方法，傳入第一個(gè)參數(shù)，指定對象執(zhí)行時(shí)所在的作用域，而第二個(gè)參數(shù)的作用是將數(shù)組中的所有成員一次作為參數(shù)，在調(diào)用時(shí)傳入數(shù)組中。

　　因此，在concat，apply方法同時(shí)使用的時(shí)候，兩個(gè)方法的作用會(huì)疊加，也就出現(xiàn)了與單獨(dú)使用concat不同的現(xiàn)象?？磦€(gè)例子。

console.log([].concat([1,2,3])); //[1, 2, 3]
console.log([].concat.apply([],[[1],[2],[3]]));//[1, 2, 3]
console.log([].concat([[1],[2],[3]]));//[[1], [2], [3]]
console.log([].concat.apply([],[[[1],[2],[3]]]));//[[1], [2], [3]]
console.log([].concat([[[1],[2],[3]]]));//[[[1], [2], [3]]]
console.log([].concat.apply([],[[[[1],[2],[3]]]]));//[[[1], [2], [3]]]

　　上面代碼中，concat方法將最數(shù)組合并，然后在合并的基礎(chǔ)上在對下一層數(shù)組進(jìn)行合并。

console.log([].concat.apply([],[[1],[2],[3]]));//[1, 2, 3]
//相當(dāng)于
console.log([].concat(1,2,3)); //[1,2,3] 

　　總結(jié)：

　　　　1.單獨(dú)使用concat方法時(shí)，會(huì)將新數(shù)組的成員，添加到原數(shù)組的尾部。

　　　　2.使用apply方法來指定concat方法的this指向時(shí)，會(huì)讓兩個(gè)方法的作用疊加。

　　　　3.數(shù)組元素合并的方法：

var flatten = function (arr){
return [].concat.apply([],arr);
}; 
var flatten = function (array){
return array.reduce(function(a,b){
return a.concat(b);
},[])
}

以上所述是小編給大家介紹的javascript使用 concat 方法對數(shù)組進(jìn)行合并的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論