亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

深入理解javascript中concat方法

 更新時(shí)間:2016年12月12日 15:21:16   作者:unclekeith  
本文主要介紹了javascript中concat方法,主要分為2小節(jié)內(nèi)容:1.concat方法的基礎(chǔ)介紹;2.從實(shí)例中感受concat方法。需要的朋友一起來(lái)看下吧

最近在惡補(bǔ)js知識(shí)的時(shí)候,總是會(huì)因?yàn)閖s強(qiáng)大的語(yǔ)法而感到震撼。因?yàn)橐郧皩?duì)前端方面的疏忽,導(dǎo)致了一些理解的錯(cuò)誤。因此痛改前非,下定決心,不管做什么事情,都要有專研的精神。

在介紹前,拋出一個(gè)問(wèn)題:如何將多個(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è)例子同理。這里對(duì)概念的理解很重要,即將新數(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)容較少,看起來(lái)挺簡(jiǎn)單。但是真正理解起來(lái)真的不容易。

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

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

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

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

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

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

問(wèn)題:為什么使用apply方法和沒(méi)有使用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)過(guò)一段時(shí)間的折騰,終于理解了其中不同的原因所在。

首先,我們?cè)诳諗?shù)組中調(diào)用實(shí)例方法concat的時(shí)候,是傳入concat中的參數(shù),在push到數(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ù)組逐漸變化的。

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

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

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方法,將傳入的參數(shù)合并到空數(shù)組中。下半段中,調(diào)用了String對(duì)象的實(shí)例方法apply,將concat()函數(shù)內(nèi)部的this指向了[],并且在[]作用域下,傳入調(diào)用concat需要的參數(shù),并且以數(shù)組的方式傳入。再看幾個(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]]]

總結(jié):

1.單獨(dú)使用concat方法時(shí),會(huì)將新數(shù)組的成員,添加到原數(shù)組的尾部,然后返回一個(gè)新數(shù)組,原數(shù)組不變;如果傳入的其他類型的值,它們會(huì)作為新的元素,添加到數(shù)組末尾。

2.數(shù)組元素合并的方法:

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

如果對(duì)不理解apply方法,可以前往這篇文章:Javascript中call,apply,bind方法的詳解與總結(jié)

以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

最新評(píng)論