目錄
取数组中最大值
取数组中最小值
其他方法
内置函数 Math.max() 和 Math.min() 方法
Math.max()
Math.min()
Function.prototype.apply()让你可以使用提供的this与参数组与的数组来调用参数。
总结
参考资料
初学者学习笔记,如有不对,还希望高手指点。如有造成误解,还希望多多谅解。
大漠
首頁 web前端 html教學 JavaScript学习笔记:取数组中最大值和最小值_html/css_WEB-ITnose

JavaScript学习笔记:取数组中最大值和最小值_html/css_WEB-ITnose

Jun 21, 2016 am 08:54 AM

在实际业务中有的时候要取出数组中的最大值或最小值。但在数组中并没有提供 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); // 3442Math.max(10, 20);   //  20Math.max(-10, -20); // -10Math.max(-10, 20);  //  20
登入後複製

Math.min()

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

Math.min(10,20); //10Math.min(-10,-20); //-20Math.min(-10,20); //-10Math.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); // 234Array.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(); // 234arr.min(); // 1
登入後複製

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

var numbers = [1, 2, 3, 4];Math.max(...numbers) // 4Math.min(...numbers) // 1
登入後複製

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

总结

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

参考资料

  • 数组取最大值与最小值
  • JavaScript: min & max Array values?
  • 计算数组中的最大值/最小值

初学者学习笔记,如有不对,还希望高手指点。如有造成误解,还希望多多谅解。

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3:核心技术与案例实战 》。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

&lt; datalist&gt;的目的是什麼。 元素? &lt; datalist&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;的目的是什麼。 元素?

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間? 我如何使用html5&lt; time&gt; 元素以語義表示日期和時間? Mar 12, 2025 pm 04:05 PM

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?

&gt; gt;的目的是什麼 元素? &gt; gt;的目的是什麼 元素? Mar 21, 2025 pm 12:34 PM

&gt; gt;的目的是什麼 元素?

&lt; meter&gt;的目的是什麼。 元素? &lt; meter&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;的目的是什麼。 元素?

See all articles