JavaScript学习笔记：14.类型数组

原创 于 2025-12-16 18:57:02 发布 · 511 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #学习 #笔记

JavaScript学习笔记：14.类型数组

上一篇用Promise搞定了异步任务的“承诺管理”，这一篇咱们来解锁JS处理底层数据的“硬核工具”——类型数组（Typed Arrays）。做前端如果只跟普通数组打交道，那你大概率没碰过“二进制数据”的硬骨头：比如读取图片像素、处理文件上传的原始数据、操作WebGL图形数据，甚至解析音视频流…… 这些场景下，普通数组就像“万能杂货铺”，什么都能装但杂乱无章、效率低下，而类型数组是“专用集装箱”——固定规格、固定容量，只装同一种类型的二进制数据，又快又稳还不混乱。

新手常把类型数组和普通数组搞混，觉得“不都是存数据的吗？” 但实际上，类型数组是为“高效操作二进制数据”量身定做的：元素类型固定、长度固定、直接操作内存，比普通数组快一个量级。今天咱们就用“装修房子”的比喻，把类型数组的本质、用法、场景和避坑指南彻底讲透，让你在处理二进制数据时不再手足无措。

一、先破案：为什么需要类型数组？普通数组不够用吗？

普通数组的“灵活”在二进制场景下全是缺点，就像用杂货铺的篮子装集装箱的货物——又慢又乱。咱们先看普通数组的三大痛点：

  1. 类型混杂：普通数组能存数字、字符串、对象，比如[1, "2", {}]，但二进制数据需要“同类型、固定长度”的存储；
  2. 效率低下：普通数组是对象，存储时带额外元数据，操作大数据量（比如10万像素）时卡顿；
  3. 无二进制支持：普通数组无法直接解读内存中的二进制数据，比如无法直接读取文件的字节流、Canvas的像素数据。

而类型数组完美解决这些问题：

  • 元素类型唯一：比如Uint8Array只能存0-255的整数，专门对应字节数据；
  • 固定长度：创建时就确定容量，不支持push/pop，避免动态调整的开销；
  • 直接操作内存：底层基于ArrayBuffer（纯内存块），读写速度接近原生代码；
  • 二进制友好：天然支持各种数值类型（8位整数、32位浮点数等），适配硬件存储格式。

举个直观例子：处理100万像素的图片数据，普通数组遍历需要20ms，类型数组只需3ms——效率差了一个量级。

二、核心概念：类型数组的“两大核心”——缓冲+视图

类型数组的设计精髓是“分离缓冲和视图”，就像“装修房子”：

  • ArrayBuffer（缓冲）：相当于“毛坯房”——一块纯粹的内存块，没有任何格式，也不能直接读写，只负责存储原始字节；
  • 视图：相当于“装修图纸”——定义如何解读毛坯房的内存，比如“按8位无符号整数解读”“按32位浮点数解读”。

没有视图的缓冲就是“一堆没用的内存”，没有缓冲的视图就是“一张废纸”，两者必须结合才能用。

1. 缓冲：ArrayBuffer（内存毛坯房）

ArrayBuffer是所有类型数组的基础，是JS操作原始内存的接口。创建缓冲就像买毛坯房，指定面积（字节数）：

// 创建16字节的缓冲（相当于16平米的毛坯房）
const buffer = new ArrayBuffer(16);
console.log(buffer.byteLength); // 16（确认面积）

核心特点：

  • 初始化后所有字节都是0（毛坯房是空的，没有任何家具）；
  • 不能直接读写：不能用buffer[0]访问，必须通过视图；
  • 支持复制、转移、调整大小（部分方法需现代浏览器支持）。

2. 视图：解读内存的“装修图纸”

视图分两种：类型化数组视图（常用）和DataView（灵活底层），它们都是访问ArrayBuffer的“接口”。

（1）类型化数组视图：“标准化装修”

相当于“精装修图纸”——固定数据类型，操作简单，适合同类型数据。JS提供11种类型化数组，覆盖从8位整数到64位浮点数的所有常见场景：

