Niedawno przeglądarki zyskały nową interoperacyjność, 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ą aktualizować tablicę bez mutowania oryginalnej tablicy.
Wprowadzenie do: Array.prototype.with(index, value)
Metoda Array.prototype.with(index, value) zwraca kopię tablicy, do której się odwołuje, z parametrem index ustawionym na nowy podany przez Ciebie parametr value.
Przykład poniżej pokazuje tablicę wieku. Chcesz utworzyć nową kopię tablicy i zmienić drugi wiek z 15 na 16 lat:
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)
Podział kodu: ages.with(...) zwraca kopię zmiennej ages bez modyfikowania pierwotnej 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 z modyfikacją.
Jest to bardzo przydatne, gdy chcesz mieć pewność, że pierwotna tablica pozostaje bez zmian. W tym artykule opisano niektóre przypadki użycia tej funkcji. Na razie przyjrzyjmy się temu, co by się stało, gdyby używali nawiasów kwadratowych:
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ć, zmienna ages również została zmodyfikowana w tym przykładzie. Dzieje się tak, ponieważ gdy przypiszesz ages = newAges, JavaScript nie kopiuje tablicy, ale tworzy odwołanie do innej tablicy. Każda zmiana w jednej z nich wpłynie
na drugą, ponieważ oba będą wskazywać tę samą tablicę.
tablica.prototype.with() i niezmienność
W wielu bibliotekach i platformach frontendu niezmienność leży u podstaw m.in. React (i redux) i Vue.
Poza tym inne biblioteki i platformy niekoniecznie wymagają niezmienności, ale zachęcaj do tego, aby zwiększyć wydajność. Są to: Angular i Lit
Deweloperzy często musieli więc korzystać z innych metod, które zwracały kopie tablic, co zmniejszał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ładowy kod Codepen, który pokazuje, jak można wykorzystać obiekt .with() w React w połączeniu z metodą useState, by trwale aktualizować tablicę elementów:
Metoda .with() zwraca kopię tablicy, więc możesz utworzyć łańcuch wielu wywołań funkcji .with(), a nawet inne metody tablicy. Przykład poniżej 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
Niedawno zaczęły działać 3 inne metody:
Array.prototype.toReversed(), który odwraca tablicę bez mutacji pierwotnej tablicy.Array.prototype.toSorted(), który sortuje tablicę bez mutacji pierwotnej tablicy.Array.prototype.toSpliced(), który działa jak.splice(), ale nie modyfikuje oryginalnej tablicy.
Według MDN te 3 metody są kopiowaniem wersji swoich odpowiedników. Metody tych można też używać tam, gdzie niezmienność jest oczekiwana lub preferowana.
Podsumowując, stałe aktualizacje można łatwiej uzyskać w JavaScript za pomocą jednej z 4 metod opisanych w tym artykule. W szczególności metoda .with() ułatwia aktualizowanie pojedynczego elementu tablicy bez mutowania oryginalnej tablicy.