Шаблоны неизменяемого обновления
Обновляйте данные, создавая новые копии.
«Шаблоны неизменяемого обновления» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Обновление без изменения исходных данных
Неизменяемые обновления создают новую копию с применённым изменением, оставляя исходный объект нетронутым. Это основа предсказуемого управления состоянием в современном JavaScript.
Главный инструмент для этого — оператор разворачивания ....
Копирование объекта с помощью оператора разворачивания
Разверните объект в новый объект, а затем переопределите свойство. Исходный объект сохранит прежнее значение.
const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };
console.log(user.age);
console.log(older.age);Это разные объекты
Копия — совершенно новый объект, а не та же ссылка. Сравнение идентичности это подтверждает.
const original = { x: 1 };
const copy = { ...original };
console.log(original === copy);
console.log(original.x === copy.x);Неизменяемое добавление свойства
Чтобы добавить поле, разверните старый объект и включите новый ключ. Исходный объект не изменится.
const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };
console.log(point);
console.log(point3d);Неизменяемое удаление свойства
Используйте деструктуризацию, чтобы извлечь ненужный ключ и собрать остальные свойства. В результирующем объекте этого ключа не будет.
const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;
console.log(safe);
console.log(user.secret);Копирование массивов с помощью оператора разворачивания
Разверните массив, чтобы скопировать его. Такие методы, как map и filter, также возвращают новые массивы и никогда не изменяют исходный.
const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);
console.log(nums);
console.log(doubled);Неизменяемое добавление в массив
Вместо push, который изменяет массив, создайте новый массив с помощью оператора разворачивания. Длина исходного массива останется прежней.
const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];
console.log(list);
console.log(added);
console.log(prepended);Неизменяемое удаление из массива
Используйте filter, чтобы получить новый массив без ненужного элемента, сохранив исходный без изменений.
const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);
console.log(nums);
console.log(withoutThree);Обновление вложенных объектов
Для обновления вложенных данных нужно использовать оператор разворачивания на каждом изменяемом уровне. Создаётся только затронутая ветвь, а остальные данные разделяются по ссылке.
const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);Обновление элемента в массиве
Используйте map, чтобы вернуть изменённую копию подходящего элемента, а для остальных вернуть исходные элементы. Ни один элемент не изменяется напрямую.
const todos = [
{ id: 1, done: false },
{ id: 2, done: false }
];
const updated = todos.map(t =>
t.id === 2 ? { ...t, done: true } : t
);
console.log(todos[1].done);
console.log(updated[1].done);Почему неизменяемые обновления важны
Отказ от изменения общего состояния удешевляет обнаружение изменений (сравнивайте ссылки), делает возможными отмену и повтор действий и предотвращает ошибки из-за удалённых побочных эффектов. Шаблон таков: скопируйте, затем измените копию. Для глубокого клонирования в следующем уроке рассматривается structuredClone.
function setName(state, name) {
return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);Быстрая проверка
Что создаёт выражение { ...user, age: 37 }, если в user уже есть age?
Итоги: шаблоны неизменяемого обновления
Вы научились обновлять данные без изменений исходных объектов:
- Используйте оператор разворачивания
{ ...obj, key: value }, чтобы скопировать объект и переопределить свойство. - Используйте остаток после деструктуризации, чтобы неизменяемо удалить свойство.
- Используйте
map,filterи разворачивание массива вместоpush/splice. - Используйте оператор разворачивания на каждом уровне при обновлении вложенных данных, а остальные данные разделяйте по ссылке.
Часто задаваемые вопросы
Урок «Шаблоны неизменяемого обновления» бесплатный?
Да — полный текст урока «Шаблоны неизменяемого обновления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Шаблоны неизменяемого обновления»?
Обновляйте данные, создавая новые копии. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Шаблоны неизменяемого обновления»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Object.freeze и seal
- Поверхностная и глубокая заморозка
- Шаблоны неизменяемого обновления
- structuredClone для глубокого копирования