JS ArrayBuffer

在写JS时,主要用到的数据类型以 Number,String, bool为主,这几种已经能满足常规前端编程的需要了,但在处理一些二进制数据时,这些类型就无能为力。JS提供了ArrayBuffer 来处理二进制数据。ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作,而是要通过类型数组对象或/DataView( "DataView 视图是一个可以从 ArrayBuffer 对象中读写多种数值类型的底层接口,在读写时不用考虑平台字节序问题。") 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。

下面介绍几种读写数据的方式:
1.字符串转为ArrayBuffer

// 字符串转为ArrayBuffer对象,参数为字符串
const str2ab = function(str) {
  var buf = new ArrayBuffer(str.length * 2); // 每个字符占用2个字节
  var bufView = new Uint16Array(buf);
  for (var i = 0, strLen = str.length; i < strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}

2.ArrayBuffer转字符串

// ArrayBuffer转为字符串,参数为ArrayBuffer对象, 字符串编码为一个字节
const ab2str = function (buf) {
  return String.fromCharCode.apply(null, new Uint8Array(buf)); //apply将数组参数传给方法作为分开的实参,见apply的用法
}

// ArrayBuffer转为字符串,参数为ArrayBuffer对象字符串编码为js默认编码
const ab2strU16 = function (buf) {
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}

注意:如果是UTF8这种变长编码,就会麻烦一些,当然网络上也有很多方法。
Stack Overflow上的方法;

function uintToString(uintArray) {
    var encodedString = String.fromCharCode.apply(null, uintArray),
        decodedString = decodeURIComponent(escape(encodedString));
    return decodedString;
}

3.ArrayBuffer与十六进制的互相转换

/**
 * 十六进制转 bytearray
 */
var hex2ab = function(hex){
  var typedArray = new Uint8Array(hex.match(/[\da-f]{2}/gi).map(function (h) {
    return parseInt(h, 16)
  }))

  var buffer = typedArray.buffer
  return buffer
}

 // ArrayBuffer转16进度字符串示例
const ab2hex = function (buffer) {
  var hexArr = Array.prototype.map.call(
    new Uint8Array(buffer),
    function (bit) {
      return ('00' + bit.toString(16)).slice(-2)
    }
  )
  return hexArr.join('');
}

推荐阅读更多精彩内容