类型通俗名称值范围字节数核心场景
Uint8Array8位无符号整数集装箱0~2551图片像素、文件字节流
Uint8ClampedArray像素专用集装箱0~255（自动裁剪）1Canvas像素处理（避免超界）
Int16Array16位有符号整数集装箱-32768~327672音频数据、传感器数据
Uint32Array32位无符号整数集装箱0~42949672954大整数ID、图形顶点数据
Float32Array32位浮点数集装箱±3.4E3843D图形、科学计算
Float64Array64位浮点数集装箱±1.8E3088高精度计算（和普通数组一致）

用法示例：用Uint8Array操作16字节缓冲：

// 16字节缓冲（毛坯房）
const buffer = new ArrayBuffer(16);
// 创建视图（装修图纸：按8位无符号整数解读）
const uint8View = new Uint8Array(buffer);

// 操作数据（给“房子”摆家具）
for (let i = 0; i < uint8View.length; i++) {
  uint8View[i] = i * 10; // 0,10,20,...,150
}
console.log(uint8View); // Uint8Array(16) [0,10,20,...,150]

// 直接访问单个元素
console.log(uint8View[3]); // 30（第4个元素）
（2）DataView：“自定义装修”

相当于“毛坯房自定义装修”——不固定数据类型，可在同一缓冲中混合解读不同类型数据，还能控制字节序（大端/小端），适合处理复杂二进制结构（比如解析文件头、网络协议）。

用法示例：混合存储整数和浮点数：

const buffer = new ArrayBuffer(8);
const dv = new DataView(buffer);

// 偏移0字节：存16位整数（2字节）
dv.setInt16(0, 100, true); // true表示小端字节序
// 偏移2字节：存32位浮点数（4字节）
dv.setFloat32(2, 3.14);
// 偏移6字节：存8位整数（1字节）
dv.setUint8(6, 255);

// 读取数据
console.log(dv.getInt16(0, true)); // 100
console.log(dv.getFloat32(2)); // 3.14
console.log(dv.getUint8(6)); // 255

核心优势：灵活控制，适合解析复杂二进制格式（比如C语言结构体、音视频帧）。

3. 关键特性：多视图共享缓冲

这是类型数组最强大的特性——同一“毛坯房”可以有多个“装修图纸”，修改一个视图会影响其他视图，适合多格式解读同一数据：

const buffer = new ArrayBuffer(8);
// 视图1：按32位整数解读（2个元素）
const int32View = new Int32Array(buffer);
// 视图2：按16位整数解读（4个元素）
const int16View = new Int16Array(buffer);

// 修改视图1的第一个元素
int32View[0] = 65536; // 65536 = 0x00010000（32位）

// 视图2会同步变化（小端序下，低字节在前）
console.log(int16View); // Int16Array(4) [0, 1, 0, 0]

就像同一间房子，既能按“两室一厅”解读，也能按“四室一厅”解读，数据实时同步。

三、实战场景：类型数组的“用武之地”

类型数组不是“屠龙之技”，前端开发中这些场景经常用到：

1. 场景1：读取文件的二进制数据

上传文件时，用FileReader读取为ArrayBuffer，再用类型数组解析：

// 文件上传输入框
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  
  // 读取为ArrayBuffer
  reader.readAsArrayBuffer(file);
  reader.onload = (event) => {
    const buffer = event.target.result;
    // 用Uint8Array解析文件字节
    const uint8View = new Uint8Array(buffer);
    console.log(`文件前10字节：`, uint8View.slice(0, 10));
    // 可用于解析图片格式、文件头信息等
  };
});

2. 场景2：处理Canvas像素（Uint8ClampedArray）

Canvas的ImageData.data是Uint8ClampedArray，专门存储RGBA像素（每个像素4字节，0-255），且自动裁剪超界值：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;

// 填充红色
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);

// 获取像素数据（Uint8ClampedArray）
const imageData = ctx.getImageData(0, 0, 100, 100);
const pixels = imageData.data;

