목차
取数组中最大值
取数组中最小值
其他方法
内置函数 Math.max() 和 Math.min() 方法
Math.max()
Math.min()
Function.prototype.apply()让你可以使用提供的this与参数组与的数组来调用参数。
总结
参考资料
初学者学习笔记,如有不对,还希望高手指点。如有造成误解,还希望多多谅解。
大漠
웹 프론트엔드 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 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

See all articles