JS中取二維數(shù)組中最大值的方法匯總
在JavaScript中可以通過(guò)內(nèi)置的 Math.max() 的最大值,但是要從多重?cái)?shù)組中取出最大值,還是有一定的難度。
問(wèn)題描述
假設(shè)你有一個(gè)數(shù)組,而且這個(gè)數(shù)組中包含了數(shù)字的子數(shù)組,而我們要做的是從數(shù)組中的每個(gè)子數(shù)組中返回其最大的那個(gè)最大數(shù)。
基本解決方案
function largestOfFour(arr) { var results = []; // 創(chuàng)建一個(gè)results變量來(lái)存儲(chǔ) // 創(chuàng)建一個(gè)外層循環(huán),遍歷外層數(shù)組 for (var n = 0; n < arr.length; n++) { var largestNumber = 0; // 創(chuàng)建第二個(gè)變量,存儲(chǔ)最大的數(shù) // 創(chuàng)建另一個(gè)循環(huán),遍歷子數(shù)組 for (var sb = 0; sb < arr[n].length; sb++) { //檢查子數(shù)組的元素是否大于當(dāng)前存儲(chǔ)的最大值 if (arr[n][sb] > largestNumber) { // 如果為真,將這個(gè)值賦予給變量largestNumber largestNumber = arr[n][sb]; } } // 內(nèi)部循環(huán)后,將每個(gè)子數(shù)組中的值保存到數(shù)組results中 results[n] = largestNumber; } // 返回?cái)?shù)組 return results; } largestOfFour([[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]); //[34, 456, 4567, 78]
上面的方法是一個(gè)普通的解決方案,通過(guò)兩個(gè) for 循環(huán)對(duì)數(shù)組及其子數(shù)組做遍歷:
創(chuàng)建一個(gè) results 變量用來(lái)存儲(chǔ)每個(gè)子數(shù)組中遍歷出來(lái)的最大值
創(chuàng)建外循環(huán) for 遍歷外層數(shù)組
創(chuàng)建第二個(gè)變量 largestNumber 用來(lái)存放最大值。這個(gè)變量值必須放在內(nèi)部 for 循環(huán)的外面,因?yàn)檫@樣他才不會(huì)被重新分配
創(chuàng)建第二個(gè) for 循環(huán),來(lái)遍歷子數(shù)組中的每個(gè)元素
通過(guò)一個(gè) if 語(yǔ)句來(lái)判斷當(dāng)前子數(shù)組的元素是否大于當(dāng)前存儲(chǔ)的最大值 largestNumber 。如果是( true ),將這個(gè)最大值存儲(chǔ)給 largestNumber 。
內(nèi)部循環(huán)結(jié)束后,將每個(gè)子數(shù)組中的最大值存儲(chǔ)到最初聲明的變量 results 中
最后返回 results 數(shù)組
取出所有子數(shù)組中的每個(gè)最大值之后,得到一個(gè)新數(shù)組 results ,這個(gè)時(shí)候只需要通:
Array.prototype.max = function () { return Math.max.apply({},this); } largestOfFour(arr).max();
就可以得到其中的最大值。
largestOfFour([[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]).max(); // 4567
中級(jí)解決方案
function largestOfFour (arr) { // 通過(guò)map()方法,并通過(guò)回調(diào)函數(shù),將子數(shù)組中最大值組合在一起,得到一新數(shù)組 return arr.map(function (group) { // 通過(guò)reduce方法,把每個(gè)子數(shù)組中最大值返回到group數(shù)組中 return group.reduce(function (prev, current) { // 如果current 大于prev,返回current,否則返回prev return (current > prev) ? current : prev; }); }); } largestOfFour([[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]); // [34, 456, 4567, 78]
在外層數(shù)組中使用 Array.prototype.map() 方法遍歷數(shù)組。使用 map() 方法遍歷數(shù)組,會(huì)調(diào)用一個(gè)回調(diào)函數(shù),在這個(gè)回調(diào)函數(shù)中,使用 reduce() 方法對(duì)每個(gè)子數(shù)組 group 進(jìn)行合并,將值返回到一個(gè)新數(shù)組中。而在使用 reduce() 方法時(shí),同樣會(huì)調(diào)用一個(gè)回調(diào)函數(shù),這個(gè)回調(diào)函數(shù)只做了一件事情,就是子數(shù)組中的元素做為比較,如果 current 大于 prev ,將會(huì)返回 current ,否則返回 prev ,最終得到每個(gè)子數(shù)組中最大值。
和前面一樣,通過(guò) Math.max.apply() 最終得到最大值。
最佳解決方案
function largestOfFour (arr) { return arr.map(Function.apply.bind(Math.max, null)); } largestOfFour([[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]); //[34, 456, 4567, 78]
這個(gè)方案,使用 Function.bind 方法創(chuàng)建一個(gè)特殊的回調(diào)函數(shù),就類(lèi)似于 Math.max 方法一樣,但其有一個(gè) Function.prototype.apply 功能,將數(shù)組作為它的參數(shù)。
先對(duì)主數(shù)組中的每個(gè)元素做遍歷,也就是數(shù)組內(nèi)部的每個(gè)子數(shù)組
使用 map() 方法需要一個(gè)回調(diào)函數(shù),用來(lái)找出內(nèi)部每個(gè)數(shù)組中的最大值。需要?jiǎng)?chuàng)建一個(gè)函數(shù),讓 Math.max 能接受輸入的數(shù)組工作。換句話(huà)說(shuō),這是非常簡(jiǎn)單而且這樣工作也非常的好,如 Math.max([9,43,20,6]); 將會(huì)返回最大值 43
Function.prototype.apply 方法工作可以接受數(shù)組做為參數(shù),但函數(shù)通過(guò)調(diào)用上下文,這事情就有點(diǎn)復(fù)雜。例如 Math.max.apply(null,[9,43,20,6]) 將調(diào)用一個(gè) Max.max 方法,但這樣的方法找起來(lái)不容易。
這里給 Function.prototype.apply 方法傳遞了一個(gè) null 參數(shù),告訴 Math.max 不需要任何上下文。
因?yàn)?arr.map() 需要一個(gè)回調(diào)函數(shù),而不只是一個(gè)表達(dá)式,我們?cè)?Function.bind 方法中提供了一個(gè)函數(shù)
因?yàn)?Function.prototype.apply 是一個(gè)靜態(tài)方法,類(lèi)似一個(gè)函數(shù)對(duì)象,我們可以稱(chēng)之為 Function.prototype.apply 上綁定了一個(gè) Function.prototype.bind 。例如: Function.apply.bind
現(xiàn)在可以通過(guò) Function.prototype.apply.bind 回調(diào)函數(shù)指定其上下文,比如在這個(gè)示例中的 Math.max 方法
由于是嵌入到 Function.prototype.apply 方法,需要一個(gè)上下文作為第一個(gè)參數(shù),而且這個(gè)上下文還是一個(gè)虛假的。
所以我們將 null 作為第二個(gè)參數(shù)傳遞給 Function.prototype.apply.bind ,并且綁定一個(gè)上下文,這個(gè)上下文就是 Math.max 方法
由于 Math.max 是獨(dú)立于任何上下文的,所以它會(huì)忽略 Function.prototype.apply 方法調(diào)用的虛假上下文
我們使用 Function.prototype.apply.bind(Math.max,null) 讓一個(gè)新函數(shù)接受 arr.map 值,比如數(shù)組中的子數(shù)組
多維數(shù)組中取最大值
上文使用不同的方法實(shí)現(xiàn)了從二維數(shù)組中取出子數(shù)組中最大值,并且將這些最大值重新組成一個(gè)新數(shù)組,如果延伸一下,取出里面的最大值時(shí),還需要使用 Array.prototype.max 函數(shù),函數(shù)中通過(guò) Math.max.apply({},this) 取得最大值。不過(guò)如果不是二維數(shù)組,那上述方法將無(wú)法取出數(shù)組中最大的值。
而在多維數(shù)組中取最大值,可以通過(guò) join() 和 split() 方法組合在一起:
function largestOfFour (arr) { var newArray = arr.join(",").split(","); return Math.max.apply({},newArray); } largestOfFour([12,23]); // =>23 largestOfFour([12,23,[1234,324],[345,566]]); // =>1234 largestOfFour([12,23,[1234,324,[23121,90890]],[345,566,[345,78,90]]]); // =>90890 largestOfFour([12,23,[1234,324,[23121,90890]],[345,566,[345,78,90,[90909090,988]]]]); // =>90909090
同樣可以使用類(lèi)似的方法取出多維數(shù)組中的最小值:
function smallerOfFour (arr) { var newArray = arr.join(",").split(","); return Math.min.apply({},newArray); } smallerOfFour([12,23]); // =>12 smallerOfFour([112,23,[1234,324],[345,566]]); // =>23 smallerOfFour([212,123,[1234,324,[23121,90890]],[345,566,[345,78,90]]]); // =>78 smallerOfFour([102,230,[1234,324,[23121,90890]],[345,566,[345,78,90,[90909090,988]]]]); // =>78
總結(jié)
在《 JavaScript學(xué)習(xí)筆記:取數(shù)組中最大值和最小值 》一文中介紹了使用 Math.max.apply({},arr) 來(lái)取數(shù)組中最大的數(shù)字。這篇文章中從不同的角度的介紹了如何在二維數(shù)組中取出最大的數(shù),但很多時(shí)候,數(shù)組還有多維數(shù)組,文章最后介紹了如何實(shí)現(xiàn)多維數(shù)組中取出最大值。如果您有更多的方案,歡迎在評(píng)論中與我們一起分享。
- Javascript獲取數(shù)組中的最大值和最小值的方法匯總
- JS獲取數(shù)組最大值、最小值及長(zhǎng)度的方法
- 求js數(shù)組的最大值和最小值的四種方法
- javascript實(shí)現(xiàn)查找數(shù)組中最大值方法匯總
- JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能示例
- 分享JS數(shù)組求和與求最大值的方法
- JavaScript遍歷查找數(shù)組中最大值與最小值的方法示例
- JavaScript如何獲取數(shù)組最大值和最小值
- javascript實(shí)現(xiàn)數(shù)組最大值和最小值的6種方法
- js求數(shù)組最大值的八種具體實(shí)現(xiàn)方法
相關(guān)文章
ES6 新增的創(chuàng)建數(shù)組的方法(小結(jié))
這篇文章主要介紹了ES6 新增的創(chuàng)建數(shù)組的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08微信小程序?qū)崿F(xiàn)錨點(diǎn)定位功能的方法實(shí)例
“錨點(diǎn)”功能在實(shí)際應(yīng)用設(shè)計(jì)的好,可以提高用戶(hù)體驗(yàn),這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)錨點(diǎn)定位功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07typescript 類(lèi)型any不能分配給類(lèi)型never
本文主要介紹了typescript 類(lèi)型any不能分配給類(lèi)型never,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04js事件on動(dòng)態(tài)綁定數(shù)據(jù),綁定多個(gè)事件的方法
今天小編就為大家分享一篇js事件on動(dòng)態(tài)綁定數(shù)據(jù),綁定多個(gè)事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09JavaScript中的函數(shù)申明、函數(shù)表達(dá)式、箭頭函數(shù)
js中的函數(shù)可以通過(guò)幾種方式創(chuàng)建,具體創(chuàng)建方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),文中通過(guò)例子給大家介紹了函數(shù)聲明和表達(dá)式之間的差別,感興趣的朋友跟隨小編一起看看吧2019-12-12js實(shí)現(xiàn)自動(dòng)播放勻速輪播圖
這篇文章主要介紹了js實(shí)現(xiàn)自動(dòng)播放勻速輪播圖,帶勻速運(yùn)動(dòng)函數(shù)封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02javascript hashtable實(shí)現(xiàn)代碼
javascript中沒(méi)有像c#,java那樣的哈希表(hashtable), 然而,javascript中的Array也只有一些類(lèi)似于'哈希表'的非常簡(jiǎn)單功能。2009-10-10左右懸浮可分組的網(wǎng)站QQ在線(xiàn)客服代碼(可謂經(jīng)典)
QQ在線(xiàn)客服在每一個(gè)web開(kāi)發(fā)人員的記憶里都是一個(gè)經(jīng)典,既然是經(jīng)典,也就是必不可少,那就應(yīng)該很好的呈現(xiàn)出來(lái),本文整理了一些左右懸浮可分組的網(wǎng)站QQ在線(xiàn)客服代碼,需要的朋友可以了解下2012-12-12