首頁  >  文章  >  web前端  >  深入理解javascript中concat方法

深入理解javascript中concat方法

巴扎黑
巴扎黑原創
2016-12-22 13:55:051346瀏覽

在介紹前,拋出一個問題:如何將多個數字組合併為一個數組?

以下的分享會分為如下小節:

1.concat方法的基礎介紹

2.從實例中感受concat方法

1.concat方法的基礎介紹

concat方法用於多個數組的合併。它將新數組的成員,加到原始數組的尾部,然後傳回一個新數組,原始數組不變。

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]]

上面程式碼中,第一個回傳值是將一個空數組與三個數組[1],[2],[3]合併為一個數組,因此回傳了[1, 2, 3]。第二個是將一個空數組與一個二維數組合併,二維數組的成員為[1],[2],[3],因此回傳了[[1], [2], [3]],注意,傳回的是二維數組。第三個例子同理。這裡對概念的理解很重要,即將新數組的成員,加入原始數組的尾部。

除了接受陣列作為參數,concat也可以接受其他類型的值作為參數。它們會作為新的元素,並新增數組尾端。

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];

這裡雖然內容較少,看起來還挺簡單。但是真正理解真的不容易。

2.從實例中感受concat方法

說完基礎的知識,給大家看看我最近遇到的一個題目。原題是這樣的。

看範例就能明白是什麼意思了。

這道題目中,其中一個解決方案就是:

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

這一段簡單的函數就可以實現將數組中的元素合併的功能。但是當我在理解這個回傳值的時候,出現了一個問題。

問題:為什麼使用apply方法和沒有使用apply方法會有區別?

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

上面程式碼中,同樣是在一個空數組中新增數組,第一個回傳的是[1,2,3]。第二個卻是二維數組。

經過一段時間的折騰,終於理解了其中不同的原因所在。

首先,我們在空數組中呼叫實例方法concat的時候,是傳入concat中的參數,在push到數組的末尾。

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]]]

上面程式碼中,從單一元素,到一維數組,二維數組,三維數組逐漸變化的。

在Javascript中call,apply,bind方法的詳解與總結 文章中,有提到apply方法的作用與call方法類似,也是改變某個函數中this指向(函數執行時所在的作用域),然後在指定的作用域中,呼叫函數。同時也會立即執行該函數。唯一的區別就是,它接收一個數組作為函數執行時的參數。

apply方法的第一個參數也是this所要指向的那個對象,如果設為null或undefined或this,則等同於指定全域物件。第二個參數則是數組,數組的所有成員依序作為參數,在呼叫時傳入原函數。原函數的參數,在call方法中必須一個個添加,但是在apply方法中,必須以數組形式添加。

console.log([].concat([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方法,將傳入的參數合併到空數組中。下半段中,呼叫了String物件的實例方法apply,將concat()函數內部的this指向了[],並且在[]作用域下,傳入呼叫concat需要的參數,並且以數組的方式傳入。再看幾個例子。

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]]]

總結:

1.單獨使用concat方法時,會將新數組的成員,添加到原始數組的尾部,然後返回一個新數組,原始數組不變;如果傳入的其他類型的值,它們會作為新的元素,添加到數組末尾。

2.陣列元素合併的方法:

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

   

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

   

如果對不理解文章

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn