Рубрики
Без рубрики

Основы JS: Назначение объекта против примитивного назначения

Быстрый посмотрите на объект назначения в JavaScript, предназначенном для новичков на язык. Теги с JavaScript, начинающими, WebDev, учебником.

Что-то, что я хотел бы, чтобы я понял в моем программировании в JavaScript, это то, как работает объект назначения и как он отличается от примитивного назначения. Это моя попытка передать различие в самый краткий путь возможно!

Хотите узнать больше фундаментов JS? Рассмотрим Подпишитесь на мой бесплатный список рассылки Действительно

В качестве обзора давайте вспомним различные примитивные типы и объекты в JavaScript.

Примитивные типы: Boolean, null, undefined, номер, bigint (вы, вероятно, не увидите это много), строка, символ (вы, вероятно, не увидите это много)

Типы объектов: Объект, массив, дата, Многие другие

Примитивное задание

Присвоение примитивной ценности переменной является справедливо StaightForward: значение присваивается переменной. Давайте посмотрим на пример.

const a = 'hello';
const b = a;

В этом случае А установлен на значение Привет и B также установлен на значение Привет Отказ Это означает, что если мы установим B к новой ценности, А останется без изменений; Нет никаких отношений между А и B Отказ

const b = 'foobar';
console.log(a); // "hello"
console.log(b); // "foobar"

Назначение объекта

Назначение объекта работает по-разному. Назначение объекта для переменной делает следующее:

  • Создает объект в памяти
  • Назначает ссылку на объект в памяти для переменной

Почему это так важно? Давайте рассмотрим.

const a = { name: 'Joe' };
const b = a;

Первая строка создает объект {Название: 'Джо'} в памяти, а затем назначает ссылку на этот объект для переменной А Отказ Вторая строка назначает ссылку к тому же объекту в памяти к B Действительно

Итак, чтобы ответить на «Зачем этот вопрос», давайте мутитировать свойство объекта, назначенного на B :

b.name = 'Jane';
console.log(b); // { name: "Jane" }
console.log(a); // { name: "Jane" }

Верно! С А и B назначаются ссылки на тот же объект в памяти, мутируя свойство на B действительно просто мутируя свойство на объекте в память, что оба А и B указывают на.

Чтобы быть тщательным, мы также можем видеть это в действии с массивами.

const a = ['foo'];
const b = a;

b[0] = 'bar';

console.log(b); // ["bar"]
console.log(a); // ["bar"]

Это относится к аргументам функционирования тоже!

Эти правила назначения применяются при прохождении объектов к функциям тоже! Проверьте следующий пример:

const a = { name: 'Joe' };

function doSomething(val) {
  val.name = 'Bip';
}

doSomething(a);
console.log(a); // { name: "Bip" }

Мораль этой истории: остерегайтесь мутационных объектов, которые вы проходите к функциям, если это не предназначено (я не думаю, что есть много случаев, которые вы действительно хотите сделать это).

Во многих случаях это поведение может быть желательно. Указывая на тот же объект в памяти помогает нам передавать ссылки и делать умные вещи. Однако это не всегда желаемое поведение, и когда вы начинаете мутирующие объекты непреднамеренно, вы можете в конечном итоге с некоторыми Очень запутанные ошибки.

Есть несколько способов убедиться, что ваши объекты являются уникальными. Я пойду над некоторыми из них здесь, но отдых уверены, что этот список не будет всеобъемлющим.

Оператор распространения (…)

Оператор распространения – отличный способ сделать мелкий копия объекта или массива. Давайте использовать его для копирования объекта.

const a = { name: 'Joe' };
const b = { ...a };
b.name = 'Jane';
console.log(b); // { name: "Jane" }
console.log(a); // { name: "Joe" }

Примечание на «мелководье» копирования

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

const a = {
  name: 'Joe',
  dog: {
    name: 'Daffodil',
  },
};
const b = { ...a };

b.name = 'Pete';
b.dog.name = 'Frenchie';
console.log(a);
// {
//   name: 'Joe',
//   dog: {
//     name: 'Frenchie',
//   },
// }

Мы успешно скопировали А Один уровень глубокий, но свойства на втором уровне все еще ссылаются на одни и те же объекты в памяти! По этой причине люди изобрели способы сделать «глубокое» копирование, например, используя библиотеку, как Глубокая копия или сериализация и десериализация объекта.

Используя объект.assign

Объект.assign Может использоваться для создания нового объекта на основе другого объекта. Синтаксис идет так:

const a = { name: 'Joe' };
const b = Object.create({}, a);

Остерегаться; Это все еще неглубокая копия!

Сериализация и десериализировать

Один метод, который может использоваться для глубокой копии объект – для сериализации и десериализма объекта. Один общий способ сделать это использует JSON.Stringify и Json.parse Отказ

const a = {
  name: 'Joe',
  dog: {
    name: 'Daffodil',
  },
};
const b = JSON.parse(JSON.stringify(a));
b.name = 'Eva';
b.dog.name = 'Jojo';
console.log(a);
// {
//   name: 'Joe',
//   dog: {
//     name: 'Daffodil',
//   },
// }

console.log(b);
// {
//   name: 'Eva',
//   dog: {
//     name: 'Jojo',
//   },
// }

Это имеет свои недостатки, хотя. Сериализация десериализации не сохраняет сложные объекты, такие как функции.

Глубокая библиотека копирования

Это довольно распространено, чтобы принести в Глубокая библиотека копирования Чтобы сделать тяжелую подъем по этой задаче, особенно если ваш объект имеет неизвестную или особенно глубокую иерархию. Эти библиотеки обычно являются функциями, которые выполняют одну из вышеупомянутых мелких методов копирования рекурсивно вниз по дереву объекта.

Хотя это может показаться сложной темой, вы будете просто в порядке, если вы поддерживаете осведомленность о том, как примитивные типы и объекты назначаются по-разному. Играйте с некоторыми из этих примеров и, если вы за это, попытайтесь написать свою собственную функцию глубокой копии!

Оригинал: “https://dev.to/nas5w/js-fundamentals-object-assignment-vs-primitive-assignment-5h64”

Читайте ещё по теме: