在前端开发中，我们经常需要处理二进制数据。JavaScript提供了ArrayBuffer作为一种表示和操作二进制数据的标准类型。同时，使用Base64编码的字符串也是常见的数据传输格式之一。本文将介绍ArrayBuffer和Base64编码的字符串，并探讨它们的结合使用及其指导意义。
ArrayBuffer
ArrayBuffer是一种“缓冲区”对象，用于表示通用的、固定长度的二进制数据缓冲区。其大小单位为字节，并且不能动态改变。通过ArrayBuffer对象，我们可以直接读写底层的二进制数据。例如：
--- ------ - --- --------------- --- ---- - --- ----------------- ---------------- ------- -- --- ----- ----- - --- ------------------------------ -- -- -----
上面的例子中，我们创建了一个大小为4字节的ArrayBuffer对象，然后通过DataView对象读写其中的数据。DataView是一种用于读写ArrayBuffer数据的接口，可以指定读写的起始位置和数据类型，避免了字节序的问题。
Base64编码的字符串
Base64是一种用于将二进制数据编码成ASCII字符的算法。通过Base64编码，我们可以将二进制数据转换成纯文本格式，方便在HTTP、电子邮件等协议中传输。Base64编码的字符串由64个字符组成，包括大写字母、小写字母、数字和两个特殊字符+和/。例如：
----------------
上面的字符串是“Hello world!”的Base64编码结果。
JavaScript提供了btoa()和atob()方法，用于将字符串和Base64编码的字符串相互转换。例如：
--- --- - ------ -------- --- --------- - ---------- ----------------------- -- -- ---------------- --- ---------- - ---------------- ------------------------ -- -- ----- ------
ArrayBuffer与Base64编码的字符串的结合使用
在实际应用中，我们有时需要将二进制数据以Base64编码的字符串的方式进行传输或保存。例如，我们可以通过XMLHttpRequest对象发送请求，并将请求体以Base64编码的字符串的形式进行传输：
--- --- - --- ----------------- ---------------- --------------- ------------------------------------ -------------------- --- ------ - --- --------------- --- ---- - --- ----------------- ---------------- ------- --- --------- - ------------------------------------ --- --------------------- ------------------------- ----- --------- ----
上面的例子中，我们创建了一个大小为4字节的ArrayBuffer对象，并向其中写入整数 12345。然后，我们将ArrayBuffer对象转换成Uint8Array数组，并通过String.fromCharCode.apply()方法将数组元素拼接成字符串。最后，我们使用btoa()方法将字符串以Base64编码的形式进行传输。
在接收到Base64编码的字符串后，我们可以使用atob()方法将其解码成二进制数据，并再次转换成ArrayBuffer对象：
--- --- - --- -----------------
--------------- -----------------
---------------- - -------
---------- - ---------- -
--- --------- - -----------------
--- --------- - ----------------
--- ------ - --- ------------------------------
--- ---- - --- -----------------
--- ---- - - -- - - ----------------- ---- -
---------------- -------------------------
-
------------------------------ -- -- -----
--
-----------上面的例子中，我们
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10861