이 새로운 JavaScript 메소드는 게임 체인저입니다!

2023년 7월 ECMAScript는 JavaScript에 대한 몇 가지 새로운 사양을 출시했습니다. 일부 기능에는 기존 배열을 수정하지 않는 새로운 Array 메서드가 포함되어 있습니다. 이번 블로그에서는 웹과 자바스크립트의 최신 트렌드를 알고 싶다면 꼭 알아야 할 세 가지(2024년의 한 가지)에 대해 이야기하겠습니다. !

Array.toSorted()

원본 Array.sort()는 배열 요소를 제자리 정렬합니다. 때로는 이 동작을 원하지 않을 수도 있습니다. 프로그래밍에서는 일반적으로 기존 값을 수정하지 않고 새 버전을 반환하는 것이 좋습니다.

Array.toSorted()는 콜백 함수에 설명된 대로 정렬된 요소가 포함된 새 배열을 반환하여 이 문제를 해결합니다!

VSCode와 웹 브라우저가 이 기능을 제대로 지원하기 오래 전에 이미 내 코드에서 이 기능을 사용하기 시작했기 때문에 이 기능을 특히 좋아합니다!

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

Array.toReversed()

Array.toReversed()는 배열을 뒤집는 불변의 방법을 제공하는 새로운 추가 기능입니다. 원본 배열을 수정하는 Array.reverse()와 달리 Array.toReversed()는 원본을 변경하지 않고 배열의 역방향 복사본을 반환합니다.

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Array.ToSpliced()

Array.toSpliced()는 배열 내의 요소를 제거, 교체 또는 추가하는 비파괴적인 방법을 제공합니다. 전통적인 Array.splice()는 배열을 직접 수정하지만 Array.toSpliced()는 변경 사항이 적용된 새 배열을 생성하고 원래 배열은 변경되지 않은 채로 둡니다. 이는 소스 데이터에 영향을 주지 않고 변경 사항을 적용해야 할 때 유용할 수 있습니다.

let numbers = [1, 2, 3, 4, 5];
let splicedNumbers = numbers.toSpliced(1, 2, 6, 7);
console.log(splicedNumbers); // Output: [1, 6, 7, 4, 5]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

객체.그룹별()

이 방법은 ES2024에서 공식적으로 출시되었지만 이전에도 폴리필을 사용하여 사용할 수 있었고 이미 ECMAScript의 이후 단계로 발전했습니다.

Object.groupBy()는 특정 개체 속성을 기반으로 특정 배열의 항목을 그룹화합니다. 이는 매우 유용하며 특정 개체 목록을 그룹화한 다음 키-값 구조에 따라 그에 따라 반복하려는 경우 매우 유용할 수 있습니다. 이 메서드에 대한 흥미로운 사실은 웹 호환성 문제로 인해 배열의 프로토타입 메서드로 구현되지 않았다는 것입니다. (많은 오래된 JavaScript 라이브러리가 이미 Array.prototype.group() 네임스페이스 내에 일부 코드를 구현하고 있었기 때문에 그렇습니다!)

보너스: 여러 요소별로 그룹화하기 위해 자체 Object.groupBy() 구현

결국에는 여러 속성별로 그룹화해야 할 수도 있습니다. 원래 Object.groupBy()는 한 수준에서만 그룹화됩니다.

여러 속성으로 요소를 그룹화하려면 프로젝트에 아래 코드를 구현하세요!

function multiLevelGroupBy(array, criteria) {
  // Base case: if no criteria are left, return the array itself
  if (criteria.length === 0) return array;

  // Get the first criterion
  const [firstCriterion, ...remainingCriteria] = criteria;

  // Group by the first criterion
  const grouped = array.reduce((acc, item) => {
    const key = firstCriterion(item);
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  // For each group, recursively apply the remaining criteria
  for (let key in grouped) {
    grouped[key] = multiLevelGroupBy(grouped[key], remainingCriteria);
  }

  return grouped;
}

예:

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

끝!

이 글을 끝까지 읽어주셨다면, 읽어주셔서 정말 감사드립니다! ?

위 내용은 이 새로운 JavaScript 메소드는 게임 체인저입니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!