Aktualizacje tablicy stałej za pomocą metody Array.prototype.with

Jad Joubran

Świętujemy: ta funkcja internetowa jest teraz dostępna we wszystkich 3 głównych silnikach przeglądarek.

Przeglądarki zyskały niedawno nową metodę współdziałania, którą można wywoływać w przypadku tablic: Array.prototype.with().

Browser Support

• 110
• 110
• 115
• 16

Source

Z tego artykułu dowiesz się, jak działa ta metoda i jak jej używać do aktualizowania tablicy bez modyfikowania oryginalnej tablicy.

Wprowadzenie do Array.prototype.with(index, value)

Metoda Array.prototype.with(index, value) zwraca kopię tablicy, na której jest wywoływana, z wartością index ustawioną na nową wartość value podaną przez użytkownika.

Poniższy przykład pokazuje tablicę z wiekami. Chcesz utworzyć nową kopię tablicy, zmieniając drugi wiek z 15 na 16:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

Rozkład kodu: ages.with(...) zwraca kopię zmiennej ages bez modyfikowania oryginalnej tablicy. ages.with(1, …) zastępuje drugi element (index = 1). ages.with(1, 16) przypisuje drugi element do 16.

W ten sposób udało Ci się utworzyć nową kopię tablicy ze zmianą.

Jest to przydatne, gdy chcesz mieć pewność, że oryginalna tablica pozostanie niezmieniona. W tym artykule znajdziesz kilka przykładów zastosowań tej metody. Ale na razie zobacz, co by się stało, gdybyś użył notacji nawiasowej:

const ages = [10, 15, 20, 25];

const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)

Jak widać, w tym przykładzie zmodyfikowano też zmienną ages. Dzieje się tak, ponieważ podczas przypisywania ages = newAges JavaScript nie kopiuje tablicy, ale tworzy odniesienie do innej tablicy. Wszelkie zmiany wprowadzone w jednym z nich będą miały wpływ na drugi, ponieważ oba wskazują tę samą tablicę.

Metoda Array.prototype.with() i niezmienność

Niezmienność jest podstawą wielu bibliotek i platform frontendowych, np. React (i Redux) oraz Vue.

Inne biblioteki i frameworki nie wymagają niezmienności, ale zachęcają do niej ze względu na lepszą wydajność: Angular i Lit.

Dlatego deweloperzy często musieli używać innych metod, które zwracały kopie tablic, co pogarszało czytelność kodu:

const ages = [10, 15, 20, 25];

const newAges = ages.map((age, index) => {
    if (index === 1) {
         return 16;
    }
    return age;
});

console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)

Oto przykład w Codepen, jak można używać funkcji .with() w React w połączeniu z useState, aby niezmiennie aktualizować tablicę elementów:

Metoda .with() zwraca kopię tablicy, więc możesz łączyć ze sobą wiele wywołań .with() lub nawet inne metody tablicowe. Poniższy przykład pokazuje zwiększanie wartości drugiego i trzeciego wieku z tablicy:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)

console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

Inne nowe metody niezmienne

Niedawno wprowadziliśmy interoperacyjność w przypadku 3 innych metod:

• Array.prototype.toReversed() która odwraca tablicę bez zmiany oryginalnej tablicy.
• Array.prototype.toSorted() która sortuje tablicę bez modyfikowania oryginalnej tablicy.
• Array.prototype.toSpliced(), która działa podobnie jak .splice(), ale nie zmienia oryginalnej tablicy.

Według MDN te 3 metody są wersjami kopiującymi swoich odpowiedników. Metody te można też stosować w przypadkach, gdy oczekiwana lub preferowana jest niezmienność.

Podsumowując, niezmienne aktualizacje można łatwiej przeprowadzać w JavaScript za pomocą jednej z 4 metod przedstawionych w tym artykule. W szczególności metoda .with() ułatwia aktualizowanie pojedynczego elementu tablicy bez modyfikowania oryginalnej tablicy.