>웹 프론트엔드 >JS 튜토리얼 >JavaScript 배열 방법, 세부 내용, 부분

JavaScript 배열 방법, 세부 내용, 부분

Barbara Streisand
Barbara Streisand원래의
2025-01-22 02:35:08456검색

JavaScript Array Methods, Under the Hood, Part

이 기사에서는 JavaScript 배열 방법에 대한 탐구를 계속합니다. 이 시리즈를 처음 접하는 경우 여기에서 1부를 찾을 수 있습니다. 몇 가지 일반적인 배열 방법(Math.max(), Math.min(), .reverse(), .filter().reduce())을 살펴보고 for 루프를 사용하여 동일한 결과를 얻는 방법을 보여줍니다. 이 비교를 통해 이러한 방법이 어떻게 작동하는지 명확히 알 수 있을 것입니다.


Math.min()Math.max()

이러한 방법은 각각 집합에서 가장 작은 숫자와 가장 큰 숫자를 찾습니다. 숫자를 인수로 직접 제공하거나 스프레드 구문으로 배열을 사용할 수 있습니다.

<code class="language-javascript">// FIND THE MINIMUM VALUE IN AN ARRAY:
// Using a 'for' loop:
function findMinValueInArray(array) {
  let min = array[0];
  for (let i = 1; i < array.length; i++) {
    if (array[i] < min) {
      min = array[i];
    }
  }
  return min;
}
findMinValueInArray([33, -5544, 66, 55]); // returns: -5544

// Using Math.min():
function findMinValueInArray(array) {
  return Math.min(...array);
}
findMinValueInArray([33, -5544, 66, 55]); // returns: -5544</code>

Math.min()은 확실히 더 간결하고 오류가 덜 발생합니다. Math.max()은 비슷하게 작동하지만 for 루프 구현이 약간 다릅니다.

<code class="language-javascript">// FIND THE MAXIMUM VALUE IN AN ARRAY:
// Using a 'for' loop:
function findMaxValueInArray(array) {
  let max = array[0];
  for (let i = 1; i < array.length; i++) {
    let currentNum = array[i];
    if (currentNum > max) {
      max = currentNum;
    }
  }
  return max;
}
findMaxValueInArray([33, -5544, 66, 55]); // returns: 66

// Using Math.max():
function findMaxValueInArray(array) {
  return Math.max(...array);
}
findMaxValueInArray([33, -5544, 66, 55]); // returns: 66</code>

`.reverse()`

이 방법은 배열 요소의 순서를 반대로 바꾸어 원래 배열을 수정합니다.

<code class="language-javascript">// REVERSE ARRAY ELEMENTS
// Using a 'for' loop:
function reverseArray(array) {
  let reversedArray = [];
  for (let i = array.length - 1; i >= 0; i--) {
    reversedArray.push(array[i]);
  }
  return reversedArray;
}
reverseArray([1, 2, 3, 4, 5]); // returns: [5, 4, 3, 2, 1]

// Using .reverse():
function reverseArray(array) {
  return array.reverse();
}
reverseArray([1, 2, 3, 4, 5]); // returns: [5, 4, 3, 2, 1]</code>

내장된 메소드가 훨씬 더 효율적이고 읽기 쉽습니다. for 루프 접근 방식을 사용하려면 새 배열을 만들고 요소를 수동으로 푸시해야 하므로 오류 위험이 높아집니다.

`.filter()`

이 메소드는 제공된 테스트 함수를 통과하는 요소만 포함하는 새 배열을 생성합니다.

각각 balance 속성이 있는 일련의 은행 계좌를 생각해 보겠습니다. 잔액이 0인 계정을 필터링해 드립니다.

<code class="language-javascript">// Using a 'for' loop:
function getClientWithNoMoney(array) {
  let acctsWithZeroBalance = [];
  for (let account of array) {
    if (account.balance === 0) {
      acctsWithZeroBalance.push(account);
    }
  }
  return acctsWithZeroBalance;
}

// Using .filter():
function getClientWithNoMoney(array) {
  return array.filter((account) => account.balance === 0);
}</code>

.filter()은 훨씬 더 깔끔하고 간결한 솔루션을 제공합니다. for 루프에는 수동 배열 생성과 요소 푸시가 필요하므로 실수할 가능성이 더 높습니다.

`.reduce()`

.reduce() 함수를 배열 요소에 누적하여 적용하여 단일 값을 생성합니다.

간단한 예는 배열 요소를 합산하는 것이지만 평균을 계산해 보겠습니다.

<code class="language-javascript">// With 'for' loop:
function getAverage(array) {
  let sum = 0;
  for (let i = 0; i < array.length; i++) {
    sum += array[i];
  }
  return sum / array.length;
}

// Using .reduce():
function getAverage(array) {
  return array.reduce((cv, acc) => {
      return cv + acc;
    }) / array.length;
  );
}
getAverage([10, 20, 30, 40]); // returns: 25</code>

여기서 코드 절감 효과가 극적이지는 않지만 .reduce() for 루프 접근 방식에 비해 가독성이 향상되고 오류 가능성이 줄어듭니다.


이 예에서는 내장된 JavaScript 배열 방법을 사용할 때의 이점을 보여줍니다. for 루프는 기본적인 제어 기능을 제공하지만 이 방법은 간결성, 가독성 및 오류 가능성 감소를 제공합니다. 다른 배열 방법에 대해 궁금한 점이 있으면 댓글을 남겨주세요. 이 기사가 도움이 되었다면 공유해 주세요! 이 시리즈의 1부는 여기에서 볼 수 있습니다.

읽어주셔서 감사합니다!

원본은 2023년 2월 13일 일반 영어로 Medium for JavaScript에 게시되었습니다.

위 내용은 JavaScript 배열 방법, 세부 내용, 부분의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.