JS 中的二进制操作简介

from 作者:刘骥(@刘骥-JimLiu)
网址:http://jimliu.net/2015/09/26/a-brief-look-at-binary-ops-in-js/

写这篇博客的起源是在div.io上的一篇文章《你所不知道的JavaScript数组》by 小胡子哥下的评论中的讨论。

因为随着XHR2和现代浏览器的普及,在浏览器当中处理二进制不再向过去那样无所适从,随着Canvas/WebGL等新技术逐渐开始进入大众视野,也会用到一些字节数组或者16位、8位整数等东西。在node.js刚刚发布的4.0版本中,Buffer的底层使用了更符合JS标准的Uint8Array来实现,浏览器和node.js再次向相同的目标靠近了一点点,所以对于JS中处理二进制,我就打算写这篇文章作一个入门性质的流水账,方便一些对二进制处理不了解的同学快速入门,虽然在前端领域用到的不多,不过也可以作为茶余饭后的休闲谈资。

二进制数据在JS程序里的表达

现今世界上几乎所有的计算机体系结构都是以字节(byte)为二进制数据的基本单位(注:不是说最小单位),所以二进制常常以字节数组的形式存在于程序当中。例如在C#里面,就用byte[],标准C里面没有byte类型,但可以通过typedefbyte定义为unsigned char的别名,效果是一样的。

JS设计之初似乎根本没想过要处理二进制的东西,加上对类型的极度弱化,对于字节的概念可以说是非常非常的模糊。如果要表达字节数组,那么似乎只能用一个普通数组来表示。

HTML5体系引入了一大堆新的东西,比如XHR2,是可以上传或下载二进制内容的,与之配套的东西就是JS里的ArrayBufferTyped Array了。

ArrayBuffer是一个固定长度的字节序列,你可以通过new ArrayBuffer(length)来得到一片空间,或者用下文将会介绍的方法从XHR2等途径获取。由于内部实现与数组不一样,ArrayBuffer通常都是连续内存(注意,这只是经验之谈,并不是规范也不是文档所明确的),因此对于高密度的访问操作而言它比JS中的Array速度会快很多(但并不要用它来简单地代替Array)。如果用Chrome的Profile工具查看Heap Snapshot,会发现ArrayBuffer会被单独列为一类,也许它的内存分配和布局与Array以及其他JS对象有一些差别吧。

ArrayBuffer是不能直接被访问的,因此需要借助Typed Array。Typed Array是一组具体数据类型的Array-Like类型的统称,包括

Int8Array             8位有符号整数,类似于C里面的char
Uint8Array            8位无符号整数,类似于C里面的unsigned char
Uint8ClampedArray     8位无符号整数,跟Uint8类似,但在溢出处理上不大一样
Int16Array            后面这些类型就不罗嗦了
Uint16Array
Int32Array
Uint32Array
Float32Array
Float64Array

Multiple views on the same dataTyped Array的背后是一个ArrayBuffer,也就是说,事实上的数据是存在ArrayBuffer里面的,而Typed Array只是给你提供了一个某种类型的读写接口,用MDN的话说,叫做

举个栗子,如果我们有一个ArrayBuffer名为buffer(先不考虑怎么构造这个测试数据),内容如下:

01 02 03 04 05 06 07 08

也就是说它有8个字节,我们分别用它来构造Uint8ArrayUint16ArrayUint32Array,则可以得到

var  u8 = new  Uint8Array(buffer); // length为8
var u16 = new Uint16Array(buffer); // length为4
var u32 = new Uint32Array(buffer); // length为2

它们的内容分别为

[1, 2, 3, 4, 5, 6, 7, 8]
[513, 1027, 1541, 2055]
[67305985, 134678021]

这不难理解。

可以看出,如果要手工构造上面的测试数据ArrayBuffer,用Uint8Array就会很方便(呃事实上这是我个人最常用的一种Typed Array)。

而如果用同样的ArrayBuffer构建带符号整数类型,则可能因为整数溢出而得到不同的结果,上面的例子并没有碰到,有兴趣的话可以自己试试。因此使用Typed Array也可以用来做有符号数和无符号数的转换。

如果你用过canvas的getImageData/putImageData的话,会发现它给你的就是一个Uint8ClampedArray,这东西访问起来速度比JS的原生Array快很多,使得对canvas进行高速的像素操作成为可能。

