Где обучался Frontend?

Как работает JSON и зачем он используется

JSON (JavaScript Object Notation) — это простой и универсальный формат для передачи данных. Несмотря на имя, JSON используется не только в JavaScript, но и во всех современных языках программирования.

Что такое JSON

Определение

JSON — это текстовый формат для представления структурированных данных. Он основан на двух базовых структурах:

• Объекты (key-value пары)
• Массивы (списки значений)

{
  "name": "Иван",
  "age": 30,
  "isActive": true,
  "tags": ["programmer", "javascript"],
  "address": {
    "city": "Москва",
    "zip": "123456"
  }
}

Типы данных в JSON

Основные типы

{
  "string": "текст",
  "number": 42,
  "float": 3.14,
  "boolean": true,
  "null": null,
  "array": [1, 2, 3],
  "object": { "key": "value" }
}

Важное ограничение: в JSON нет функций, дат, undefined

const obj = {
  name: 'Иван',
  age: 30,
  created: new Date(),  // Станет строкой!
  greet: () => 'hello', // Будет потеряна!
  unused: undefined     // Будет потеряна!
};

const json = JSON.stringify(obj);
console.log(json);
// {"name":"Иван","age":30,"created":"2024-01-15T10:30:00.000Z"}
// greet и unused пропали!

JSON.stringify() — преобразование объекта в JSON

Базовый синтаксис

const user = {
  name: 'Иван',
  age: 30,
  email: 'ivan@example.com'
};

const json = JSON.stringify(user);
console.log(json);
// {"name":"Иван","age":30,"email":"ivan@example.com"}

С параметром replacer (фильтр)

// Выбрать только определенные ключи
const user = {
  name: 'Иван',
  age: 30,
  password: 'secret123'
};

const json = JSON.stringify(user, ['name', 'age']);
console.log(json);
// {"name":"Иван","age":30}
// password скрыт!

С функцией replacer (преобразование)

const data = {
  name: 'Иван',
  created: new Date('2024-01-15'),
  isActive: true
};

const json = JSON.stringify(data, (key, value) => {
  if (value instanceof Date) {
    return value.toISOString(); // Преобразуем дату
  }
  if (key === 'password') {
    return '***'; // Скрываем пароль
  }
  return value;
});

console.log(json);
// {"name":"Иван","created":"2024-01-15T00:00:00.000Z","isActive":true}

С параметром space (красивый вывод)

const user = { name: 'Иван', age: 30 };

// Компактный
const compact = JSON.stringify(user);
console.log(compact);
// {"name":"Иван","age":30}

// Красивый (с 2 пробелами отступа)
const pretty = JSON.stringify(user, null, 2);
console.log(pretty);
// {
//   "name": "Иван",
//   "age": 30
// }

JSON.parse() — преобразование JSON в объект

Базовый синтаксис

const json = '{"name":"Иван","age":30}';
const user = JSON.parse(json);

console.log(user.name); // 'Иван'
console.log(user.age); // 30

С параметром reviver (преобразование)

const json = '{"name":"Иван","created":"2024-01-15T10:30:00.000Z"}';

const user = JSON.parse(json, (key, value) => {
  if (key === 'created') {
    return new Date(value); // Преобразуем строку в дату
  }
  return value;
});

console.log(user.created instanceof Date); // true
console.log(user.created.getFullYear()); // 2024

Когда используется JSON

1. API запросы

// Отправка данных
fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: 'Иван',
    email: 'ivan@example.com'
  })
});

// Получение данных
fetch('/api/users/1')
  .then(res => res.json()) // Парсим JSON
  .then(user => console.log(user));

2. Сохранение в localStorage

const user = { name: 'Иван', preferences: { theme: 'dark' } };

// Сохранить
localStorage.setItem('user', JSON.stringify(user));

// Получить
const saved = JSON.parse(localStorage.getItem('user'));
console.log(saved.preferences.theme); // 'dark'

3. Конфигурационные файлы (package.json, config.json)

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "lodash": "^4.17.21"
  }
}

4. WebSocket сообщения

const socket = new WebSocket('ws://api.example.com');

socket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log(message.type, message.content);
};

socket.send(JSON.stringify({
  type: 'message',
  content: 'Hello!'
}));

Частые ошибки

Ошибка 1: Потеря функций и методов

const calculator = {
  value: 0,
  add(x) {
    this.value += x;
    return this; // Для цепочки
  }
};

const json = JSON.stringify(calculator);
const restored = JSON.parse(json);

restored.add(5); // ОШИБКА: add не функция!
// Методы теряются при stringify/parse

Ошибка 2: Циклические ссылки

const obj = { name: 'Иван' };
obj.self = obj; // Циклическая ссылка

JSON.stringify(obj);
// ОШИБКА: Converting circular structure to JSON

// Решение: использовать replacer
const json = JSON.stringify(obj, (key, value) => {
  if (key === 'self') return undefined; // Пропускаем циклическую ссылку
  return value;
});

Ошибка 3: Большие числа теряют точность

const data = {
  largeNumber: 9007199254740992 // Больше MAX_SAFE_INTEGER
};

const json = JSON.stringify(data);
const restored = JSON.parse(json);

console.log(restored.largeNumber === data.largeNumber); // false!
// JSON работает с числами через IEEE 754 (floating point)

Производительность

Отправка JSON через сеть

// JSON хуже, чем бинарные форматы (Protocol Buffers, MessagePack)
// НО: более читаем и совместим

const data = { name: 'Иван', age: 30, active: true };

// JSON
const json = JSON.stringify(data);
console.log(json.length); // ~45 байт

// Может быть сжат gzip
fetch('/api', {
  body: json,
  headers: { 'Content-Encoding': 'gzip' }
});

Оптимизация парсинга

// Медленно: парсим весь ответ сразу
fetch('/api/huge-data')
  .then(res => res.json()); // Весь файл в памяти

// Быстрее: streaming JSON (если поддерживается)
fetch('/api/huge-data')
  .then(res => res.body.getReader())
  .then(reader => {
    // Читаем по частям
  });

Валидация JSON

function isValidJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
}

console.log(isValidJSON('{"name":"Иван"}')); // true
console.log(isValidJSON('{name:"Иван"}')); // false (keys без кавычек)

Заключение

JSON — это универсальный, легко читаемый формат для обмена данными. Его преимущества:

• Простота: каждый язык может парсить JSON
• Читаемость: понятный формат
• Компактность: меньше XML
• Встроенная поддержка в браузерах

Основные операции: JSON.stringify() (объект → JSON) и JSON.parse() (JSON → объект). Помни про ограничения: потеря функций, циклические ссылки, проблемы с большими числами.