Привет, ребята🙌
Сегодня я закончил 14-е видео JavaScript30!
Проект 14: Объект и массивы — ссылка VS Copy
Источник: https://javascript30.com
Обучение:
- строки, числа и логические значения
Javascript создаст копии этих типов, поэтому изменение значений, как показано ниже, допустимо.
let age = 100; let age2 = age; age = 200;
В этом случае переменная age2
сохранит исходное значение 100
.
- массив
При работе с массивами вам необходимо знать о концепции ссылок.
const players = ['Kushagra', 'Sarah', 'Ryan', 'Poppy']; const team = players;
Здесь изменение значений массива team
фактически изменит массив players
, например…
team[3] = 'Lux'; console.log(players[3]); // 'Lux'
Чтобы оставить исходный массив нетронутым, необходимо сделать его копии. Есть несколько способов сделать это, некоторые из них показаны ниже.
const team2 = players.slice(); const team3 = [].concat(players); const team4 = [...players]; const team5 = Array.from(players);
- объекты
Здесь применяется тот же принцип ссылки (из массивов). Чтобы скопировать объект в другую переменную, будет работать следующий код
const person = { name: 'Kushagra Kesav', age: 20 }; const cap2 = Object.assign({}, person, { age: 99 });
Метод Object.assign()
принимает следующие параметры:
target
- В данном случае пустой объект{}
sources
- Объект(ы) для добавления
Дополнительный аргумент.
{age: 99}
— это изменит существующую переменную возраста лично
Обратите внимание: глубина всего 1 уровень — как для массивов, так и для объектов, что означает, что он обновит встроенный объект, который называется `social.twitter` и `social. medium`, даже если вы обновите копию объекта!!
const details = { name: 'Kushagra', age: 100, social: { twitter: '@im_Kushagra', medium: '@imKushagra' } }; console.log(details); const dev = Object.assign({}, details);
Чтобы пропустить эту функциональность или обмануть выход, вы можете использовать следующую строку кода для создания копии объекта! (не рекомендуется)
const dev2 = JSON.parse(JSON.stringify(details));
Сегодня я узнал (Т-И-Л):
- Объекты и массивы в JS
- Строка, число и логические значения в JS
- Разница между ссылкой на JS и копированием
- Встроенный объект будет обновляться даже после копирования объекта ✨
На 14-й день все ✅
Спасибо за внимание.Увидимся завтра!