JSON формат передачи данных
JSON (JavaScript Object Notation) является текстовым форматом обмена данных. На самом деле он используется не только для передачи, но и для хранения данных. Наверняка вы уже видели файлы с настройками в формате JSON. Изначально формат данных JSON появился в JavaScript, однако сейчас он используется любым языком программирования. Формат JSON состоит из набора пар: ключ, значение, ничего нет проще такой записи данных. Главным правилом будет то, что все строки (объекты, массивы, логические значения) обязательно должны быть в двойных кавычках.
Объект преобразовать в JSON
Допустим у меня есть объект client, который нужно передать в базу данных на сервере. В таком виде, данный объект сервер не примет, нужны какие-то предварительные преобразования.
const client {
name: 'Anton',
age: '35'
};
Все современные браузеры имеют встроенные объекты JSON для работы с этими данными. В этом встроенном объекте есть свойства и методы, как и положено для всех объектов без исключения. Один из двух методов называется stringify, который как раз и превращает объекты JavaScript в нужный нам формат. Подготовим данные клиента в нужный нам формат, прежде чем передать их на сервер. Обратимся к встроенным браузерным методам JSON формата. Передадим методу stringify нашего клиента, то есть объект client.
console.log(JSON.stringify(client));
// объект преобразован в JSON {"name":"Anton","age":"35"}
Метод stringify сделал свою работу и преобразовал данные к нужной структуре для дальнейшей отправки на сервер. Все сущности оказались заключенными в двойные кавычки, поэтому главное правило для формата JSON, выполнено. Теперь такой формат уже может спокойно передаваться на сервер.
JSON преобразовать в объект
Рассмотрим обратную ситуацию, когда к нам с сервера приходят данные в JSON формате и нам необходимо их преобразовать в объект. Для этого существует метод parse. В результате всех действий, мы получили обратно самый обычный объект с данными в одинарных кавычках.
console.log(JSON.parse(JSON.stringify(client)));
// JSON преобразован в объект { name: 'Anton', age: '35' }
Чем JSON лучше XML?
Причиной популярности формата JSON является его маленький вес файла, а также простота чтения считывания данных. До появления JSON для передачи данных использовался формат XML, на мой взгляд этот формат слишком избыточен, посудите сами. После конвертации JSON в XML, наши данные окажутся обернутыми в парные теги. Согласитесь, но такая структура тяжело воспринимается на глаз, не удобная для чтения и самое главное, весит намного больше своего конкурента JSON. Все эти недостатки у XML особенно будут заметны на больших объемах данных.
<?xml version="1.0" encoding="UTF-8"?>
<root>
<age>35</age>
<name>Anton</name>
</root>
Глубокое копирование объектов
При помощи JSON можно создавать глубокие копии при копировании объектов. Добавим в объект client, вложенный объект residence с двумя свойствами.
const client = {
name: 'Anton',
age: '35',
residence: {
country: UK,
city: London
}
};
Сделаем глубокую копию этого объекта при помощи конструкции JSON, которая превратит объект в формат JSON, а затем распарсит его обратно в JavaScript объект и поместит в переменную clone. Новая созданная копия будет совершенно независимой от первоначального объекта. Это значит, что все изменения в копии не затронут ее оригинала.
const clone = JSON.parse(JSON.stringify(client));
Давайте убедимся в этом на практике. Обратимся к ключу city и заменим название города.
clone.residence.city = 'Berlin';
Выведем в консоль оба объекта.
console.log(client);
console.log(clone);
И видим, что в оригинальном объекте client название города не изменилось.
{
name: 'Anton',
age: '35',
residence: { country: 'UK', city: 'London' }
}
Зато в копии clone уже появилось новое название города.
{
name: 'Anton',
age: '35',
residence: { country: 'UK', city: 'Berlin' }
}
Если бы мы создавали поверхностную копию (без вложенной структуры), тогда изменения в копии, затронули бы и оригинал. Манипуляции с JSON форматом позволяют создавать независимые копии объектов и работать с ними, при этом не затрагивая оригинальный объект.
-
Создано 21.08.2020 10:38:12
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.