深入理解javascript中concat方法
最近在惡補(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í)也希望多多支持腳本之家!
- JS數(shù)組合并push與concat區(qū)別分析
- js嵌套的數(shù)組扁平化:將多維數(shù)組變成一維數(shù)組以及push()與concat()區(qū)別的講解
- JavaScript使用concat連接數(shù)組的方法
- JavaScript字符串對(duì)象的concat方法實(shí)例(用于連接兩個(gè)或多個(gè)字符串)
- JS數(shù)組方法concat()用法實(shí)例分析
- JavaScript中使用concat()方法拼接字符串的教程
- javascript使用 concat 方法對(duì)數(shù)組進(jìn)行合并的方法
- Javascript連接多個(gè)數(shù)組不用concat來(lái)解決
- js采用concat和sort將N個(gè)數(shù)組拼接起來(lái)的方法
- javascript中數(shù)組的concat()方法使用介紹
- javascript concat數(shù)組累加 示例
- JS Array創(chuàng)建及concat()split()slice()的使用方法
- 淺談JavaScript的push(),pop(),concat()方法
- JavaScript模擬數(shù)組合并concat
- JS數(shù)組降維的實(shí)現(xiàn)Array.prototype.concat.apply([], arr)
- JavaScript中concat復(fù)制數(shù)組方法淺析
- javascript數(shù)組中的concat方法和splice方法
- JavaScript的concat方法實(shí)例代碼(數(shù)組連接)
相關(guān)文章
JavaScript高級(jí)程序設(shè)計(jì) 擴(kuò)展--關(guān)于動(dòng)態(tài)原型
前文是基于《JavaScript高級(jí)程序設(shè)計(jì)》中關(guān)于對(duì)象創(chuàng)建的筆記和總結(jié)。2010-11-11JavaScript中setInterval的用法總結(jié)
這篇文章主要是對(duì)JavaScript中setInterval的用法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11JS實(shí)戰(zhàn)例子之實(shí)現(xiàn)自動(dòng)打字機(jī)動(dòng)效
什么是打字機(jī)效果呢?打字機(jī)效果即為文字逐個(gè)輸出,實(shí)際上就是一種Web動(dòng)畫(huà),下面這篇文章主要給大家介紹了關(guān)于JS實(shí)戰(zhàn)例子之實(shí)現(xiàn)自動(dòng)打字機(jī)動(dòng)效的相關(guān)資料,需要的朋友可以參考下2023-01-01硬盤(pán)瀏覽程序,保存成網(wǎng)頁(yè)格式便可使用
硬盤(pán)瀏覽程序,保存成網(wǎng)頁(yè)格式便可使用...2006-12-12使用js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的滾動(dòng)條過(guò)程解析
這篇文章主要介紹了使用js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的滾動(dòng)條過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09JavaScrip實(shí)現(xiàn)一個(gè)有時(shí)間限制的緩存類的方式
本文將探索 JavaScript 中一種基于自動(dòng)過(guò)期機(jī)制的時(shí)間限制緩存實(shí)現(xiàn)方式,提高數(shù)據(jù)緩存策略的靈活性和效率,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01js隱式轉(zhuǎn)換的知識(shí)實(shí)例講解
在本篇文章中,小編給大家分享了關(guān)于js隱式轉(zhuǎn)換的相關(guān)知識(shí)點(diǎn)內(nèi)容,有興趣的朋友們參考學(xué)習(xí)下。2018-09-09