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;
  // ···
};