arrayBuffer？Uint8Array？嘛玩意儿

arrayBuffer是什么玩意儿？相信有不少同学，在前端做开发多年，少有场景接触到这个概念，笔者今天就来简单跟大家聊一聊。

arrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组，通常在其他语言中称为byte array。arrayBuffer可以表示对固定长度内存的引用，怎么玩js聊到内存了呢，回到大学学C语言或者数据结构的感觉，有没有？

arrayBuffer是不能直接被操作的，需要通过类型数组对象[TypedArray]或者DataView对象来操作，它们能将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区内容。

// TypedArray 指的是以下的其中之一：

Int8Array();
Uint8Array();
Uint8ClampedArray();
Int16Array();
Uint16Array();
Int32Array();
Uint32Array();
Float32Array();
Float64Array();

我勒个去，怎么这么多莫名其妙的东西，DataView又是啥？DataView是自定义的解释器，我们暂时不管它

举个例子，Uint8Array表示把ArrayBuffer的每个字节（byte，8-bit）当成一个无符号整型数，指的范围是0-255

const arr=new Uint8Array([12,27,38,99,122]);
console.log(arr.length); // 5
console.log(arr[1]);// 27

这个数组底层使用 ArrayBuffer 实现的，一共占用了 5 byte 的内存

那么有什么应用场景呢？笔者今天就拿base64转文件来聊下

我们找张base64的图片，大家可以搜索个在线图片转base64的工具网站，转完之后的格式可能是这样

data:image/webp;base64,UklGRuCZA....

base64格式的格式一般是这样，data:[][;charset=][;base64]

那我们的实现的代码是这样

const str = 'data:image/webp;base64,UklGRuCZAA...';//只是示例哦，不是真的图片数据
function Base64toFile(dataurl, filename) {
    const arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]);
    let n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);//返回指定位置的字符的 Unicode 编码
    }
    return new File([u8arr], filename, {type: mime});
}

Base64toFile(str,'test');

到这里，我们base64转文件的操作就完成啦。当然我们生成HTML5的file对象后，就可以做其他事情了，比如发送给后端，或者干其他事情，当然也可以保存到本地。不过保存的话，直接将base64转blob对象，然后保存的话反而更加直接些

当然关于ArrayBuffer和具体TypedArray的用法还非常多，大家可以跟笔者一起讨论下。XMLHttpRequest标准上实现的请求库，都支持responseType指定为arraybuffer

喜欢的话，大家可以点个关注。想跟笔者深入交流的话，可以搜下公粽号：喵爸的小作坊