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

9557 단어 javascript
이전 기사에서는 finding the min/max from an array of arrays 에 대해 살펴보았습니다. 개체 배열로 동일한 작업을 수행하는 방법을 살펴보겠습니다.

배열은 다음과 같습니다.

const users = [
  { name: 'Nicole', age: 31 },
  { name: 'Chris', age: 33 },
  { name: 'Yaatree', age: 2 },
  { name: 'Sanne', age: 29 },
];


이 배열을 사용하여 연령이 가장 높은 사용자와 가장 낮은 사용자를 찾고자 합니다.
그러나 나이뿐만 아니라 전체 개체를 반환합니다.

우리가 어떻게 그것을 달성할 수 있는지 봅시다.

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



reduce method을 사용하여 배열에서 하나의 항목을 추출합니다. reduce의 멋진 점은 초기 값이 선택 사항이므로 지금은 생략할 수 있다는 것입니다.

const highest = users.reduce((previous, current) => {
  return current.age > previous.age ? current : previous;
});

console.log('highest', highest);
// { name: 'Chris', age: 33 }


이 축소 방법 내에서 각 항목을 반복합니다. 각 항목에 대해 현재 항목의 연령 속성이 이전보다 높은지 평가합니다.
이 경우 새 제품을 반환합니다. 그렇지 않으면 우리는 이전 것을 계속 반환합니다.

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

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

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



    동일한 접근 방식을 사용하여 연령이 가장 낮은 사람을 찾을 수 있습니다.

    이를 위해서는 < 화살표를 > 화살표로 변환해야 합니다.

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


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

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

    속기 함수 작성



    우리는 중괄호를 사용하고 객체를 반환함으로써 위의 예에서 매우 명시적입니다.

    그러나 우리는 한 줄만 가지고 있으므로 다음과 같이 속기 함수로 작성할 수 있습니다.

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


    훨씬 짧지만 한 번에 가독성이 어느 정도 필요합니다.

    빈 배열 다루기



    하지만 빈 배열을 전달하면 어떻게 될까요?

    다음 오류가 표시됩니다. TypeError: Reduce of empty array with no initial value .

    이는 reduce의 초기 값을 생략했기 때문에 발생합니다.
    이를 수정하기 위해 초기 값을 다시 가져올 수 있습니다.

    우리의 경우 빈 개체를 반환하지 않도록 null로 설정하려고 합니다.

    const users = [];
    
    const highest = users.reduce((previous, current) => {
      return previous?.age > current.age ? previous : current;
    }, null);
    
    console.log('highest', highest);
    // null
    
    // Or the shorthand:
    
    const highest = users.reduce(
      (prev, cur) => (prev?.age > cur.age ? prev : cur),
      null
    );
    


    이것이 작동하려면 이전/현재 확인을 바꿔야 한다는 사실을 발견했을 수도 있습니다.
    이것은 다른 값이 항상 현재 값이 되도록 하기 위해 필요합니다.

    개체 배열에서 최소값/최대값을 찾는 놀이를 할 수 있는 CodePen 데모를 만들었습니다.



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



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

    좋은 웹페이지 즐겨찾기