JS中取二维数组中最大值的方法汇总
在JavaScript中可以通过内置的Math.max()的最大值,但是要从多重数组中取出最大值,还是有一定的难度。
问题描述
假设你有一个数组,而且这个数组中包含了数字的子数组,而我们要做的是从数组中的每个子数组中返回其最大的那个最大数。
基本解决方案
functionlargestOfFour(arr){ varresults=[];//创建一个results变量来存储 //创建一个外层循环,遍历外层数组 for(varn=0;n<arr.length;n++){ varlargestNumber=0;//创建第二个变量,存储最大的数 //创建另一个循环,遍历子数组 for(varsb=0;sb<arr[n].length;sb++){ //检查子数组的元素是否大于当前存储的最大值 if(arr[n][sb]>largestNumber){ //如果为真,将这个值赋予给变量largestNumber largestNumber=arr[n][sb]; } } //内部循环后,将每个子数组中的值保存到数组results中 results[n]=largestNumber; } //返回数组 returnresults; } largestOfFour([[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]);//[34,456,4567,78]
上面的方法是一个普通的解决方案,通过两个for循环对数组及其子数组做遍历:
创建一个results变量用来存储每个子数组中遍历出来的最大值
创建外循环for遍历外层数组
创建第二个变量largestNumber用来存放最大值。这个变量值必须放在内部for循环的外面,因为这样他才不会被重新分配
创建第二个for循环,来遍历子数组中的每个元素
通过一个if语句来判断当前子数组的元素是否大于当前存储的最大值largestNumber。如果是(true),将这个最大值存储给largestNumber。
内部循环结束后,将每个子数组中的最大值存储到最初声明的变量results中
最后返回results数组
取出所有子数组中的每个最大值之后,得到一个新数组results,这个时候只需要通:
Array.prototype.max=function(){ returnMath.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
中级解决方案
functionlargestOfFour(arr){ //通过map()方法,并通过回调函数,将子数组中最大值组合在一起,得到一新数组 returnarr.map(function(group){ //通过reduce方法,把每个子数组中最大值返回到group数组中 returngroup.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]
在外层数组中使用Array.prototype.map()方法遍历数组。使用map()方法遍历数组,会调用一个回调函数,在这个回调函数中,使用reduce()方法对每个子数组group进行合并,将值返回到一个新数组中。而在使用reduce()方法时,同样会调用一个回调函数,这个回调函数只做了一件事情,就是子数组中的元素做为比较,如果current大于prev,将会返回current,否则返回prev,最终得到每个子数组中最大值。
和前面一样,通过Math.max.apply()最终得到最大值。
最佳解决方案
functionlargestOfFour(arr){ returnarr.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]
这个方案,使用Function.bind方法创建一个特殊的回调函数,就类似于Math.max方法一样,但其有一个Function.prototype.apply功能,将数组作为它的参数。
先对主数组中的每个元素做遍历,也就是数组内部的每个子数组
使用map()方法需要一个回调函数,用来找出内部每个数组中的最大值。需要创建一个函数,让Math.max能接受输入的数组工作。换句话说,这是非常简单而且这样工作也非常的好,如Math.max([9,43,20,6]);将会返回最大值43
Function.prototype.apply方法工作可以接受数组做为参数,但函数通过调用上下文,这事情就有点复杂。例如Math.max.apply(null,[9,43,20,6])将调用一个Max.max方法,但这样的方法找起来不容易。
这里给Function.prototype.apply方法传递了一个null参数,告诉Math.max不需要任何上下文。
因为arr.map()需要一个回调函数,而不只是一个表达式,我们在Function.bind方法中提供了一个函数
因为Function.prototype.apply是一个静态方法,类似一个函数对象,我们可以称之为Function.prototype.apply上绑定了一个Function.prototype.bind。例如:Function.apply.bind
现在可以通过Function.prototype.apply.bind回调函数指定其上下文,比如在这个示例中的Math.max方法
由于是嵌入到Function.prototype.apply方法,需要一个上下文作为第一个参数,而且这个上下文还是一个虚假的。
所以我们将null作为第二个参数传递给Function.prototype.apply.bind,并且绑定一个上下文,这个上下文就是Math.max方法
由于Math.max是独立于任何上下文的,所以它会忽略Function.prototype.apply方法调用的虚假上下文
我们使用Function.prototype.apply.bind(Math.max,null)让一个新函数接受arr.map值,比如数组中的子数组
多维数组中取最大值
上文使用不同的方法实现了从二维数组中取出子数组中最大值,并且将这些最大值重新组成一个新数组,如果延伸一下,取出里面的最大值时,还需要使用Array.prototype.max函数,函数中通过Math.max.apply({},this)取得最大值。不过如果不是二维数组,那上述方法将无法取出数组中最大的值。
而在多维数组中取最大值,可以通过join()和split()方法组合在一起:
functionlargestOfFour(arr){ varnewArray=arr.join(",").split(","); returnMath.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
同样可以使用类似的方法取出多维数组中的最小值:
functionsmallerOfFour(arr){ varnewArray=arr.join(",").split(","); returnMath.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
总结
在《JavaScript学习笔记:取数组中最大值和最小值》一文中介绍了使用Math.max.apply({},arr)来取数组中最大的数字。这篇文章中从不同的角度的介绍了如何在二维数组中取出最大的数,但很多时候,数组还有多维数组,文章最后介绍了如何实现多维数组中取出最大值。如果您有更多的方案,欢迎在评论中与我们一起分享。