Типизированные массивы

API типизированных массивов позволяет веб-приложениям использовать широкий диапазон форматов двоичных файлов и напрямую управлять двоичным содержимым файлов, уже поддерживаемых Internet Explorer 10. Вы можете использовать типизированные массивы для обработки данных из таких источников, как сетевые протоколы, файлы в двоичном формате и буферы необработанных графических данных. Также типизированные массивы можно использовать для управления двоичными данными, находящимися в памяти с известным размещением байт.

Поддержка типизированных массивов в Internet Explorer 10 добавлена в JavaScript, XMLHttpRequest, файловый API и потоковый API.

Typed arrays позволяют рассматривать необработанное двоичное содержимое как частично типизированное. Например, если необходимо просмотреть необработанные двоичные файлы по одному байту, можно использовать массив Uint8Array (Uint8 описывает 8-разрядное целое число без знака, обычно называемое байтом). Если необходимо прочесть необработанные данные как массив чисел с плавающей запятой, то можно использовать массив Float32Array; Float32 описывает 32-разрядное число с плавающей запятой (стандарт IEE754), известное как число с плавающей запятой. Поддерживаются следующие типы массивов:

Тип массиваРазмер элемента и описание
Int8Array8-разрядное знаковое целое число
Uint8Array8-разрядное целое число без знака
Int16Array16-разрядное знаковое целое число
Uint16Array16-разрядное целое число без знака
Int32Array32-разрядное знаковое целое число
Uint32Array32-разрядное целое число без знака
Float32Array32-разрядное число с плавающей запятой (стандарт IEEE754)
Float64Array64-разрядное число с плавающей запятой (стандарт IEEE754)

 

Объект ArrayBuffer

Каждый тип массива — это представление через ArrayBuffer. ArrayBuffer — это ссылка на необработанные двоичные данные, которая не предоставляет прямого доступа к данным. Создание представления TypedArray буфера ArrayBuffer предоставляет доступ для чтения и записи двоичных данных.

В следующем примере создается новый ArrayBuffer, а его содержимое интерпретируется несколькими разными способами.


// Create an 8 byte buffer
var buffer = new ArrayBuffer(8);


// View as an array of Uint8s and put 0x05 in each byte
var uint8s = new Uint8Array(buffer);
for (var i = 0; i < 8; i++) {
    uint8s[i] = 5; // fill each byte with 0x05
}

 
// Inspect the resulting array
uint8s[0] === 5; // true - each byte has value 5
uint8s.byteLength === 8; // true - there are 8 Uint8s


// View the same buffer as an array of Uint32s 
var uint32s = new Uint32Array(buffer);

 
// The same raw bytes are now interpreted differently
uint32s[0] === 84215045 // true - 0x05050505 == 84215045

Таким образом, типизированные массивы можно использовать для таких задач, как создание чисел с плавающей запятой из их байтовых составляющих или создание структур данных, которые требуют специального макета данных для эффективности или совместимости форматов данных.

Объект DataView

Типизированные массивы позволяют реализовывать новый важный сценарий работы — чтение и преобразование пользовательских форматов двоичных файлов, которые изначально не поддерживаются браузером. В дополнение к разнообразным типам массивов, рассмотренным выше, типизированные массивы также предоставляют объект DataView, который может использоваться для несистематизированного чтения и записи содержимого ArrayBuffer. Этот способ хорошо подходит для чтения новых форматов файлов, которые обычно представляют собой разнородную смесь данных.

Ниже приводится пример использования объекта DataView для чтения заголовка файла изображения в формате PCX, который содержит информацию о ширине, высоте, разрешении и глубине цвета.


var buffer = getPCXFileContents();
var reader = new DataView(buffer);

 
// Read the header of the PCX file
var header = {}

 
// The first section is single bytes 
header.manufacturer = reader.getUint8(0);
header.version = reader.getUint8(1);
header.encoding = reader.getUint8(2);
header.bitsPerPixel = reader.getUint8(3);


// The next section is Int16 values, each in little-endian
header.xmin = reader.getInt16(4, true);
header.ymin = reader.getInt16(6, true);
header.xmax = reader.getInt16(8, true);
header.ymax = reader.getInt16(10, true);
header.hdpi = reader.getInt16(12, true);
header.vdpi = reader.getInt16(14, true);

Вы можете использовать код, подобный этому примеру, для поддержки обработки широкого диапазона новых форматов данных в браузере. Например, сюда входят пользовательские форматы изображений, дополнительные форматы видеофайлов или форматы данных карты, относящиеся к конкретному домену.

Получение двоичных данных с помощью XHR и файлового API

Для доступа к файлам с сервера в API XMLHttpRequest была добавлена поддержка различных типов responseType. Тип отклика "arraybuffer" предоставляет содержимое запрошенного ресурса сервера в JavaScript в качестве объекта ArrayBuffer. Также поддерживаются типы отклика blob, text и document.


function getServerFileToArrayBufffer(url, successCallback) {
    // Create an XHR object
    var xhr = new XMLHttpRequest();


    xhr.onreadystatechange = function () { 
        if (xhr.readyState == xhr.DONE) {
            if (xhr.status == 200 && xhr.response) {
                // The 'response' property returns an ArrayBuffer
                successCallback(xhr.response);
            } else {
                alert("Failed to download:" + xhr.status + " " + xhr.statusText);
            }
        }
    }

 
    // Open the request for the provided url 
    xhr.open("GET", url, true);


    // Set the responseType to 'arraybuffer' for ArrayBuffer response 
    xhr.responseType = "arraybuffer";

	 
    xhr.send();
}

Во многих случаях файлы предоставляются пользователем — например, как вложение в сообщение электронной почты в приложении веб-почты. Файловый API предлагает веб-разработчикам средства для чтения содержимого файлов, загруженных с помощью элемента input, путем перетаскивания файлов с Рабочего стола на веб-сайт или из любого другого источника, поддерживающего файлы или большие двоичные объекты. Объект FileReader предназначен для чтения содержимого файла в ArrayBuffer и, как и объект XHR, является асинхронным, чтобы чтение с диска не мешало пользовательскому интерфейсу отвечать на запросы.


function readFileToArrayBuffer(file, successCallback) {
    // Create a FileReader 
    var reader = new FileReader();


    // Register for 'load' and 'error' events
    reader.onload = function () {
        // The 'result' property returns an ArrayBuffer for readAsArrayBuffer 
        var buffer = reader.result;
        successCallback(buffer);
    }


    reader.onerror = function (evt) {
        // The error code indicates the reason for failure
        if (evt.target.error.name == "NotReadableError") {
            alert("Failed to read file: " + file.name);
        }
    }


    // Begin a read of the file contents into an ArrayBuffer
    reader.readAsArrayBuffer(file);
}

Примеры и учебники

Типизированные массивы

Демонстрационные версии тестовых выпусков Internet Explorer

Инспектор двоичных файлов

Записи блога IEBlog

Работа с двоичными данными с помощью типизированных массивов.

Спецификация

Спецификация типизированных массивов

 

 

Показ:
© 2014 Microsoft