CodeBase | Frontend Chat

🧬 Иммутабельность из коробки: toSorted(), toSpliced() и with() Сколько раз вы ловили трудноуловимые баги в React или Redux из-за того, что методы sort(), reverse() или splice() незаметно мутируют оригинальный массив? Раньше, чтобы обновить состояние, нам приходилось плодить поверхностные копии через спред-оператор. // ❌ Старая школа (много шума) const sortedUsers = [...users].sort((a, b) => a.age - b.age); // А замена элемента по индексу вообще выглядела как пытка: const updatedUsers = [...users]; updatedUsers[index] = newUser; В стандарте ES2023 (Baseline 2023) JavaScript наконец-то получил нативные иммутабельные методы массивов. Они делают то же самое, но возвращают новый массив, оставляя оригинал нетронутым. 🚀 Как пишем теперь: 1. Сортировка и разворот // ✅ Оригинал цел, получаем новый массив const sorted = users.toSorted((a, b) => a.age - b.age); const reversed = users.toReversed(); 2. Удаление/вставка (вместо splice) const months = ["Jan", "Mar", "Apr", "May"]; // Вставляем "Feb" на индекс 1 (ничего не удаляя) const fixedMonths = months.toSpliced(1, 0, "Feb"); // ["Jan", "Feb", "Mar", "Apr", "May"] 3. 🔥 Метод with() - киллер-фича для React Заменяет элемент по индексу без мутаций. Идеально для обновления конкретного элемента в массиве состояния. const state = ['apple', 'banana', 'cherry']; // Меняем 'banana' на 'mango' const newState = state.with(1, 'mango'); // ['apple', 'mango', 'cherry'] 💡Методы работают не только с массивами, но и с TypedArrays (например, Uint8Array). А метод with() отлично справляется с отрицательными индексами - arr.with(-1, newItem) заменит последний элемент массива без вычисления его длины! CodeBase | Frontend | #js