ArrayBuffer 介绍

ArrayBuffer 表示二进制数据的原始缓冲区,该缓冲区用于存储各种类型化数组的数据。是最基础的原始数据容器,无法直接读取或写入, 需要通过其他方式来读写。如:

1
2
3
4
5
6
7
Int8Array             8位有符号整数
Uint8Array 8位无符号整数
Uint8ClampedArray 8位无符号整数,像素操作

Int16Array 16位有符号整数
Uint16Array 16位无符号整数
...

ArrayBuffer 的构造函数:

1
2
3
4
ArrayBuffer(length)

// 参数 length:要创建的 ArrayBuffer 的大小,单位为字节
// 返回值:一个指定大小的 ArrayBuffer 对象,其内容被初始化为

方法:

1
ArrayBuffer.slice() // 切片

接下来通过一个例子来直观地了解它的用法。比如我们上传一个文件,读取文件内容并将其转换为字符串:

1
2
3
4
5
6
7
8
9
10
11
function FileToString(file) {
var r = new FileReader(); // 初始化一个文件对象,用于读取文件
var buffer = r.readAsArrayBuffer(file); // 将文件读取为 ArrayBuffer
var uint8arr = new Uint8Array(buffer); // 创建一个 Uint8Array 来读取 ArrayBuffer
var str = '';
for(var i=0; i<uint8arr.length; i++) {
// String.fromChatCode() 接收一个 Unicode 值,返回对应的字符
str += String.fromChatCode(uint8arr[i]);
}
return str;
}

我们了解了 ArrayBuffer 转字符串,接下来看看如何将字符串转换为 ArrayBuffer:

1
2
3
4
5
6
7
8
9
function StringToBuffer(str) {
var buffer = new ArrayBuffer(str.length); // 创建一个长度为字符串长度,值为0的 ArrayBuffer
var uint8arr = new Uint8Array(buffer); // 创建一个 Uint8Array
for(var i=0; i<str.length; i++) {
// charCodeAt(index) 方法接收一个下标,返回下标对应字符的 Unicode 值
uint8arr[i] = str.charCodeAt(i);
}
return buffer;
}