Array.
Zwraca kopię tablicy, w której element o podanym indeksie ma nową wartość.
- Zwraca
- Nową tablicę z podmienionym elementem.
- Zmienia oryginał
- Nie
Przykład
#const scores = [70, 85, 90]
const corrected = scores.with(1, 95)
console.log(corrected)
console.log(scores)
console.log(scores.with(-1, 100))Definicja i zastosowanie
#Metoda with(index, value) to niemutujący odpowiednik przypisania array[index] = value. Tworzy kopię tablicy, podmienia w niej jeden element i zwraca wynik. Oryginał zostaje nietknięty.
Obsługuje indeksy ujemne, tak jak at(): with(-1, x) zmienia ostatni element kopii. Indeks spoza zakresu nie wydłuża tablicy, tylko rzuca błąd RangeError, co chroni przed przypadkowym tworzeniem pustych miejsc.
Należy do rodziny metod kopiujących razem z toSorted(), toReversed() i toSpliced(). Najbardziej przydaje się tam, gdzie dane powinny być niezmienne: w stanie komponentu React, w reducerach Redux albo w historii zmian z funkcją „cofnij”.
Składnia
#array.with(index, value)Parametry
#index
liczba całkowita
Pozycja elementu do podmiany. Wartości ujemne liczą od końca.value
dowolna wartość
Nowa wartość elementu.
Więcej przykładów
#const days = ['pon', 'wt', 'śr']
try {
days.with(5, 'sob')
} catch (error) {
console.log(error.name)
}
const copy = [...days]
copy[5] = 'sob'
console.log(copy.length)Zwykłe przypisanie do indeksu 5 wydłużyło kopię do sześciu elementów i zostawiło w niej puste miejsca. with() w takiej sytuacji zgłasza błąd.
const todos = [
{ title: 'Quiz z HTML', done: false },
{ title: 'Projekt CSS', done: false }
]
const updated = todos.with(0, { ...todos[0], done: true })
console.log(updated[0])
console.log(todos[0])Obsługa przeglądarek
#Szeroko dostępne · od 2023 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Aby zmienić jedno pole obiektu w tablicy, połącz
with()ze spreadem:list.with(i, { ...list[i], done: true }). - Nie wywołuj
with()w pętli, żeby zmienić wiele elementów. Każde wywołanie kopiuje całą tablicę, więc lepsze będzie jednomap().
Powiązane hasła
#- Array.prototype.at()Zwraca element o podanym indeksie, także liczonym od końca.
- Array.prototype.toReversed()Zwraca nową tablicę z elementami w odwrotnej kolejności, bez zmiany oryginału.
- Array.prototype.toSpliced()Usuwa, wstawia lub zastępuje elementy w kopii tablicy. Oryginał zostaje bez zmian.
- Array.prototype.map()Tworzy nową tablicę z wynikami wywołania funkcji dla każdego elementu.
- Spread (...)Składnia spread rozkłada tablicę, napis lub obiekt na pojedyncze elementy: do kopiowania, łączenia i przekazywania argumentów.
Widzisz błąd albo brakuje przykładu? Napisz do nas.