javascript中concat方法深刻理解

 

 

最近在惡補js知識的時候，老是會由於js強大的語法而感到震撼。由於之前對前端方面的疏忽，致使了一些理解的錯誤。所以痛改前非，下定決心，無論作什麼事情，都要有專研的精神。

 

在介紹前，拋出一個問題：如何將多個數組合併爲一個數組？

 

如下的分享會分爲以下小節：

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也能夠接受其餘類型的值做爲參數。它們會做爲新的元素，添加數組尾部。

 

1 console.log([].concat(1,2,3)); //[1,2,3];
2 //等同於
3 console.log([].concat(1,[2,3])); //[1,2,3];
4 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);
  },[])
}

　　若是對不理解apply方法，能夠前往這篇文章：Javascript中call，apply，bind方法的詳解與總結

 

 

　　轉載請註明出處：http://www.cnblogs.com/Uncle-Keith/p/5852721.html