JavaScript学习笔记之取数组中最大值和最小值


Posted in Javascript onMarch 23, 2016

推荐阅读:JavaScript学习笔记之数组的增、删、改、查

在实际业务中有的时候要取出数组中的最大值或最小值。但在数组中并没有提供arr.max()和arr.min()这样的方法。那么是不是可以通过别的方式实现类似这样的方法呢?那么今天我们就来整理取出数组中最大值和最小值的一些方法。

取数组中最大值

可以先把思路理一下:

将数组中第一个元素赋值给一个变量,并且把这个变量作为最大值;

开始遍历数组,从第二个元素开始依次和第一个元素进行比较

如果当前的元素大于当前的最大值,就把当前的元素值赋值给最大值

移动到下一个元素,继续按前面一步操作

当数组元素遍历结束时,这个变量存储的就是最大值

代码如下:

Array.prototype.max = function () {
// 将数组第一个元素的值赋给max
var max = this[0];
// 使用for 循环从数组第一个值开始做遍历
for (var i = 1; i < this.length; i++) {
// 如果元素当前值大于max,就把这个当前值赋值给max
if (this[i] > max) {
max = this[i];
}
}
// 返回最大的值
return max;
}

来看一个示例:

var arr = [1,45,23,3,6,2,7,234,56];
arr.max(); // 234

上面的示例,数组中都是数值,那么如果数组中不全是数值会是一个什么样的效果呢?来测试一下先:

var arr = [1,45,23,3,6,2,7,234,56,'2345','a','c'];
arr.max(); // 'c'

这并不是我们想要的结果吧。(此处跪求解决方案)

通过前段时间的学习,都知道for循环性能要比forEach()差,那可以将上面的方法改成forEach()方法:

Array.prototype.max = function (){
var max = this[0];
this.forEach (function(ele,index,arr){
if(ele > max) {
max = ele;
}
})
return max;
}
var arr = [1,45,23,3,6,2,7,234,56];
arr.max(); // 234

取数组中最小值

类似取最大值的思路一样,我们可以很轻松的实现arr.min()方法,取出数组中的最小值:

Array.prototype.min = function () {
var min = this[0];
this.forEach(function(ele, index,arr) {
if(ele < min) {
min = ele;
}
})
return min;
}
var arr = [1,45,23,3,6,2,7,234,56];
arr.min(); // 1

其他方法

除了上面的方案,还可以有其他方法,比如使用数组的reduce()方法。回忆前面的学过的知识,reduce()方法可以接收一个回调函数callbackfn,可以在这个回调函数中拿数组中的初始值(preValue)与数组中当前被处理的数组项(curValue)做比较,如果preValue大于curValue值返回preValue,反之返回curValue值,依此类推取出数组中最大值:

Array.prototype.max = function() {
return this.reduce(function(preValue, curValue,index,array) {
return preValue > curValue ? preValue : curValue;
})
}
var arr = [1,45,23,3,6,2,7,234,56];
arr.max(); // 234

同样的也可以使用类似的方法实现arr.mix()方法,取出数组中的最小值:

Array.prototype.min = function() {
return this.reduce(function(preValue, curValue,index,array) {
return preValue > curValue ? curValue : preValue;
})
}
var arr = [1,45,23,3,6,2,7,234,56];
arr.min(); // 1

内置函数Math.max()和Math.min()方法

对于纯数字数组,可以使用JavaScript中的内置函数Math.max()和Math.min()方法。使用这两个内置函数可以分别找出数组中的最大值和最上值。在使用这两种内置函数取出数组最大和最小值之前,先学习一下Math.max()和Math.min()两个函数。

Math.max()

Math.max()函数返回一组数中的最大值。

Math.max(1,32,45,31,3442,4); // 3442
Math.max(10, 20); // 20
Math.max(-10, -20); // -10
Math.max(-10, 20); // 20

Math.min()

Math.min()函数和Math.max()函数刚好相反,其会返回一组数中的最小值:

Math.min(10,20); //10
Math.min(-10,-20); //-20
Math.min(-10,20); //-10
Math.min(1,32,45,31,3442,4); //1

这些函数如果没有参数,则结果为 -Infinity;如果有任一参数不能被转换为数值,则结果为 NaN。最主要的是这两个函数对于数字组成的数组是不能直接使用的。但是,这有一些类似地方法。

Function.prototype.apply()让你可以使用提供的this与参数组与的数组来调用参数。

// 取出数组中最大值
Array.max = function( array ){
return Math.max.apply( Math, array );
};
// 取出数组中最小值
Array.min = function( array ){
return Math.min.apply( Math, array );
};
var arr = [1,45,23,3,6,2,7,234,56];
Array.max(arr); // 234
Array.min(arr); // 1

Math对象也是一个对象,可以使用对象的字面量来写,如:

Array.prototype.max = function () {
return Math.max.apply({},this);
}
Array.prototype.min = function () {
return Math.min.apply({},this);
}
var arr = [1,45,23,3,6,2,7,234,56];
arr.max(); // 234
arr.min(); // 1

其实还有更简单的方法。基于ES2015的方法来实现此功能,是使用展开运算符:

var numbers = [1, 2, 3, 4];
Math.max(...numbers) // 4
Math.min(...numbers) // 1

此运算符使数组中的值在函数调用的位置展开。

总结

这篇文章整理了几个从数组中取出最大值和最小值的方法。这几个方法都只是会对于数字数组,而对于数组中包含其他数据类型时,如何只取出最大的数值和最小的数值(如果您知道如何实现,还望指点迷津)。而这几种方法当中,使用JavaScript的内置函数Math.max()和Math.min()配合Function.prototype.apply()可以轻松取出数组中的最大值和最小值。当然最最简单的要当数ES2015中使用展示运算符的方法。

关于JavaScript学习笔记之取数组中最大值和最小值的方法就给大家介绍这么多,如果大家还有更好的方案,希望能在下面的评论中与我们一起分享。

Javascript 相关文章推荐
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
详解JavaScript匿名函数和闭包
Jul 10 Javascript
JavaScript学习笔记之数组去重
Mar 23 #Javascript
JavaScript学习笔记之数组随机排序
Mar 23 #Javascript
JavaScript学习笔记之数组求和方法
Mar 23 #Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 #Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 #Javascript
BootStrap实用代码片段之一
Mar 22 #Javascript
Javascript中的几种继承方式对比分析
Mar 22 #Javascript
You might like
默默简单的写了一个模板引擎
2007/01/02 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
浅谈js中的闭包
2015/03/16 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
python中cPickle类使用方法详解
2018/08/27 Python
解析Python的缩进规则的使用
2019/01/16 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python 读取、写入txt文件的示例
2020/09/27 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
企划主管岗位职责
2013/12/12 职场文书
大四本科生的自我评价
2013/12/30 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
水电工程师岗位职责
2015/02/13 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js