ES6学习笔记---二进制数组（应用）

说实话自从做了前端之后，还没怎么用过二进制数组，看了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;  // ···};