// 修改像素：将红色改为粉色（R=255, G=192, B=203, A=255）
for (let i = 0; i < pixels.length; i += 4) {
  pixels[i + 1] = 192; // G通道
  pixels[i + 2] = 203; // B通道
}

// 写回Canvas
ctx.putImageData(imageData, 0, 0);
document.body.appendChild(canvas);

核心优势：Uint8ClampedArray会自动把超界值裁剪到0-255，比如设置为300会变成255，避免像素异常。

3. 场景3：解析二进制文本（UTF-8/UTF-16）

用类型数组读取二进制缓冲中的文本，适配不同编码：

// 场景：解析UTF-8文本
const utf8Buffer = new ArrayBuffer(6);
const utf8View = new Uint8Array(utf8Buffer);
// 写入“你好”的UTF-8编码（228, 189, 160, 229, 165, 189）
utf8View.set([228, 189, 160, 229, 165, 189]);
// 解码为字符串
const text = new TextDecoder('utf-8').decode(utf8View);
console.log(text); // "你好"

// 场景：解析UTF-16文本
const utf16Buffer = new ArrayBuffer(4);
const utf16View = new Uint16Array(utf16Buffer);
// 写入“你好”的UTF-16编码（0x4F60, 0x597D）
utf16View.set([0x4F60, 0x597D]);
// 解码为字符串
const text16 = String.fromCharCode(...utf16View);
console.log(text16); // "你好"

四、避坑指南：类型数组的“常见陷阱”

1. 陷阱1：类型数组是“固定长度”，不支持动态调整

普通数组能push/pop，但类型数组不行——长度创建后就固定，操作越界不报错也不生效：

const uint8 = new Uint8Array([1, 2, 3]);
uint8.push(4); // 报错：uint8.push is not a function
uint8[3] = 4; // 无效，数组长度还是3
console.log(uint8.length); // 3

避坑：需要动态调整时，先创建新缓冲和视图，复制旧数据。

2. 陷阱2：索引越界不报错，返回undefined

普通数组越界返回undefined，但类型数组写入越界会静默失败，读取越界也返回undefined，容易忽略错误：

const uint8 = new Uint8Array([1, 2, 3]);
console.log(uint8[10]); // undefined（读取越界）
uint8[10] = 100; // 写入越界，无报错但无效

避坑：操作前检查索引是否在0 ~ length-1范围内。

3. 陷阱3：数据类型转换的“隐式裁剪”

给类型数组赋值时，会自动转换为对应类型，超出范围会裁剪/溢出，不报错：

const uint8 = new Uint8Array(1);
uint8[0] = 300; // 300超出0-255，裁剪为300 % 256 = 44
console.log(uint8[0]); // 44

const int8 = new Int8Array(1);
int8[0] = 130; // 130超出-128~127，溢出为-126
console.log(int8[0]); // -126

避坑：赋值前确保数据在对应类型的范围内，尤其是处理外部数据时。

4. 陷阱4：字节序的“隐形坑”

类型数组视图默认使用“本地字节序”（多数浏览器是小端），而DataView默认大端，跨平台传输时容易出错：

// 小端序（本地）：低位字节在前
const int16 = new Int16Array(new ArrayBuffer(2));
int16[0] = 256; // 二进制00000001 00000000，小端存储为00000000 00000001
console.log(int16[0]); // 256

// DataView默认大端：高位字节在前
const dv = new DataView(new ArrayBuffer(2));
dv.setInt16(0, 256); // 大端存储为00000001 00000000
console.log(dv.getInt16(0)); // 256
console.log(dv.getInt16(0, true)); // 1（小端读取，解析错误）

避坑：跨平台传输（如网络请求、文件解析）时，用DataView显式指定字节序。

五、普通数组vs类型数组：核心区别

特性普通数组类型数组
元素类型任意类型（数字、字符串等）固定单一类型（如Uint8）
长度动态可变（push/pop）固定不变
内存操作间接操作（带元数据）直接操作内存（高效）
二进制支持不支持原生支持（字节级操作）
效率低（大数据量卡顿）高（接近原生代码）
适用场景普通数据存储、遍历文件、音视频、Canvas、WebGL

