说实话自从做了前端之后，还没怎么用过二进制数组，看了es6入门之后才知道原来二进制数组的用处还不少。

1、AJAX

XMLHttpRequest第一版responseType属性默认为text。

XMLHttpRequest第二版XHR2允许服务器返回二进制数据，这时分成两种情况：

• 已知二进制数据类型：responseType设为arraybuffer。

• 未知二进制数据类型：responseType设为blob。

var xhr = new XMLHttpRequest();
xhr.open('GET', someUrl);
xhr.responseType = 'arraybuffer';xhr.onload = function () {let arrayBuffer = xhr.response;// ···
};xhr.send();

2、Canvas

首先看下面的例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var uint8ClampedArray = imageData.data; //Canvas元素输出的二进制像素数据，也是TypedArray数组

需要注意的是：Uint8ClampedArray这个类型是针对Canvas元素的专有类型，它是专门针对颜色，取值只能是0~255。

3、WebSocket

WebSocket可以通过ArrayBuffer，发送或接收二进制数据。

var socket = new WebSocket('ws://127.0.0.1:8081');
socket.binaryType = 'arraybuffer';// 等待直到socket打开
socket.addEventListener('open', function (event) {// 发送二进制数据var typedArray = new Uint8Array(4);socket.send(typedArray.buffer);
});// 接受二进制数据
socket.addEventListener('message', function (event) {var arrayBuffer = event.data;// ···
});

4、Fetch API

Fetch API取回的数据，就是ArrayBuffer对象。

fetch(url)
.then(function(request){return request.arrayBuffer()
})
.then(function(arrayBuffer){// ...
});

5、File API

如果知道一个文件的二进制数据类型，也可以将这个文件读取为ArrayBuffer对象。

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {var arrayBuffer = reader.result;// ···
};