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.fromCharCode(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;
}