← Назад ко всем вопросам

Какой есть нюанс при копировании объекта через JSON.stringify

1️⃣ Как кратко ответить

Копирование объекта через JSON.stringify и JSON.parse не сохраняет функции, undefined, символы, свойства с нечисловыми ключами в массиве, а также теряет информацию о прототипах и специальных объектах, таких как Date, Map, Set.

2️⃣ Подробное объяснение темы

Копирование объекта в JavaScript — это процесс создания нового объекта, который имеет те же значения, что и исходный объект. Один из способов глубокого копирования объекта — это использование JSON.stringify и JSON.parse. Однако этот метод имеет свои ограничения и нюансы.

Как это работает

  1. JSON.stringify: Преобразует объект в строку формата JSON.
  2. JSON.parse: Преобразует строку JSON обратно в объект.

Пример:

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));
  • original — исходный объект.
  • copy — новый объект, который является глубоким клоном original.

Нюансы и ограничения

  1. Функции и undefined: При сериализации объекта с помощью JSON.stringify, функции и значения undefined не сохраняются. Они просто игнорируются.

    const obj = {
      a: 1,
      b: undefined,
      c: function() { return 2; }
    };
    const jsonString = JSON.stringify(obj); // Результат: '{"a":1}'
    
    • b и c не включены в jsonString, так как undefined и функции не поддерживаются в JSON.
  2. Символы: Символы также не сериализуются.

    const obj = {
      a: 1,
      [Symbol('b')]: 2
    };
    const jsonString = JSON.stringify(obj); // Результат: '{"a":1}'
    
    • Свойство с символом как ключом не включено в jsonString.
  3. Прототипы: Информация о прототипах объектов теряется. Новый объект будет иметь прототип Object.

    function MyClass() {
      this.a = 1;
    }
    MyClass.prototype.b = 2;
    ​
    const instance = new MyClass();
    const copy = JSON.parse(JSON.stringify(instance));
    ​
    console.log(copy.b); // Результат: undefined
    
    • copy не имеет доступа к свойству b, так как прототип не был скопирован.
  4. Специальные объекты: Объекты типа Date, Map, Set, RegExp и другие специальные объекты не сохраняются корректно.

    const obj = {
      date: new Date(),
      map: new Map(),
      set: new Set()
    };
    const copy = JSON.parse(JSON.stringify(obj));
    ​
    console.log(copy.date instanceof Date); // Результат: false
    console.log(copy.map instanceof Map);   // Результат: false
    console.log(copy.set instanceof Set);   // Результат: false
    
    • copy.date будет строкой, а не объектом Date.
    • copy.map и copy.set будут пустыми объектами.

Когда использовать

Использование JSON.stringify и JSON.parse для копирования объектов подходит для простых объектов, которые содержат только данные, поддерживаемые JSON (числа, строки, массивы, объекты). Это быстрый и простой способ глубокого копирования, но он не подходит для объектов с функциями, undefined, символами, прототипами или специальными объектами.

Тема: JavaScript
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки