js操作二进制数据

使用ArrayBuffer对象保存二进制数据,使用TypedArray和DataView 视图来读写数据。

ArrayBuffer代码内存中的一段数据

const buff = new ArrayBuffer(4)

这样就创建了一个4(byte)字节的长度的内存判断,初始值都为0

注:一般中文占2个字节,英文占1个字节。不同的编码会不同比如:中文在UTF-8占3个字节、在UTF-16中占4个字节

ArrayBuffer属性和方法

一个属性:byteLength,获取他里面数据的字节数和

buff.byteLength
// 4

一个方法:slice,和数组slice一个用于拷贝一段内存

buff.slice(1,3)
// ArrayBuffer(2)
// 拷贝了 buff 里下标 1、2 的内存数据

ArrayBuffer不能直接读写,只是放数据的容器,不能直接对内存数据进行读写,因为操作二进制数据可以有多种不同的数据类型、他们字节长度、值范围都不相同,不指定类型,不能读写内存数据

如:

 Uint8是8位不带符号整数,值范围是 0 到 255 ,长度为1Byte

 而 Int32 是有符号整数,值范围是 -2,147,483,648 到 +2,147,483,647,长度为 4 Byte。

ArrayBuffer 支持使用以下 9 种类型来读写内存数据:

  • Int8 8位带符号整数 signed char
  • Uint8 8位不带符号整数 unsigned char
  • Uint8C 8位不带符号整数(自动过滤溢出) unsigned char
  • Int16 16位带符号整数 short
  • Uint16 16位不带符号整数 unsigned short
  • Int32 32位带符号整数 int
  • Uint32 32位不带符号的整数 unsigned int
  • Float32 32位浮点数 float
  • Float64 64位浮点数 double

TypedArray

TypedArray 可以将一段 ArrayBuffer 的数据全部使用我们设定的类型来操作。

创建 TypedArray

TypedArray 可以使用 9 种类型,每个类型有对应的构造函数:

  • Int8Array:8位有符号整数,长度1个字节。
  • Uint8Array:8位无符号整数,长度1个字节。
  • Uint8ClampedArray:8位无符号整数,长度1个字节,溢出处理不同。
  • Int16Array:16位有符号整数,长度2个字节。
  • Uint16Array:16位无符号整数,长度2个字节。
  • Int32Array:32位有符号整数,长度4个字节。
  • Uint32Array:32位无符号整数,长度4个字节。
  • Float32Array:32位浮点数,长度4个字节。
  • Float64Array:64位浮点数,长度8个字节。

构造函数接收一个 ArrayBuffer 对象,将其转换成指定类型的二进制数组。

new (array: ArrayBufferLike | ArrayLike<number>, byteOffset?: number | undefined, byteLength?: number | undefined) => TypedArray

同一个 ArrayBuffer 可以生成多个不同类型的 TypedArray

const buff = new ArrayBuffer(4)
// 申请了长度为 4 字节的内存

const uInt8 = new Uint8Array(buff)
// 创建了长度为 4 的数组 (因为 Uint8 的单位长度是 1 字节)

const int32 = new Int32Array(buff)
// 创建了长度为 1 的数组(因为 Int32Array 的单位长度是 4 字节)

// 如果有需要,也可以设定起始位置的偏移量,以及从起始位置开始的内存长度
const uInt8 = new Uint8Array(buff, 1, 2)

操作 TypedArray

TypedArray 是类数组对象,我们可以使用数组的方式来操作,如:

//
uInt8[0]

//
uInt8[0] = 1

// 数组方法
uInt8.findIndex(val=>val===0)

注意:

使用 ArrayBuffer 数据创建 TypedArray 时,生成的 TypedArray 对象数组只是对 ArrayBuffer 的引用。

TypedArray 的属性

  • buffer:保存着这个 TypedArray 操作的 ArrayBuffer 对象。所以从 TypedArray 对象里返回其数据时,要使用它的 buffer 属性。
  • byteOffset:起始位置的偏移量
  • byteLength:字节长度,也就是内存使用量。
  • length:数组长度,根据类型不同,数组长度也不同。

例如 4 字节的 byteLength,以 Uint8Array 读取则 length 为 4,以 Int32Array 读取则 length 为 1。

DataView

