Javascript 操作二进制数据

简介: 一个类型化数组(TypedArray)对象描述了一个底层的二进制数据缓冲区

一个类型化数组(TypedArray)对象描述了一个底层的二进制数据缓冲区(binary data buffer)的一个类数组视图(view)。事实上,没有名为 TypedArray 的全局属性,也没有一个名为 TypedArray 的构造函数。相反,有许多不同的全局属性,它们的值是特定元素类型的类型化数组构造函数。

TypedArray 指的是以下的其中之一

Int8Array();
Uint8Array();
Uint8ClampedArray();
Int16Array();
Uint16Array();
Int32Array();
Uint32Array();
Float32Array();
Float64Array();

描述

ECMAScript 2015 定义了一个 TypeArray 构造器作为所有的类型化数组构造器(Int8Array, Int16Array 等)的原型([[Prototype]])。该构造器并不会直接暴露出来:即没有全局的 %TypedArray% 和 TypeArray 属性,只能通过使用类似于 Object.getPrototypeOf(Int8Array.prototype) 的方式直接访问。所有的类型化数组构造器都会继承 %TypeArray% 构造器函数的公共属性和方法。此外,所有的类型化数组的原型(如 Int8Array.prototype)都以 %TypeArray%.prototype 作为原型。

%TypedArray% 构造器自身不是特别有用,直接调用或使用 new 表达式实例化都会抛出一个TypeError 异常,除非在支持子类化(subclassing)创建对象的 JS 引擎下运行。但直到现在还没有这样的 JS 引擎出现。因此 %TypeArray% 仅仅在对所有的类型化数组构造器(Int8Array 等)的方法和属性进行 polyfill 的时候比较有用.

当创建一个 TypedArray 实例(如 Int8Array)时,一个数组缓冲区将被创建在内存中,如果一个 ArrayBuffer 对象被当作参数传给构造函数,那么将使用传入的 ArrayBuffer 代替(即缓冲区被创建到 ArrayBuffer 中)。缓冲区的地址被存储在实例的内部属性中,并且所有 %TypedArray%.prototype上的方法,例如 set value 和 get value 等,都会在这个数组缓冲区上进行操作。

属性访问

你可以使用标准数组索引语法获取类型化数组中的元素(也就是和访问普通数组元素一样,如 foo[1]),然而,在类型化数组上获取或者设置属性的值时,并不会在这个属性的原型链中进行搜索,即使在索引超出了边界的时候。在原型中添加的属性将会在 ArrayBuffer 中查询而不是在对象的属性中。但是你依然可以像其他对象一样使用命名的属性来访问(foo.bar 的形式);具体见下面的例子:

// 使用标准数组语法来获取和设置属性值
var int16 = new Int16Array(2);
int16[0] = 42;
console.log(int16[0]); // 42

// 原型中添加的属性访问不到(此时索引值未超边界,20 < 32)
Int8Array.prototype[20] = "foo";
(new Int8Array(32))[20]; // 0

// 即使索引值超出了边界也一样不能访问(20 > 8)
Int8Array.prototype[20] = "foo";
(new Int8Array(8))[20]; // undefined

// 使用负数索引也不行
Int8Array.prototype[-1] = "foo";
(new Int8Array(8))[-1]; // undefined

// 但是可以使用命名属性的方式访问到
Int8Array.prototype.foo = "bar";
(new Int8Array(32)).foo; // "bar"

总结

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组,通常在其他语言中称为“byte array”。

const buffer = new ArrayBuffer(8);

console.log(buffer.byteLength);
// expected output: 8

你不能直接操作 ArrayBuffer 的内容,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。

const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);

类型化数组是 Javascript 操作(内存)二进制数据的一个接口。类型化数组是建立在 ArrayBuffer 对象的基础上的。它的作用是,分配一段可以存放数据的连续内存区域。ArrayBuffer 作为内存区域,可以存放多种类型的数据。不同数据有不同的存储方式,这就叫做“视图”。目前,JavaScript 提供以下类型的视图。

在这里插入图片描述

相关文章
|
26天前
|
JavaScript 前端开发
js实现数据的双向绑定
js实现数据的双向绑定
26 2
|
16天前
|
JavaScript 算法 前端开发
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
32 0
|
1月前
|
数据采集 存储 JavaScript
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
本文介绍了如何使用Python编写网络爬虫程序爬取书旗网上的小说数据,并通过逆向工程对抗网站的反爬机制,最后对采集的数据进行可视化分析。
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
|
19天前
|
JSON JavaScript 数据格式
js实现更新数据
js实现更新数据
29 1
|
29天前
|
前端开发 JavaScript 安全
JavaScript——数字超过精度导致数据有误
JavaScript——数字超过精度导致数据有误
26 2
|
28天前
|
JavaScript 前端开发
JavaScript中通过按回车键进行数据的录入
这篇文章提供了一个JavaScript示例代码,演示了如何通过监听回车键(keyCode为13)在网页上实现数据的录入和触发一个警告框提示"正在登录验证......"。
JavaScript中通过按回车键进行数据的录入
|
1月前
|
JavaScript 前端开发
JS二进制转10进制、十六进制
JS二进制转10进制、十六进制 【8月更文挑战第9天】
38 6
|
1月前
|
JavaScript 数据处理
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
|
1月前
|
JavaScript 前端开发 开发者
js二进制及其相关转换全总结
【8月更文挑战第9天】js二进制及其相关转换全总结
56 5
|
30天前
|
JavaScript 算法 数据安全/隐私保护
烯牛数据JS逆向:MD5数据加密?不存在的!
烯牛数据JS逆向:MD5数据加密?不存在的!
50 1