JavaScript中的ArrayBuffer是什么
一、JavaScript中的栈和堆
先简单说说JavaScript中的数据类型,主要分为两种,一种是值类型,一种是引用类型,常见的引用类型有Objact, Array, 如果数组中的元素是Nurmber, String之类的值类型会直接被压入栈中, 而引用类型只会压入对应的一个索引
指针就是指向对象和数组的一个索引,并不等于真正的这个对象和数组
因为arr是数组,是引用类型,str仅仅是从arr堆内存中获取的一个数据值,并保存在栈中,是直接在栈中修改,并且不能指向arr堆内存中。
二、那么ArrayBuffer到底是什么呢?
1、ArrayBuffer又称类型化数组,是一个二进制数据的原始缓存区,无法直接读取或者写入(也就是说只能存放0,1并且不能直接修改和读取)
2、数组是放在堆中,ArrayBuffer数组则把数据放在栈中(所以取数据时后者快)
3、可以根据需要传递类型化数组或者DataView对象来解释原始缓存区
4、ArrayBuffer初始化后固定大小,数组则可以自由增减。
类型化数组有以下几种:
名称 占用字节 描述
Int8Array 1 8位二补码有符号整数
Uint8Array 1 8位无符号整数
Uint8ClampedArray 1 8位无符号整型固定数组(数值在0~255之间)
Int16Array 2 16位二补码有符号整数
Uint16Array 2 16位无符号整数
Int32Array 4 32 位二补码有符号整数
Uint32Array 4 32 位无符号整数
Float32Array 4 32 位 IEEE 浮点数
Float64Array 8 64 位 IEEE 浮点数

如上:首先分配了32字节的空间,in8使用Int8Array类型从0开始4个数据,每个数据占1个字节,所以A视图一共占用了2(0-2)个字节,后面的以此类推,最后留给in16空间有6字节,如果传入的length为超过6字节,那么就超出了所分配内存的范围而报错。

如上:前四个属性都是只读的:
buffer 返回ArrayBuffer的引用
byteLength 返回字节长度
byteOffset 返回视图在该ArrayBuffer中占用内存区域的起点位置
length 返回视图数据的个数
set() 第一个参数为已有的视图或者数组,第二个参数代表从第几个字节开始设置值
subarray 返回一个新的视图,如果第二个参数省略,则取剩余的全部
entries和keys两个方法目前仅在chrome和FireFox上面支持,返回一个数组迭代对象,你可以通过该对象的next()方法依次取得相应的值,或者使用for...of循环进行迭代。
在写这篇随便的时候,我查看了Mozilla开发者网络实际上这几种视图类型的原型TypedArray还有很多方法,诸如join、indexOf、forEach、map等,但可惜其他浏览器并不支持,或许将来会有所改善。
三、DataView视图
为了解决各种硬件设备、数据传输等对默认字节序的设定不一而导致解码时候会发生的混乱问题,javascript提供了DataView类型的视图来让开发者在对内存进行读写时手动设定字节序的类型。
1、DataView构造函数

2、DataView实例化后的对象所具有的功能

new DataView(buffer).setInt16(byteOffset ,value , [ littleEndian])
byteOffset 表示从内存的哪个字节开始
value 该对应字节将被设置的值
littleEndian 字节序,true为小端字节序,false或者不填为大端字节序
值得注意的是,在DataView视图中,读写超出其实例化时的范围的值时,都会发生错误,这跟之前的固定类型的视图不一样,在使用时更加谨慎
四、ArrayBuffer与字符串
javascript的字符串使用UTF-16编码的方式,所以我们可以这样来做:

var buffer = new ArrayBuffer(str.length * 2);
因为每个字母占两个字节所以总字节为length乘2
str.charCodeAt(i)把括号里的字符转成Unicode编码
小结
本篇文章主要写的是前端获取ArrayBuffer数据的方法,以及使用,写的时候发现自己还是有很多没搞懂的地方,虽然查了一些资料,但是可能还是错误的地方,希望发现的大家可以指出。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析