JS中取二维数组中最大值的方法汇总


Posted in Javascript onApril 17, 2016

在JavaScript中可以通过内置的 Math.max() 的最大值,但是要从多重数组中取出最大值,还是有一定的难度。

问题描述

假设你有一个数组,而且这个数组中包含了数字的子数组,而我们要做的是从数组中的每个子数组中返回其最大的那个最大数。

基本解决方案

function largestOfFour(arr) {
var results = []; // 创建一个results变量来存储
// 创建一个外层循环,遍历外层数组
for (var n = 0; n < arr.length; n++) {
var largestNumber = 0; // 创建第二个变量,存储最大的数
// 创建另一个循环,遍历子数组
for (var sb = 0; sb < arr[n].length; sb++) {
//检查子数组的元素是否大于当前存储的最大值
if (arr[n][sb] > largestNumber) {
// 如果为真,将这个值赋予给变量largestNumber
largestNumber = arr[n][sb];
}
}
// 内部循环后,将每个子数组中的值保存到数组results中
results[n] = largestNumber;
}
// 返回数组
return results;
}
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 () {
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

中级解决方案

function largestOfFour (arr) {
// 通过map()方法,并通过回调函数,将子数组中最大值组合在一起,得到一新数组
return arr.map(function (group) {
// 通过reduce方法,把每个子数组中最大值返回到group数组中
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]

在外层数组中使用 Array.prototype.map() 方法遍历数组。使用 map() 方法遍历数组,会调用一个回调函数,在这个回调函数中,使用 reduce() 方法对每个子数组 group 进行合并,将值返回到一个新数组中。而在使用 reduce() 方法时,同样会调用一个回调函数,这个回调函数只做了一件事情,就是子数组中的元素做为比较,如果 current 大于 prev ,将会返回 current ,否则返回 prev ,最终得到每个子数组中最大值。

和前面一样,通过 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]

这个方案,使用 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() 方法组合在一起:

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

同样可以使用类似的方法取出多维数组中的最小值:

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

总结

在《 JavaScript学习笔记:取数组中最大值和最小值 》一文中介绍了使用 Math.max.apply({},arr) 来取数组中最大的数字。这篇文章中从不同的角度的介绍了如何在二维数组中取出最大的数,但很多时候,数组还有多维数组,文章最后介绍了如何实现多维数组中取出最大值。如果您有更多的方案,欢迎在评论中与我们一起分享。

Javascript 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 #Javascript
js实现select二级联动下拉菜单
Apr 17 #Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 #Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 #Javascript
第一次接触JS require.js模块化工具
Apr 17 #Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 #Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 #Javascript
You might like
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
javascript数组的使用
2013/03/28 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python中GIL的使用详解
2018/10/03 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Django保护敏感信息的方法示例
2019/05/09 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
教师新年寄语
2014/04/03 职场文书
个人思想政治总结
2015/03/05 职场文书
2015学校年度工作总结
2015/05/11 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
学习心理学心得体会
2016/01/22 职场文书
Python机器学习之基础概述
2021/05/19 Python