然而最最重要的一个概念还是:Typed Array不直接存放任何数据,所有对Typed Array进行读写的操作,最终都会落实到它背后所持有的ArrayBuffer的身上。ArrayBuffer才是真正的raw bytes,而Typed Array只是一个操作窗口/操作视图(View)。

获取二进制数据

nodejs那边先按住不表,这里谈谈在网页里如何获取二进制数据?常见的办法有3种,1是通过XMLHttpRequest 2,2是通过FileBlob一套相关接口。

通过XMLHttpRequest 2

XHR2的接口跟XHR几乎是一样的,当制定xhr.responseType = ‘arraybuffer‘以后,在成功获取数据的回调里就可以通过xhr.response来得到请求结果的ArrayBuffer了,然后就可以按照你的意愿来构造各种Typed Array进行访问。

responseType还可以有blob取值,可以用xhr.response获得Blob对象。

通过File和Blob

在HTML5中提供了对表单的文件控件<input type="file" />更丰富的操作,可以通过inputDOM对象的.files来获取一个FileList,当然通常浏览器都只提供了单选的文件控件,于是这里都只会有一个File对象。另外,通过拖拽、剪贴板等方式也能获取到File或者Blob

File继承了Blob,并提供了namelastModifiedDate等基础元数据,但是依然是一个深度封装,不能直接获取到它的二进制。

BlobBinary large object的缩写,它与ArrayBuffer的区别是除了raw bytes以外它还提供了mime type作为元数据。但它依然是无法直接被读写的。

这时候需要借助FileReader的帮忙。FileReader提供了一组用来将Blob读取为更为实用的类型的方法

readAsArrayBuffer()
readAsBinaryString()
readAsDataURL()
readAsText()

例如:

var file = get_file_some_how();
var fr = new FileReader();
fr.onload = function(e) {
    e.target.result; // 读取的结果
};
fr.readAsDataUrl(file); // readAsArrayBuffer

可以干什么呢?例如图片上传之前的本地预览(甚至基于canvas的编辑)等等都可以实现了。

Blob的其他构造方法多而杂,这里就先不到处搬运文档了。

消费二进制数据

何谓消费?最常见的方式也许就是通过XHR2直接把二进制数据以文件方式POST到服务端去。

这里我比较推荐使用FormData来构造POST数据。因为在服务端收的时候会比较容易一些,具体有兴趣可以去找找别人的例子。

虽然直接提交ArrayBuffer也是可以的,但是这种时候服务端收到的POST body会是一大团,用起来不方便。如果要使用FormData来提交ArrayBuffer,需要先将其构造成Blob

对Typed Array的构造留个心眼

当使用new xxxxxArray(arrayBuffer)这个重载进行构造的时候,它会默认基于此ArrayBuffer进行构造。但当使用new xxxxArray(another_typed_array)这个重载的时候,则是进行“拷贝构造”,这样两个Typed Array会指向不同的buffer,需要注意这是否符合预期。

如果需要基于同一个ArrayBuffer来构造Typed Array,可以使用Typed Array的bufferbyteLength,byteOffset来获取它背后的ArrayBuffer

Tips(坑)

对内存对齐留个心眼

当使用ArrayBuffer来构造Typed Array的时候,可以指定byteOffset参数,例如

var buffer = get_array_buffer_some_how();
var i16 = new Int16Array(buffer, 10);

上面的代码就能以buffer向后偏移10字节处为起点来构造Int16Array,但是如果将10设置为一个奇数,会发现如下错误:

RangeError: start offset of Int16Array should be a multiple of 2

这是因为Typed Array对内存对齐有要求,它不能在非对齐的位置建立,同理,Uint32ArrayInt32Array则要求偏移量是4字节对齐的。

因此如果你希望在非对齐的位置进行读写,则需要借助DataView的帮忙。

对字节序留个心眼

我们日常中所写的程序,几乎都不需要关心字节序,因此这个问题没那么严重,知道自己的程序会有字节序问题的人,开发到这里也肯定会知道问题的存在,但这里还是稍微提一下。

按照MDN的说法,Typed Array只会使用当前平台的字节序,例如我们现在用的桌面电脑不论PC还是Mac都是x86/x64的,也就是little-endian了。

使用DataView,不仅可以解决上面说到的内存对齐的问题,还可以指定读写时的字节序,具体参数都在文档里面了,就不搬运了。