六、总结：类型数组的核心价值

类型数组的本质是“JS操作二进制数据的接口”，核心价值是高效、精准地处理底层数据。它不是普通数组的替代品，而是“互补品”——普通数组管“灵活”，类型数组管“底层”。

记住三个核心点：

  1. 缓冲（ArrayBuffer）是“数据容器”，视图是“访问接口”，两者缺一不可；
  2. 类型化数组视图适合同类型数据，DataView适合复杂混合类型；
  3. 固定长度、直接操作内存是高效的关键，也是坑的来源，需注意边界和类型检查。

掌握类型数组，你就能搞定前端的“底层数据处理”场景，比如解析自定义文件格式、优化大数据量渲染、处理音视频流等，从“普通前端”向“高级前端”再迈一步。

javascript学习笔记(五) Array 数组类型介绍
01-21
数组的创建 第一种： 代码如下: var colors = new Array(); var colors = new Array(20);//创建包含20项的数组 var colors = new Array(“Greg”);//创建包含1项，即字符串”Greg”的数组 var colors = new Array(...
jqGrid 的使用笔记：1. 开始
04-18
**jqGrid 使用笔记：开始** jqGrid 是一个强大的 jQuery 插件，用于创建灵活、功能丰富的数据网格。这篇笔记将引导我们逐步了解如何在项目中开始使用 jqGrid。jqGrid 提供了丰富的特性，包括数据分页、排序、过滤、...
JavaScript学习笔记：9.数组
Amon的专栏
12-14 961
上一篇咱们驯服了JS的“时间管家”（日期与时间），这一篇来解锁开发中出场率最高的“数据容器”——数组（Array）。如果把JS的数据类型比作生活中的收纳工具，那数组就是“带格子的万能收纳箱”：既能按顺序装下一堆数据，又能批量操作、筛选、改造里面的内容，不管是展示列表数据、处理接口返回结果，还是操作DOM元素，都离不开它。 新手常栽在数组的“陷阱”里：比如用sort()排序数字却得到乱序结果，用forEach()想终止循环却发现行不通，或是把“类数组”当数组用导致方法报错。今天就用“收纳箱管理”的思路，把数
【JS学习笔记】8.JavaScript数组（数组，for....in循环，二维，冒泡排序）
jacksonCya，Hello My World
09-27 1432
文章目录数组的基本1.定义一个数组：2.向数组中的元素赋值：3.获取数组中的元素4.用length属性，获取数组的大小，并使用循环遍历数组的每个元素创建数组的方法方式一：直接使用new Array();方式二：使用数组字面量补充知识：for...in循环数组的常用方法排序法sort()；反转 reverse()拼接操作join()，concat()join()：将数组拼接为stringconcat...
【Anime.js】——JavaScript动画库：Anime.js——学习笔记
热门推荐
qq_50497708的博客
12-14 1万+
官网定义：anime.js 是一个简便的JS动画库，用法简单而且适用范围广，涵盖CSS，DOM，SVG还有JS的对象，各种带数值属性的东西都可以动起来。
学习笔记：Vue常用操作数组函数(一)
weixin_58257357的博客
03-20 2239
一. 更新数组 注 以下API最大的好处是可以被Vue的watch和计算属性监视到，可以方便在watch或者computed的操作。 1. push(Element): 向数组末尾添加元素（更新原数组），并且会返回更新后数组的长度 例 let arr = ['first','second','third','last'] arr.push('new'); console.log(arr); result-----&
JavaScript学习笔记：数组
howard2005的专栏
12-03 787
JavaScript学习笔记：数组 数组是一组数据构成的集合，通过下标或索引访问里面的元素。 1、创建数组 （1）创建空数组，逐个赋值 <script type="text/javascript"> // 创建数组 var scores = new Array(); // 逐个赋值 scores[0] = 89; scores[1] = 90; scores[2] = 67...
学习笔记：JavaScript（数组）
Yang_Xingxing_的博客
06-04 339
1. 数组的概念 数组是指一组数据的集合 ，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下 的优雅方式。 // 普通变量一次只能存储一个值 var num = 10; // 数组一次可以存储多个值 var arr = [1, 2, 3, 4, 5]; 2. 创建数组 2.1 数组的创建方式 JS中创建数组有两种方式： 利用 new 创建数组 利用数组字面量创建数组 2.2 利用 new 创建数组 var 数组名 = new Array(); var
JavaScript学习笔记：取数组中最大值和最小值
Yveda_csdn的博客
09-18 1491
在实际业务中有的时候要取出数组中的最大值或最小值。但在数组中并没有提供arr.max()和arr.min()这样的方法。那么是不是可以通过别的方式实现类似这样的方法呢？那么今天我们就来整理取出数组中最大值和最小值的一些方法。 取数组中最大值 可以先把思路理一下： 将数组中第一个元素赋值给一个变量，并且把这个变量作为最大值； 开始遍历数组，从第二个元素开始依次和第一个元素进行比较 如果当前...
JavaScript 学习笔记 对象属性 symbol 数组常用方法
小哈力----一个小前端工程师
12-26 606
即，当对象属性为基本类型时，可以用如下方法进行对象拷贝；一旦含有引用类型属性时，下面的方法将失效。属性值为-Infinity、属性值为Infinity、属性值为NaN。使用 lodash 库的 _.cloneDeep(obj)。对其前面的属性进行可选性校验，第一级写了不起作用，所以不用写。用非数字作为key，就不会把“1” 排在最前面了。function、属性值为undefined、obj下有方法method才执行。
JavaScript学习笔记(3)：数组
Coding for freedom
05-24 266
JavaScript对数组内容的类型没有要求，可以是大杂烩。 arr.length arr.length可以直接获取数组的长度 var arr=[1, 2, 3.14, 'Hello', null, true]; arr.length;//返回数组长度6 如果对arr.length进行赋值操作，则会改变数组的长度 var arr=[1, 2, 3.14, 'Hello', null, true]...
JavaScript进阶笔记：数据类型、数组、对象与DOM操作详解
本资源是一份关于JavaScript的详细学习笔记，主要涵盖了Day_3-4的学习内容，重点涉及JavaScript的核心概念和技术。以下是具体内容的深入解析： 1. **JavaScript数据类型**：首先，笔记介绍了JavaScript中的基本数据...
JavaScript 根据数组对象的某个 指定属性 分组合并，并累加金额
最新发布
zhangyao940330的博客
12-15 98
item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 164
Boolean。
javascript 性能优化实战：异步和延迟加载
小伙伴们全都Lucky！
12-11 923
本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。
第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）
2402_87628679的博客
12-11 950
gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。
ESM (ES Modules) 和 CJS (CommonJS)
Irene1991的博客
12-11 647
ESM和CJS是JavaScript的两种模块系统。ESM是ES6引入的现代标准，采用静态编译时加载，支持TreeShaking；CJS是Node.js传统方式，采用动态运行时加载。ESM语法为import/export，CJS为require()/module.exports。新项目推荐ESM，维护旧项目可使用CJS。两者可互相调用：ESM通过createRequire调用CJS，CJS通过动态import()调用ESM。配置时需注意文件扩展名和package.json的type字段声明。ESM代表Jav
华为云 DevUI初体验：如何快速入门项目搭建
康宝的博客
12-10 543
本文详细介绍了基于Angular 18和华为云DevUI的企业级Web应用开发环境搭建流程。主要内容包括：Node.js 20+环境准备、Angular CLI 18安装、项目初始化配置（选择SCSS样式）、DevUI组件库及图标库的安装。文章重点说明了如何在项目中正确配置DevUI样式和模块，并演示了基础组件的使用。通过这套技术方案，开发者可以快速构建具备丰富UI组件支持的企业级应用，提高开发效率。
第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）
2402_87628679的博客
12-11 1228
对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿蒙Armon

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值