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

Jad Joubran

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

Z tego artykułu dowiesz się, jak działa ta metoda i jak za jej pomocą zaktualizować tablicę. bez mutowania pierwotnej tablicy.

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

Metoda Array.prototype.with(index, value) zwraca kopię tablicy wzywano przy użyciu numeru index ustawionego na nowy podany przez Ciebie value.

Poniższy przykład zawiera tablicę przedziałów wiekowych. Chcesz utworzyć nową kopię dokumentu tablicę, 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)

Analiza kodu: ages.with(...) zwraca kopię zmiennej ages. bez modyfikowania pierwotnej tablicy. Parametr ages.with(1, …) zastępuje drugi element (index = 1). ages.with(1, 16) przypisuje drugi element użytkownikowi 16.

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

Jest to przydatne, gdy chcesz mieć pewność, że oryginalna tablica pozostaje nie zmienia się, a w tym artykule opisujemy niektóre z nich. Na razie zobacz, co by się wydarzyło, gdyby użyłeś(-aś) zapisu w nawiasach:

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 zmieniła się również zmienna ages. To wszystko bo gdy przypiszesz ages = newAges, JavaScript nie skopiuje tablicy, ale tworzy odwołanie do innej tablicy. Każda zmiana w jednej z nich ponieważ oba wskazują tę samą tablicę.

tablica.prototype.with() i niezmienność

Niezmienność leży u podstaw wielu bibliotek i platform frontendu. kilka: React (i redux) i Vue.

Ponadto inne biblioteki i platformy nie muszą wymagać niezmienności, zachęty do poprawy skuteczności: Angular i Lit

Deweloperzy często musieli więc używać innych metod, które zwracały kopie tablic. z czytelnością 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 Codepena, który pokazuje, jak używać elementu .with() w React w połączeniu za pomocą funkcji useState w celu stałego aktualizowania tablicy elementów:

Metoda .with() zwraca kopię tablicy, więc można utworzyć łańcuch wielu .with() wywołań, a nawet innych metod tablicy. Poniższy przykład pokazuje, zwiększenie drugiej i trzeciej grupy wiekowej 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 stałe

Ostatnio współdziałają ze sobą 3 inne metody:

• Array.prototype.toReversed() co odwraca tablicę bez mutacji funkcji oryginalnej tablicy.
• Array.prototype.toSorted() który sortuje tablicę bez argumentu przez mutowanie pierwotnej tablicy.
• Array.prototype.toSpliced() który działa jak .splice(), ale bez mutacji pierwotnej tablicy.

Według MDN te 3 metody są kopiowane i jego odpowiedniki. Tych metod można też używać, gdy oczekiwana jest niezmienność lub

Podsumowując, stałe aktualizacje można łatwiej przeprowadzać w JavaScriptu za pomocą jednej z 4 metod przedstawionych w tym artykule. Konkretnie: metoda .with() ułatwia aktualizację pojedynczego elementu tablicy bez mutowania pierwotnej tablicy.