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

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

Например,

// Simple object
const simpleObject = {
  firstName: 'param',
  lastname: 'Harrison',
  isMarried: true,
};
// Cloned simple object
const clonedSimpleObject = { ...simpleObject };

simpleObject.firstName = 'ABC';
clonedSimpleObject.firstName = 'XYZ';

console.log(simpleObject.firstName === clonedSimpleObject.firstName); // False

Здесь мы успешно создали простой объект, который не мутируется с использованием оператора спреда.

Частично мутированное объект

Давайте посмотрим на сложный пример объекта, который частично мутирует. Мы создадим вложенный объект с примитивными типами данных и не примитивными типами данных, такими как массив

const nestedObject = {
  firstName: 'Param',
  like: ['coffee', 'tea', 'javascript'],
};

// Clone using simple spread operation
const clonedNestedObject = { ...nestedObject };

nestedObject.like.push('sleeping');
clonedNestedObject.like.push('swimming');
clonedNestedObject.firstName = 'Vennila';

console.log(nestedObject.like === clonedNestedObject.like); // True
console.log(nestedObject.like, clonedNestedObject.like); // Both are same array - ["coffee", "tea", "javascript", "sleeping", "swimming"]
console.log(nestedObject.firstName === clonedNestedObject.firstName); // False

Здесь мы создаем nestedObject и клонировал его, используя оператор спреда. Затем добавьте значения в поле массива в обоих объектах.

Если мы проверим консоль, оба поля массива одинаковы с той же ссылкой.

Только примитивные типы данных не будут мутированы по умолчанию при применении операции распространения.

Тогда как убедиться, что не примитивные типы данных, такие как объекты и массивы, могут быть глубоко клонированы без мутации?

Это возможно использование оператора спреда, но это будет более многословным. Давайте посмотрим на это в действии.

Глубокое клонирование с использованием оператора спреда

Давайте возьмем тот же пример, что и раньше.

const nestedObject = {
  firstName: 'Param',
  like: ['coffee', 'tea', 'javascript'],
};

const deepClonedObject = {
  ...nestedObject,
  like: [...nestedObject.like],
};

deepClonedObject.like.push('reading');
console.log(nestedObject.like === deepClonedObject.like); // False
console.log(nestedObject.like); // ["coffee", "tea", "javascript", "sleeping", "swimming"]
console.log(deepClonedObject.like); // ["coffee", "tea", "javascript", "sleeping", "swimming", "reading"]

Здесь мы распространяем вложенный массив и объекты, чтобы глубоко клонировать его, не ссылаясь на него.

Для не примитивных типов данных необходимо применить оператор спреда для каждого уровня гнездования, чтобы глубоко клонировать объект

Теперь мы успешно глубоко клонировали объект, не мучая его. Но если ваш объект очень глубоко вложен, будет больно клонировать его таким образом.

В JS также нет другого прямого решения. Мы увидим некоторые библиотеки в JS, которые решают эти проблемы мутации в следующих статьях

Вы можете проверить пример здесь,

Надеюсь, вам понравился и выучил один из основных трюков в JavaScript 😎

Оригинал: “https://dev.to/paramharrison/do-you-know-spread-operator-in-javascript-object-is-mutable-40c”

Частично мутированное объект

Глубокое клонирование с использованием оператора спреда

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