DataView 和 TypedArray 的区别

DataView 和 TypedArray 有一些区别:

  • TypedArray 把整个 ArrayBuffer 全部视为某种指定的类型,而 DataView每次操作都必须手动指明类型,所以它可以灵活使用多种类型。
  • TypedArray 是类数组对象,但 DataView 不是类数组对象,所以不能使用数组的方法。
  • TypedArray 不能设定字节序(总是小端),而 DataView 可以设定字节序(大端或小端)(默认小端)。

  

创建 DataView

使用 DataView 构造函数来创建一个 DataView 对象。

语法:

new (buffer: ArrayBufferLike, byteOffset?: number | undefined, byteLength?: number | undefined) => DataView

简单示例:

const view = new DataView(buff)

// 如果有需要,也可以设定起始位置的偏移量,以及从起始位置开始的内存长度
const view = new DataView(buff, 2, 2)

由于创建 DataView 对象时不能指定类型,所以我们在操作时必须手动指定类型。

DataView 只有对内存的读、写操作,而且要使用指定的方法。它不能像 TypedArray 那样使用数组下标和数组方法。

DataView 读内存

DataView 实例提供 8 个方法读取内存。

  • getInt8 读取 1 个字节,返回一个 8 位整数。
  • getUint8 读取 1 个字节,返回一个无符号的 8 位整数。
  • getInt16 读取 2 个字节,返回一个 16 位整数。
  • getUint16 读取 2 个字节,返回一个无符号的 16 位整数。
  • getInt32 读取 4 个字节,返回一个 32 位整数。
  • getUint32 读取 4 个字节,返回一个无符号的 32 位整数。
  • getFloat32 读取 4 个字节,返回一个 32 位浮点数。
  • getFloat64 读取 8 个字节,返回一个 64 位浮点数。
const view = new DataView(buff)

view.getUint8(0)

view.getUint16(1)
// DataView.getUint16(byteOffset: number, littleEndian?: boolean | undefined): number

// 使用大端字节序
view.getUint32(2, false)

 

第一个参数是读取的内存的位置;

第二个参数是可选参数,用来指定字节序。只有当一次性读取超过 1 字节时才有这个参数。

DataView 默认使用小端字节序。如果你要使用大端字节序,必须把第二个参数设置为 false

DataView 写内存

DataView 写内存的方法也是 8 个,与读内存的 8 个方法对应。

  • setInt8 写入 1 个字节的 8 位整数。
  • setUint8 写入 1 个字节的 8 位无符号整数。
  • setInt16 写入 2 个字节的 16 位整数。
  • setUint16 写入 2 个字节的 16 位无符号整数。
  • setInt32 写入 4 个字节的 32 位整数。
  • setUint32 写入 4 个字节的 32 位无符号整数。
  • setFloat32 写入 4 个字节的 32 位浮点数。
  • setFloat64 写入 8 个字节的 64 位浮点数。
const view = new DataView(buff)

// DataView.setInt8(byteOffset: number, value: number): void
view.setInt8(0, 0xbb)

// DataView.setInt16(byteOffset: number, value: number, littleEndian?: boolean | undefined): void
view.setInt16(4, 1, true)

view.setInt32(8, 520, true)

DataView 的属性

  • buffer:保存着这个 DataView 操作的 ArrayBuffer 对象。所以从 DataView 对象里返回其数据时,要使用它的 buffer 属性。
  • byteOffset:起始位置的偏移量
  • byteLength:字节长度,也就是内存使用量。

DataView 不是类数组对象,所以没有 length 属性。

一些应用方法:

// ArrayBuffer转16进度字符串示例
ab2hex(buffer) {
    const hexArr = Array.prototype.map.call(
        new Uint8Array(buffer),
        function(bit) {
            return ('00' + bit.toString(16)).slice(-2)
        }
    )
    return hexArr.join('')
},
// 16进制字符串转ArrayBuffer
hex2ArrayBuffer(hex_str) {
    let typedArray = new Uint8Array(hex_str.match(/[\da-f]{2}/gi).map(function(h) {
        return parseInt(h, 16)
    }))
    let buffer = typedArray.buffer
    return buffer
},

 

posted @ 2022-12-08 15:43  风花一世月  阅读(729)  评论(0编辑  收藏  举报