JavaScript는 배열 배열에서 최소/최대를 찾습니다.

8170 단어 javascript
사용자 배열이 있지만 각 사용자도 배열이라고 가정해 보겠습니다.

예를 들어 다음 데이터를 사용합니다.

const users = [
  ['Nicole', 31],
  ['Chris', 33],
  ['Yaatree', 2],
  ['Sanne', 29],
];


보시다시피 각 사용자 배열에는 두 개의 개체가 있습니다.
  • 사용자 이름
  • 사용자의 나이

  • 연령이 가장 높은 사용자와 가장 낮은 사용자를 빠르게 반환하려면 어떻게 해야 합니까?

    함께 알아봅시다.

    배열 배열에서 가장 높은 값 찾기



    먼저 데이터를 추출하는 방법을 찾아야 하는데 reduce method이 좋은 방법이라고 생각했습니다.

    이 방법을 사용하는 요령은 초기 값을 전달하지 않는 것입니다. 이렇게 하면 실제 항목 배열에서만 계산을 시작할 수 있습니다.

    const highest = users.reduce((previous, current) => {
      return current[1] > previous[1] ? current : previous;
    });
    
    console.log(highest);
    // [ 'Chris', 33 ]
    


    이것이 어떻게 작동하는지 봅시다.

    각 배열 항목에 대한 reduce 함수 루프는 두 개의 인수를 사용합니다.
  • 이전: 이전 누적 값
  • current: 현재 반복되는 항목

  • 그런 다음 현재 항목 속성1(나이를 의미)이 현재 항목 속성보다 큰지 확인합니다.
    이 경우 현재 항목이 더 높기 때문에 반환합니다. 그렇지 않으면 이전 값에 있던 값을 반환합니다.

    루프에서 다음과 같이 작동합니다.
  • 현재 = Nicole 아무것도 존재하지 않으므로 Nicole이 가장 높아짐
  • current = Chris, Chris의 나이가 Nicole보다 높으므로 Chris가 반환값이 됨
  • current = Yaatree, Chris가 더 높으므로 계속해서 Chris를 가장 높은 것으로 반환
  • 현재 = Sanne, Chris는 여전히 높으므로 Chris
  • 유지

    우리는 Chris가 가장 높은 가치로 끝나는 것입니다.

    배열 배열에서 가장 낮은 값 찾기



    그러나 이제 동일한 접근 방식을 취하지만 더 낮은 연령을 찾으려면 어떻게 해야 합니까?

    동일한 감소를 사용할 수 있지만 화살표를 바꿀 수 있습니다.

    const lowest = users.reduce((previous, current) => {
      return current[1] < previous[1] ? current : previous;
    });
    
    console.log(lowest);
    // [ 'Yaatree', 2 ]
    

    >< 로 전환했습니다.

    다시 한 번 더 구두로 설명하자면 다음과 같은 작업 흐름입니다.
  • 현재 = 니콜, 아무것도 존재하지 않으니 니콜이 최하위가 됨
  • current = Chris, Nicole이 더 낮으니 계속 Nicole을 가장 낮은
  • 으로 돌려
  • current = Yaatree, Yaatree가 낮으므로 Yaatree
  • 를 반환
  • current = Sanne, Yaatree가 낮으니 Yaatree
  • 를 반환

    결과는 Yaatree를 가장 낮은 값으로 반환하는 것입니다.

    축소 방법 최적화



    당신이 읽기 쉽도록 reduce 함수를 작성하기로 결정했습니다.

    그러나 이것은 불필요하며 속기 기능을 사용할 수 있습니다.

    const highest = users.reduce((prev, cur) => (cur[1] > prev[1] ? cur : prev));
    
    const lowest = users.reduce((prev, cur) => (cur[1] < prev[1] ? cur : prev));
    


    이것은 읽기가 조금 더 어려울 수 있지만, 직접 반환할 때 반환 문 사용을 생략하는 줄바꿈 중괄호를 제거합니다.

    빈 배열 다루기



    그러나 배열이 비어 있으면 어떻게 됩니까?

    다음 오류가 발생합니다. TypeError: Reduce of empty array with no initial value .

    이는 reduce 메소드에 초기 값을 제공하지 않았기 때문입니다.
    대체할 빈null 값을 추가할 수 있습니다.

    감소가 작동하려면 이전 값부터 평가해야 합니다. 이런 식으로 다른 수익은 항상 현재입니다.

    const users = [];
    
    const highest = users.reduce((previous, current) => {
      return previous?.[1] > current[1] ? previous : current;
    }, null);
    
    console.log(highest);
    // null
    


    이 기사를 즐겼기를 바랍니다. 다음 CodePen에서 이 기능을 자유롭게 사용해 보십시오.



    읽어주셔서 감사합니다. 연결해 봅시다!



    제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나

    좋은 웹페이지 즐겨찾기