Обзор
Эта статья в основном посвящена преобразованию цифровых данных в двоичные данные в JavaScript, чтобы читатели могли понять, как работать с цифровыми типами (включая, помимо прочего, числовой тип) в JavaScript.
Двоичные данные редко встречаются в повседневном JavaScript, но когда вы используете WebSocket для взаимодействия с серверной частью, можно использовать формат двоичных данных. Поэтому, чтобы лучше понять содержание, связанное с передачей двоичных файлов с помощью WebSocket, далее в этой серии, необходимо понять, как двоичные данные обрабатываются и хранятся в JavaScript.
Основное содержание этой статьи:
- Как работать и хранить двоичные данные в JavaScript — базовые знания о структуре хранения ArrayBuffer и базовые знания о соответствующих типах данных, связанных с DataView, и API-интерфейсах, а также вводится проблема с порядком байтов.
- Возьмите Int и Short в качестве примеров, чтобы проиллюстрировать, как числовые данные в JavaScript преобразуются в двоичные данные.
- В длинном типе, чтобы проиллюстрировать, как выразить JavaScript Long Type и как преобразовать его в двоичные данные.
- Как преобразовать двоичные данные в числовые данные в JavaScript.
Эта статья не слишком тесно связана с WebSocket, но как базовая база знаний для передачи двоичных данных в WebSocket включена в эту серию.
Если читатель не понимает WebSocket или не понимает его сценариев использования и деталей, вы можете прочитать мой предыдущий блог-Введение в базовые знания серии WebSocket.
Если читатели хотят понять обработку и преобразование между типом String и двоичным, они могут обратиться к статье, опубликованной позже в серии WebSocket (этот абзац будет заменен после публикации статьи).
Если бы читатели хотели бы знать, как передавать двоичную и разрешать в Webbocket, вы можете прочитать серию серии Article, опубликованную позже (заменяет абзац после публикации).
Как хранить двоичные данные и управлять ими в JavaScript
Теперь, когда мы понимаем, зачем нам нужно использовать двоичные данные, давайте посмотрим, как хранить двоичные данные и манипулировать ими в JavaScript.
ArrayBuffer
Во-первых, давайте представим методы, используемые для хранения двоичных данных в JavaScript.ArrayBuffer.
ArrayBufferОбъекты используются для представления общих буферов фиксированной длины необработанных двоичных данных.
существуетMDNдокументации, мы можем видетьArrayBufferвведение. Это объект данных, используемый в JavaScript для хранения двоичных данных.
Давайте кратко представим операции, связанные с ArrayBuffer, на примере.
const buffer = new ArrayBuffer(8);
buffer.byteLength; // 结果为8
В приведенном выше примере создается буфер двоичных данных длиной 8 байт. Буфер — это просто место для хранения данных, и как читать это пространство, полностью зависит от пользователя. Например: 8 байтов можно рассматривать как 2 данных типа Int, одни данные типа Long или 4 данных типа Short.
DataView
После чтения сохраненных данныхArrayBuffer, давайте посмотрим на чтение и запись данныхDataView.
DataViewПредставление — это
ArrayBufferБазовый интерфейс для чтения и записи нескольких числовых типов в объекте не должен учитывать порядок байтов платформы при чтении и записи.
это вMDNВведение в DataView в . DataView предоставляет большое количество интерфейсов API для чтения и записи данных, которые мы проиллюстрируем примерами в следующих трех главах. Однако сначала мы должны рассмотреть проблему порядка следования байтов, упомянутую в описании.
порядок байтов
В существующей компьютерной системе существует два порядка байтов:
- Порядок байтов с обратным порядком байтов: сначала старший, потом младший. В соответствии с человеческими привычками чтения.
- Порядок байтов с прямым порядком байтов: сначала младший, в конце старший. Соблюдайте привычку читать за компьютером.
Упомянутые выше предназначены для целей многобайтовых объектов последовательности, такие как тип INT, длительный тип. INT тип данных до0x1234Например, если это big-endian, то данные из обычного человеческого способа записи числовых значений0x1234; если он с прямым порядком байтов, то из обычного человеческого способа записи значений он должен быть записан как0x3412.
Для однобайтовых объектов, таких как данные типа Byte, порядок следования байтов отсутствует.
На разных платформах может использоваться разный порядок следования байтов, что является так называемой проблемой порядка следования байтов. Так называемый DataView не должен учитывать порядок байтов платформы при чтении и записи, а это означает, что данные, записываемые и считываемые с помощью DataView одновременно, непротиворечивы.
Как преобразовать числовые данные в двоичные данные в JavaScript
Имея общее представление об ArrayBuffer и DataView, давайте посмотрим, как он выполняет операции с двоичными данными.
В этой главе я использую типы Short и Int в качестве примеров, чтобы представить соответствующие этапы работы.
let buffer = new ArrayBuffer(6); // 初始化6个Byte的二进制数据缓冲区
let dataView = new DataView(buffer);
dataView.setInt16(0, 3); // 从第0个Byte位置开始，放置一个数字为3的Short类型数据(占2 Byte)
dataView.setInt32(2, 15); // 从第2个Byte位置开始，放置一个数字为15的Short类型数据(占4 Byte)
В приведенном выше примере мы инициализировали в общей сложности 6 байт пространства для хранения и заполнили их данными 1 типа Short (2 байта) и одного типа Int (4 байта).
DataView также предоставляет множество интерфейсов API для обработки других типов данных, таких как числа без знака, числа с плавающей запятой и т. д. Их использование такое же, как и API, описанное выше, мы не будем представлять их здесь по одному, читатели, которые хотят узнать больше об интерфейсе API, могут проверитьДокументация MDN.
Как представить тип Long в JavaScript и как преобразовать его в двоичные данные
Благодаря интерфейсу API, предоставляемому DataView, мы знаем, как работать с типами Short, Int, Float и Double. Итак, что делать, если это тип данных, который не предоставляет функции обработки в нативном API типа Long?
Во-первых, нам нужно понять структуру типа данных Long, который представляет собой тип данных, состоящий из 4 байтов старшего порядка и 4 байтов младшего порядка. Поскольку диапазон, представляемый типом Long, больше, чем у типа Number, мы используем два объекта типа Number (то есть типа Int) для представления данных типа Long в JavaScript. блог.Анализ и изучение исходного кода Long.js.
Поняв, как хранить тип Long в JavaScript, мы знаем, как его хранить.
import Long from 'long';
let long = Long.fromString('123');
let buffer = new ArrayBuffer(8);
let dataView = new DataView(buffer);
dataView.setInt32(0, long.high); // 采用大端字节序放置
dataView.setInt32(4, long.low);
В приведенном выше примере мы разделили данные типа Long на два данных типа Int и поместили их в ArrayBuffer в порядке байтов с обратным порядком байтов. Точно так же, если вы хотите разместить его в порядке байтов с прямым порядком байтов, вам нужно только частично обработать данные, а затем вставить их. Я не буду здесь слишком подробно рассказывать об этом.
Как преобразовать двоичные данные в типы данных в JavaScript
Как только вы узнаете, как преобразовывать данные в двоичные данные, хранящиеся в ArrayBuffer, вы сможете легко понять, как сделать обратное — прочитать данные из ArrayBuffer и преобразовать их в тип данных, обычно используемый в JavaScript.
import Long from 'long';
let buffer = new ArrayBuffer(14); // 初始化14个Byte的二进制数据缓冲区
let dataView = new DataView(buffer);
let long = Long.fromString('123');
// 数据写入过程
dataView.setInt16(0, 3); // 从第0个Byte位置开始，放置一个数字为3的Short类型数据(占2 Byte)
dataView.setInt32(2, 15); // 从第2个Byte位置开始，放置一个数字为15的Short类型数据(占4 Byte)
dataView.setInt32(6, long.high); // 采用大端字节序放置
dataView.setInt32(10, long.low);
// 数据读取过程
let shortNumber = dataView.getInt16(0);
let intNumber = dataView.getInt32(2);
let longNumber = Long.fromBits(dataView.getInt32(10), dataView.getInt32(6)); // 根据大端字节序读取，该构造函数入参依次为：低16位，高16位
В приведенном выше примере мы преобразовали строку двоичных данных в общий тип данных в JavaScript.
Суммировать
Используя ArrayBuffer и DataView, мы можем быстро преобразовывать числовые данные из двоичных в общие типы данных JavaScript, такие как Int, Short и т. д. В то же время мы также можем преобразовывать эти типы данных в двоичные данные. Обладая этими базовыми знаниями, мы можем понять процесс и логику обработки использования WebSocket для передачи двоичных данных в последующих блогах.
В следующем блоге мы представим операции двоичной обработки и преобразования, связанные с типом String, Заинтересованные студенты могут обратить внимание на соответствующий контент.