> Что такое Blob в JavaScript и для чего он используется? (JavaScript)

Короткий ответ

Blob (Binary Large Object) в JavaScript - это объект, представляющий неизменяемые бинарные данные. Он используется для работы с файлами, изображениями, аудио, видео и другими двоичными данными. Blob позволяет создавать URL-ссылки для скачивания, загружать данные на сервер через FormData и обрабатывать потоки данных без загрузки в память целиком.

Подробное объяснение

Blob - это встроенный объект JavaScript, который хранит данные в бинарном формате. Он неизменяем, то есть после создания его содержимое нельзя изменить напрямую. Blob может содержать данные любого типа: текст, изображения, аудио, видео, произвольные бинарные последовательности.

Основные характеристики Blob:

• Содержит свойство size - размер в байтах
• Свойство type - MIME-тип данных (например, image/png, text/plain)
• Поддерживает метод slice() для создания части Blob
• Может быть создан из ArrayBuffer, TypedArray, строки или другого Blob

Blob используется в нескольких ключевых сценариях:

• Создание временных URL через URL.createObjectURL() для скачивания или отображения файлов
• Передача данных через FormData при отправке на сервер
• Работа с File API - объект File наследуется от Blob
• Чтение данных через FileReader
• Создание и скачивание файлов на клиенте

На практике

Blob часто встречается в веб-приложениях при работе с загрузкой файлов, генерации отчетов, скачивании изображений или экспорте данных. Например, когда пользователь выбирает файл через <input type="file">, каждый файл представлен объектом File, который является подклассом Blob.

Типичные сценарии использования:

• Скачивание сгенерированного контента (CSV, PDF, изображения)
• Предпросмотр изображений перед загрузкой
• Загрузка файлов частями (chunked upload) с помощью slice()
• Работа с медиа-потоками и запись с камеры/микрофона

Пример кода

JAVASCRIPT
// Создание Blob из строки
const textBlob = new Blob(['Hello, World!'], { type: 'text/plain' });
console.log(textBlob.size); // 13
console.log(textBlob.type); // 'text/plain'

// Создание Blob из массива байтов
const bytes = new Uint8Array([72, 101, 108, 108, 111]);
const binaryBlob = new Blob([bytes], { type: 'application/octet-stream' });

// Создание URL для скачивания
const blob = new Blob(['Содержимое файла'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'example.txt';
link.click();
URL.revokeObjectURL(url); // очистка памяти

// Использование slice для разделения Blob
const largeBlob = new Blob(['Часть1', 'Часть2', 'Часть3']);
const firstPart = largeBlob.slice(0, 6); // 'Часть1'

// Чтение Blob как текст
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(textBlob);

Как отвечать на собеседовании

Начни с определения: Blob - это объект для хранения бинарных данных. Упомяни, что он неизменяемый и имеет свойства size и type. Приведи примеры использования: создание ссылок для скачивания, работа с файлами, отправка на сервер. Покажи понимание связи с File и FileReader. Если спросят про память, упомяни URL.revokeObjectURL().

Что проверяет интервьюер

Интервьюер оценивает:

• Понимание бинарных данных и их представления в JavaScript
• Знание практических сценариев использования Blob
• Умение работать с File API и FormData
• Понимание разницы между Blob, ArrayBuffer и TypedArray
• Осведомленность об управлении памятью (revokeObjectURL)

Типичные ошибки

• Путаница между Blob и ArrayBuffer - Blob высокоуровневый объект, ArrayBuffer низкоуровневый буфер
• Забывают вызывать URL.revokeObjectURL(), что приводит к утечкам памяти
• Пытаются изменять Blob напрямую, хотя он неизменяем
• Не учитывают, что File наследуется от Blob и имеет дополнительные свойства (name, lastModified)
• Используют Blob для простых строк, когда достаточно обычной строки