小白遇到新挑战——服务端传递ArrayBuffer类型我们应该怎么处理

880 阅读2分钟

这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

小白遇到新挑战,这是什么?

小白接到了新公司的第一个需求,其中服务端给的设计文档出现这么一段文字,要传给我下面这些值,作为我的判断参数:

value = 0x01 (0x01 为true,0x00 为false);

{0x55, 0xaa, 0x55, 0xaa, 0x01, 0x00 } 代表启用视频播放

{0x55, 0xaa, 0x55, 0xaa, 0x01, 0x01 } 代表禁用视频播放

小白:分开看我都懂,这是干嘛的?百度一下:

0x开头的数字,在Java里面是16进制的表示。

小白:哦,也就是说,我需要按照16进制数据进行比对。

服务端传过来的数据是什么样子的呢?

浏览器解析出来的结果如下:

image.png

但是直接在控制台打印的话,是组ArrayBuffer类型的数据(手头没有相关截图,想看我后面补上),没有办法直接使用,那么我们需要将获取到的ArrayBuffer类型转化为字符串即可进行对比。

有用信息

  • 16进制
  • ArrayBuffer类型的数据
  • 字符串比对

怎么转化成16进制

使用x.toString(16)方法。

ArrayBuffer类型的数据怎么处理

使用Uint8Array方法。

什么是Uint8Array

Uint8Array 数组类型表示一个8位无符号整型数组,创建时内容被初始化为0。创建完后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。

Uint8Array有5种用法:

new Uint8Array(); // ES2017 最新语法

new Uint8Array(length); // 创建初始化为0的,包含length个元素的无符号整型数组

new Uint8Array(typedArray);

new Uint8Array(object);

new Uint8Array(buffer [, byteOffset [, length]]);

因为我们取到的服务端数据是一个ArrayBuffer类型,所以我们这次用到的是第5种用法:

new Uint8Array(buffer [, byteOffset [, length]])

解决方法

先通过Object.prototype判断一下数据类型是不是ArrayBuffer:

Object.prototype.toString.call(data) === '[object ArrayBuffer]'

然后对获取到的ArrayBuffer数据类型转化为16进制的字符串类型,便于我们后期进行比对判断:

function uint8Array (buffer) {

    var uint8Array = new Uint8Array(buffer)

    return Array.prototype.map

    .call(uint8Array, (x) => ('00' + x.toString(16)).slice(-2))```

    .join('');

}
测试:

uint8Array(new Uint8Array([85,170,85,170, 1, 0])); //55aa55aa0100'

得到的值和浏览器解析出来的值一致,且因为我们将其转化为字符串了,所以可以直接通过字符串数值比对进行判断。