JavaScript类型数组_TypedArray使用-js教程-PHP中文网

JavaScript类型数组_TypedArray使用

夢幻星辰

发布： 2025-11-29 13:45:39

原创

356人浏览过

TypedArray是一组用于操作ArrayBuffer中固定长度、特定类型二进制数据的类数组视图，包括Int8Array、Uint8Array等多种类型，常用于高性能场景如图像、音频和网络通信；通过具体视图构造函数创建实例，共享底层ArrayBuffer内存，支持set、subarray等操作，但不支持push、pop等动态方法，且多字节数据受系统字节序影响，适合与DataView结合处理复杂二进制格式。

javascript类型数组_typedarray使用

JavaScript 中的 TypedArray 并不是一个单一的构造函数，而是一组用于表示固定长度、特定类型原始二进制数据的视图。它们常用于处理音频、图像、网络协议或 WebGL 等需要高性能操作底层数据的场景。

什么是 TypedArray？

TypedArray 是一种类数组对象，用于读写 ArrayBuffer 中的数据。它不能直接创建实例，而是通过具体类型的视图来操作二进制数据。常见的 TypedArray 类型包括：

Int8Array：8 位有符号整数
Uint8Array：8 位无符号整数
Uint8ClampedArray：8 位无符号整数（溢出时夹紧，常用于像素）
Int16Array：16 位有符号整数
Uint16Array：16 位无符号整数
Int32Array：32 位有符号整数
Uint32Array：32 位无符号整数
Float32Array：32 位浮点数
Float64Array：64 位浮点数

这些视图都基于 ArrayBuffer，它是真正存储二进制数据的容器。

基本使用方法

要使用 TypedArray，通常先创建一个 ArrayBuffer，然后用某种类型视图去“解释”这块内存。

立即学习“Java免费学习笔记（深入）”；

1. 创建 ArrayBuffer 和视图

// 创建一个 8 字节的缓冲区
const buffer = new ArrayBuffer(8);
<p>// 使用 Uint8 视图操作每个字节
const uint8View = new Uint8Array(buffer);
uint8View[0] = 42;
uint8View[1] = 255;</p><p>// 使用 Int32 视图解释前 4 个字节为一个 32 位整数
const int32View = new Int32Array(buffer);
console.log(int32View[0]); // 输出：42 + (255 << 8) = 65578</p>

登录后复制

2. 直接初始化 TypedArray

也可以不显式创建 ArrayBuffer，直接传入数组：

const arr = new Uint8Array([10, 20, 30, 40]);
console.log(arr); // Uint8Array [10, 20, 30, 40]
console.log(arr.buffer); // 对应的 ArrayBuffer

登录后复制

3. 从现有 ArrayBuffer 创建多个视图

同一个 ArrayBuffer 可以被多种视图共享，但注意数据解释方式不同：

const buf = new ArrayBuffer(4);
const a = new Uint8Array(buf);
const b = new Int32Array(buf);
<p>a[0] = 1;
a[1] = 2;
a[2] = 3;
a[3] = 4;</p><p>console.log(b[0]); // 按小端序：0x04030201 → 67305985</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/8674">
                            <img src="https://img.php.cn/upload/webcode/000/000/010/175620060394861.png" alt="WiseHome家政预约小程序">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/8674">WiseHome家政预约小程序</a>
                            <p>家政服务平台系统包含家用电器安装清洗、搬家、家电维修、管道疏通、月嫂保姆、育儿陪护、上门开锁等多种服务项目，用户可以直接通过家政小程序咨询，在线预约服务类型，同时还设置有知识科普，给用户科普一些清洁保养小技巧，让用户能够足不出户就可以直接预约服务，方便又快捷。本项目使用微信小程序平台进行开发。使用腾讯专门的小程序云开发技术，云资源包含云函数，数据库，带宽，存储空间，定时器等，资源配额价格低廉，无需</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="WiseHome家政预约小程序">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/8674" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="WiseHome家政预约小程序">
                        </a>
                    </div>

登录后复制

常见操作与注意事项

支持类数组操作

TypedArray 提供了类似数组的方法：

.length：获取元素个数（不是字节数）
.set(array)：复制数据到指定位置
.subarray(start, end)：返回子视图（共享内存）
for...of 遍历值

不支持的操作

TypedArray 不是真正的 Array，所以：

不能调用 push() 或 pop()（长度固定）
某些高阶方法如 map()、filter() 返回的是新 TypedArray
不会自动扩容

字节序问题

多字节类型（如 Int32Array）依赖系统字节序（通常是小端序）。在网络传输或跨平台时需注意，必要时可使用 DataView 手动控制读写顺序。

应用场景举例

处理图像像素数据

Canvas 或 ImageData 常用 Uint8ClampedArray 存储 RGBA 像素：

const pixels = new Uint8ClampedArray(4 * 100 * 100); // 100x100 图像
pixels[0] = 255; // R
pixels[1] = 0;   // G
pixels[2] = 0;   // B
pixels[3] = 255; // A

登录后复制

WebSocket 二进制通信

接收二进制消息后可用 TypedArray 解析：

socket.onmessage = function(event) {
  if (event.data instanceof ArrayBuffer) {
    const bytes = new Uint8Array(event.data);
    console.log('Received:', bytes);
  }
};

登录后复制

基本上就这些。TypedArray 提供了高效操作二进制数据的能力，理解它和 ArrayBuffer 的关系是关键。实际开发中结合 DataView 可更灵活地处理复杂格式。

以上就是JavaScript类型数组_TypedArray使用的详细内容，更多请关注php中文网其它相关文章！