JavaScript 연구 노트: array_javascript 기술에서 최대값과 최소값 취하기

추천 도서: JavaScript 학습 노트: 배열 추가, 삭제, 수정 및 확인

JavaScript 학습 노트 배열 합계 방식

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 연구 노트의 배열에서 최대값과 최소값을 얻는 방법에 관한 것입니다. 더 나은 해결책이 있다면 아래 댓글로 공유해 주시기 바랍니다.