Im Juli 2023 veröffentlichte ECMAScript mehrere neue Spezifikationen für JavaScript. Zu den Funktionen gehören neue Array-Methoden, die das vorhandene Array nicht verändern. In diesem Blog werden wir über drei davon sprechen (einen aus dem Jahr 2024), die Sie kennen müssen, wenn Sie über die neuesten Trends in Web und JavaScript auf dem Laufenden bleiben möchten !

Array.toSorted()

Das ursprüngliche Array.sort() sortiert Elemente eines Arrays an Ort und Stelle. Manchmal möchten Sie dieses Verhalten möglicherweise nicht. Beim Programmieren empfiehlt es sich im Allgemeinen, die Änderung bestehender Werte zu vermeiden und stattdessen eine neue Version zurückzugeben.

Array.toSorted() löst dieses Problem, indem es ein neues Array mit den sortierten Elementen zurückgibt, wie in der Callback-Funktion beschrieben!

Diese Funktion gefällt mir besonders gut, da ich sie bereits in meinem Code verwendet habe, lange bevor VSCode und Webbrowser die richtige Unterstützung dafür hatten!

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

Array.toReversed()

Array.toReversed() ist eine neue Ergänzung, die eine unveränderliche Möglichkeit bietet, ein Array umzukehren. Im Gegensatz zu Array.reverse(), das das ursprüngliche Array ändert, gibt Array.toReversed() eine umgekehrte Kopie des Arrays zurück, wobei das Original unverändert bleibt.

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() bietet eine zerstörungsfreie Möglichkeit, Elemente innerhalb eines Arrays zu entfernen, zu ersetzen oder hinzuzufügen. Herkömmlich ändert Array.splice() das Array direkt, aber Array.toSpliced() erstellt ein neues Array mit den angewendeten Änderungen, wobei das ursprüngliche Array unverändert bleibt. Dies kann hilfreich sein, wenn Sie Änderungen anwenden müssen, ohne die Quelldaten zu beeinträchtigen.

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]

Object.groupBy()

Diese Methode wurde offiziell in ES2024 veröffentlicht, war aber vorher noch mit Polyfills verfügbar und war bereits zu einer späteren Stufe von ECMAScript fortgeschritten.

Object.groupBy() gruppiert Elemente eines bestimmten Arrays basierend auf einer bestimmten Objekteigenschaft. Dies ist äußerst nützlich und kann sehr praktisch sein, wenn Sie eine bestimmte Liste von Objekten gruppieren und diese dann entsprechend in einer Schlüssel-Wert-Struktur durchlaufen möchten. Eine interessante Tatsache bei dieser Methode ist, dass sie aufgrund von Webkompatibilitätsproblemen nicht als Prototypmethode eines Arrays implementiert wurde. (Viele ältere JavaScript-Bibliotheken implementierten bereits Code innerhalb des Namensraums Array.prototype.group(), deshalb!)

BONUS: Implementieren Sie Ihr eigenes Object.groupBy(), um nach mehreren Elementen zu gruppieren

Möglicherweise müssen Sie auch nach mehreren Eigenschaften gruppieren. Das Original Object.groupBy() gruppiert nur auf einer Ebene.

Implementieren Sie den folgenden Code in Ihrem Projekt, um Elemente nach mehreren Eigenschaften zu gruppieren!

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;
}

Beispiel:

const data = [
  { country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' },
  { country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' },
  { country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' },
  { country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' },
  { country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' },
]

let groupedData = multiLevelGroupBy(data, [
  item => item.country,
  item => item.state,
  item => item.city
]);

console.log(groupedData);

/* Expected Output: */
{
  USA: {
    California: {
      'Los Angeles': [{ country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' }],
      'San Francisco': [{ country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' }]
    },
    New York: {
      'New York City': [{ country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' }]
    }
  },
  Canada: {
    Ontario: {
      Toronto: [{ country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' }]
    },
    Quebec: {
      Montreal: [{ country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' }]
    }
  }
}

Das Ende!

Wenn Sie es bis zum Ende dieses Artikels geschafft haben, vielen Dank fürs Lesen! ?