개요

JavaScript로 작업할 때 슬라이더의 경계를 설정하거나 사용자에게 통계를 표시하기 위해 배열의 최소 및 최대 요소를 가져와야 하는 상황이 자주 발생합니다.

이 기사에서는 JavaScript에서 배열의 최소 및 최대 요소를 가져오는 방법을 살펴보겠습니다. 또한 네 가지 다른 방법을 살펴보고 큰 배열을 처리할 때 속도를 비교할 것입니다.

사용하여 배열의 최소 및 최대 요소를 얻는 방법 연산 목적

Math 수학 연산을 수행할 때 필요할 수 있는 많은 메서드와 상수를 포함하는 JavaScript의 내장 전역 편의 객체입니다. 이 기사에서 사용할 두 가지 방법은 Math.min() 과 Math.max() – 둘 다 숫자 목록을 인수로 받아들입니다. 이름에서 알 수 있듯이 하나는 값이 가장 낮은 요소를 반환하고 다른 하나는 값이 가장 높은 요소를 반환합니다.

console.log(Math.min(20, 23, 27));
console.log(Math.max(20, 23, 27));

console.log(Math.min(-20, -23, -27));
console.log(Math.max(-20, -23, -27));

전달된 요소 중 하나 이상이 숫자가 아니거나 숫자로 변환할 수 없는 경우 둘 다 Math.min() 과 Math.max() 반품 NaN:

console.log(Math.min('-20', -23, -27));
console.log(Math.max('number', -23, -27));

마찬가지로 배열을 인수로 전달하려고 하면 Math.min() 함수, 우리는 NaN, 스칼라 값으로 변환할 수 없는 단일 요소로 처리되기 때문에:

const myArray = [2, 3, 1];
console.log(Math.min(myArray));

그러나 이에 대한 빠른 수정은 스프레드 연산자를 사용하여 요소의 래핑을 해제하는 것입니다.

const myArray = [2, 3, 1];
console.log(Math.min(...myArray));

스프레드 연산자에 대해 자세히 알아보려면 JavaScript의 Spread 연산자 안내!

다음을 사용하여 최대 및 최소 요소 가져오기 줄이다()

환원 작업(때로는 다음과 같이 알려져 있음) 개고, 다양한 응용 프로그램과 함께 함수형 프로그래밍에서 가장 강력한 작업 중 일부입니다. 그만큼 reduce() 함수는 각 배열 요소에 대해 리듀서 함수(콜백에 정의됨)를 실행하고 끝에 단일 값을 반환합니다.

얼마나 보편적으로 적용될 수 있는지로 인해 이 방법을 다룰 가치가 있습니다.

const myArray = [20, 23, 27];

let minElement = myArray.reduce((a, b) => {
    return Math.min(a, b);
});

console.log(minElement);

최소 및 최대 요소 찾기 대다()

XNUMXD덴탈의 apply() 메소드는 주어진 함수를 호출하는 데 사용됩니다. this 값 및 인수 배열. 이것은 우리가 배열을 Math.min() 정적 함수:

const myArray = [20, 23, 27];

let minElement = Math.min.apply(Math, myArray);
console.log(minElement);

let minElement = Math.min.apply(null, myArray);
console.log(minElement);

표준 루프로 최소 및 최대 요소 얻기 – 가장 빠른 성능

루프는 JavaScript에서 조건에 따라 반복되는 작업을 수행하는 데 사용됩니다. 조건 반환 true or false. 정의된 조건이 반환될 때까지 루프가 계속 실행됩니다. false. 우리의 경우 다음을 사용할 것입니다. for 루프 – 일반적으로 코드를 여러 번 실행하는 데 사용됩니다.

최소 요소 가져오기

먼저 최소 요소를 배열의 첫 번째 요소로 초기화합니다. 그런 다음 루프를 통해 전체 어레이 다른 요소의 값이 현재 최소값보다 작은지 확인하기 위해 – 그렇다면 새로운 최소값을 현재 요소의 값으로 설정합니다.

const myArray = [20, 23, 27];

let minElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
    if (myArray[i] < minElement) {
        minElement = myArray[i];
    }
}

console.log(minElement);

최대 요소 가져오기

먼저 최대 요소를 배열의 첫 번째 요소로 초기화합니다. 그런 다음 다른 요소가 초기화된 요소보다 큰지 확인하기 위해 전체 배열을 반복하여 이를 대체합니다.

const myArray = [20, 23, 27];

let maxElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
    if (myArray[i] > maxElement) {
        maxElement = myArray[i];
    }
}

console.log(maxElement);

성능 벤치마크

JS Benchmark를 사용하여 배열의 100개에서 1000000개 요소까지 다양한 입력에 대해 이러한 모든 접근 방식을 실행했습니다. 성능은 상대적이며 어레이의 길이에 따라 다릅니다.

• 작은 어레이(100)의 경우, reduce() 방법이 가장 잘 수행되었고 표준 루프, 스프레드 연산자, 그 다음이 그 다음이었습니다. apply() 방법. 준우승은 성능면에서 거의 동일합니다.
• 중간 어레이(1000)의 경우 표준 루프가 가장 잘 수행되며 그 다음이 reduce(), 스프레드 연산자 및 apply() 방법. 표준 루프보다 훨씬 빠름 reduce() 여기에서 차례로 XNUMX위보다 상당히 빠릅니다.
• 매우 큰 배열(1000000)의 경우 표준 루프는 표준 루프의 경우가 매우 강력할 정도로 다른 모든 방법보다 성능이 뛰어납니다.

표준 루프는 확장성이 뛰어나고 작은 어레이에 적용될 때만 경쟁에서 지게 됩니다. 몇 가지 항목 또는 더 작은 배열을 처리하는 경우 모든 방법이 상당히 매끄럽습니다. 어레이가 클수록 표준 루프를 사용하는 이점이 커집니다.

참고 : 벤치마크를 액면 그대로 받아들이지 마십시오! 그들은 다른 브라우저 버전과 JS 엔진을 사용하여 다른 컴퓨터에서 실행됩니다. 애플리케이션에서 테스트하고 고유한 사용 사례에 대해 확장 가능하고 가장 빠른 옵션을 선택하십시오.

결론

이 가이드에서는 JavaScript에서 배열의 최소 및 최대 요소를 가져오는 방법을 살펴보았습니다. 우리는 Math.min() 과 Math.max() 메소드, 스프레드 연산자, reduce() 방법, apply() 메서드를 통해 요소를 가져오는 사용자 지정 접근 방식을 작성했습니다. for 고리.

마지막으로, 우리는 결과를 벤치마킹하여 작은 배열에 어떤 접근 방식을 사용하는지는 중요하지 않지만 큰 배열에는 표준 for 루프를 사용하는 경향이 있다는 점에 주목했습니다.