使用DataView配合Typed Array也可以做到一个检测当前平台字节序的技巧:

function isLittleEndian() {
    var buf = new ArrayBuffer(2);
    var view = new DataView(buf);
    view.setInt16(0, 256, true); // 显式以little endian写入数据
    // 此时buf里的内存布局应该是 00 01

    var i16 = new Int16Array(buf);
    // 如果以little endian读取,它就是256;以big endian读取,则是1
    return (i16[0] === 256);
}

如果你编写的程序需要垮体系结构例如x86/ARM/PPC等,则在交换文件和网络包的时候需要谨慎处理字节序,当然一个办法是在这些地方预先规范统一字节序以防后患。不过那些都是题外话了。

小结

使用ArrayBuffer来存储一段字节,使用Typed Array来构建一个具体数值类型的访问窗口,使用DataView对非对齐或在乎字节序的ArrayBuffer进行更精确的操作,使用XHR2, BlobFileFileReaderFormData等多种方式来获取或消费ArrayBuffer

时间: 2024-10-14 13:39:12

JS 中的二进制操作简介的相关文章

js中的二进制操作相关类型和方法

Blob数据对象 MDN官方解释Blob对象:一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob, 继承了Blob的功能,并且扩展支持了用户计算机上的本地文件. 创建Blob对象的方法有几种,可以调用Blob构造函数,还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象,还可以调用canvas对象上的toBlob方法. 实际上,Blob是计算机通用术语之一,全称写作:BLOB(b

JS中的DOM操作和事件

[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点: 可以使用getElement系列方法,取到元素节点. [查看元素节点] 1.getElementById:通过id取到唯一节点.如果ID重名,只能取到第一个. getElementsByName(): 通过name属性   getElementsByTagName(): 通过标签名   getElementsByClassName()

js中的DOM操作(一)——查看及设置节点

一.前言 DOM 是 W3C(World Wide Web Consortium)标准.同时也 定义了访问诸如 XML 和 HTML 文档的标准: DOM是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口. 在HTML和JavaScript的学习中,DOM操作可谓时重中之重.今天,小编就领着大家来看看DOM操作是个什么样子!! 二.DOM节点  DOM节点分为三大类:元素节点.属性节点.文本节点: 而我们心心念念想知道的DOM树就长酱紫!          

JS中获取和操作iframe

一.需求与遇到的问题 在网站的后台管理中使用了iframe框架布局,包括顶部菜单.左侧导航和主页面.需求是:点击主页面上的一个按钮,在顶部菜单栏的右侧显示“退出”链接,点击可退出系统. 我的思路是:在顶部的菜单页面放一个不可见的“退出”链接,当用户点击位于iframe中的主页面(mainPage.htm)中的按钮时,在顶部菜单页面的右侧显示“退出”. 我现在遇到的问题是:如何在页面的一个iframe子页面(mainPage.htm)中获取并且操作其它iframe子页面(比如topPage.htm

js中frame的操作问题

这里以图为例,在这里把frame之间的互相操作简单列为:1变量2方法3页面之间元素的互相获取. A  首先从 父(frameABC)------->子(frameA,frameB,frameC) a1 : 访问变量名name 假如在frameABC中操作那么可以: window.frames("frameA").contentWindow.name 或者document.getElementById("frameA").contentWindow.name 或

js中常见的操作

//第一篇博文,希望大家多多支持   /***** BasePage.js 公共的 脚本文件  部分方法需引用jquery库 *****/ //#region 日期操作  //字符串转化为时间.function stringtoTime(date1) {    var dt = new Date(Date.parse(date1.replace(/-/g, "/")));    return dt;}   // 使用 var date1 =  "2013-06-08 15:2

js中的DOM操作(1)

一.操作子节点 childNodes 通过该方式可以获取父节点下的所有子节点,但是由于浏览器的差异,这写节点中可能包含文本节点. <!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> window.onload = function (){ var oUl = document.getElementById

JS中数组的操作

1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长

JS中的DOM操作

一.DOM的创建 DOM节点(Node)通常对应于一个标签.一个文本.或者一个HTML属性.DOM节点有一个noteType属性用来表示当前元素的类型,它是一个整数: 1. Element, 元素 2. Attribite, 属性 3. Text,文本 DOM节点创建最常用的便是document.createElement和document.createTextNode方法: var node1 = document.createElement('div'); var node2 = docum