ES6學習筆記---二進制數組（應用）

說實話自從作了前端以後，還沒怎麼用過二進制數組，看了es6入門以後才知道原來二進制數組的用處還很多。

一、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();

二、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。

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

四、Fetch API

Fetch API取回的數據，就是ArrayBuffer對象。

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

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