Как сравнить ссылки и значения в JavaScript

1656511809 kak sravnit ssylki i znacheniya v javascript

Марина Феррейра

LqCFaqsUE0xYWy99mdVstn722rdgQ3KrEQLE

В этой статье обсуждается, как ведут себя разные типы данных JavaScript, когда их назначают переменной. В зависимости от типа данных память выделяется по-разному для их хранения. Он может зарезервировать новое пространство для хранения копии значения или он может не создавать копию вообще и просто указывать на существующее значение (ссылка).

Вот мои заметки, сделанные при прохождении курса Javascript30 Веса Босса.

Числа, строки и логические значения

В JavaScript примитивные типы, такие как undefined, null, string, number, boolean и symbol передаются по значению.

let name = ‘Marina’;let name2 = name;
console.log({name, name2}); >> { name: ‘Marina’, name2: ‘Marina’ }
name = ‘Vinicius’;
console.log({name, name2});>> { name: ‘Vinicius’, name2: ‘Marina’ }
WOKvO0CDlVUun7pqwGOyN4g64IqolhrWjuA0
Передано по значению.

Когда переменная name назначено место в памяти с адресом 0x001 зарезервировано для хранения этого значения. Переменная name затем указывает на этот адрес. Переменная name2 затем устанавливается ровным name. Новое место в памяти с новым адресом 0x002 выделяется и сохраняет копию значения, сохраненного в адресе name указывает на.

Итак, когда мы хотим изменить значение nameзначение, хранящееся в name2 не будет изменена, поскольку это копия, хранящаяся в другом месте.

Объекты и массивы

Объекты в JavaScript передаются по ссылке. Если более чем одна переменная установлена ​​для хранения любой из них object, array или functionэти переменные будут указывать на то же выделенное место в памяти.

const animals = ['Cat', 'Dog', 'Horse', 'Snake'];
let animals2 = animals;console.log({animals, animals2});>>{  animals: ['Cat', 'Dog', 'Horse', 'Snake'],  animals2: ['Cat', 'Dog', 'Horse', 'Snake']}
animals2[3] = 'Wale';console.log(animals, animals2);>>{  animals: ['Cat', 'Dog', 'Horse', 'Wale'],  animals2: ['Cat', 'Dog', 'Horse', 'Wale']}
8UmMLgC2-3bI2PYI8km77Jk9P1EPUV5CdGk6
Передано по ссылке.

Когда animals устанавливается для хранения массива, память выделяется и адрес связывается с этой переменной. Затем animals2 установлено ровным animals. Так как animals сохраняет массив вместо создания копии этого массива и нового адреса в памяти, animals2 просто указывает на тот же объект в существующем адресе. Таким образом, любые изменения, внесенные в animals2 будет размышлять animalsпоскольку они указывают на то же место.

Вы увидите то же поведение для объектов:

const person = {  name: 'Marina',  age: 29};
let femme = person;femme.age = 18;
console.log({person, femme});>>{  person: { name: 'Marina', age: 18 },  femme: { name: 'Marina', age: 18 }}

Копирование объектов и массивов

Поскольку простого назначения недостаточно для создания копии объекта, этого можно добиться с помощью других подходов:

Массивы

ломтик()

let animals2 = animals.slice();animals2[3] = 'Shark';

concat()

let animals3 = [].concat(animals);animals3[3] = 'Tiger';

распространение (ES6)

let animals4 = [...animals];animals4[3] = 'Lion';

Изменения повлияют только на измененный объект:

console.log({animals, animals2, animals3, animals4});>>{  animals: ['Cat', 'Dog', 'Horse', 'Snake'],  animals2: ['Cat', 'Dog', 'Horse', 'Shark'],  animals3: ['Cat', 'Dog', 'Horse', 'Tiger'],  animals4: ['Cat', 'Dog', 'Horse', 'Lion']}

Объекты

назначить()

let human = Object.assign({}, person, { age: 20 });
console.log(person, human);>>{  person: { name: 'Marina', age: 29 },  human: { name: 'Marina', age: 20 }}

Глубокий клон

Важно отметить, что эти методы имеют только один уровень глубины. Для глубоких клонов существует бесценный метод. Используйте осторожно.

let femme3 = JSON.parse(JSON.stringify(person));femme3.name="Leslie";
console.log(person, femme3);>>{  person: { name: 'Marina', age: 29 },  femme3: { name: 'Leslie', age: 29 }}

Ссылки

  • WesBos — Javascript 30
  • Вы не знаете JS: объем и закрытие, Кайл Симпсон

Первоначально опубликовано на marina-ferreira.github.io.

Добавить комментарий

Ваш адрес email не будет опубликован.