美文网首页
JS ArrayBuffer

JS ArrayBuffer

作者: 田文健 | 来源:发表于2018-06-02 18:07 被阅读0次

    在写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('');
    }
    

    相关文章

      网友评论

          本文标题:JS ArrayBuffer

          本文链接:https://www.haomeiwen.com/subject/ehladftx.html