源码 https://github.com/webabcd/TypeScriptDemo
作者 webabcd

兼收并蓄 TypeScript - 进阶: ArrayBuffer

示例如下:

advanced\arrayBuffer.ts

{
    /**
     * 1、ArrayBuffer - 内存之中的一段二进制数据，需要通过视图操作数据
     * 2、TypedArray - 视图，用于操作 ArrayBuffer 对象，TypedArray 的具体类型如下
     *    Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array
     * 3、DataView - 视图，用于操作 ArrayBuffer 对象，其可以通过如下方法操作 ArrayBuffer 对象
     *    setInt8/getInt8, setUint8/getUint8, setInt16/getInt16, setUint16/getUint16, setInt32/getInt32, setUint32/getUint32, setFloat32/getFloat32, setFloat64/getFloat64
     */


    // 实例化 ArrayBuffer 对象，并开辟指定字节数的内存空间
    let buffer = new ArrayBuffer(32);
    // slice() - 从指定位置的数据开始复制数据到一个新的 ArrayBuffer 对象
    let buffer1 = buffer.slice(0);
    // slice() - 从第 1 个参数指定的位置的数据开始，到第 2 个参数指定的位置的数据结束（不包括本身），将此之间的数据复制到一个新的 ArrayBuffer 对象
    let buffer2 = buffer.slice(4, 8);
    // byteLength - 获取 ArrayBuffer 的字节大小
    // ArrayBuffer.isView() - 判断指定的对象是否是视图
    console.log(buffer.byteLength, buffer1.byteLength, buffer2.byteLength, ArrayBuffer.isView(buffer));
    // 32 32 4 false


    // 实例化 Int32Array 视图，并指定初始数组（会自动根据这个数组创建并关联 ArrayBuffer 对象）
    let a = new Int32Array([1, 2, 3]);
    // buffer - 获取 TypedArray 关联的 ArrayBuffer 对象
    // [index] - 获取或设置 TypedArray 对象的指定位置的数据
    // length - 数据的元素个数
    // BYTES_PER_ELEMENT - 数组的每个元素的字节大小
    // Array.prototype.slice.call() - 将 TypedArray 对象转换为数组对象
    a[0] = 100;
    a[1] = 200;
    console.log(a[0], a[1], a[2], a.length, a.BYTES_PER_ELEMENT, a.buffer.byteLength, ArrayBuffer.isView(a), Array.prototype.slice.call(a));
    // 100 200 3 3 4 12 true [100, 200, 3]


    // 各种 TypedArray 类型的元素占用的字节大小
    console.log(Int8Array.BYTES_PER_ELEMENT, Uint8Array.BYTES_PER_ELEMENT, Int16Array.BYTES_PER_ELEMENT, Uint16Array.BYTES_PER_ELEMENT,
        Int32Array.BYTES_PER_ELEMENT, Uint32Array.BYTES_PER_ELEMENT, Float32Array.BYTES_PER_ELEMENT, Float64Array.BYTES_PER_ELEMENT);
    // 1 1 2 2 4 4 4 8


    // 实例化一个 TypedArray 对象，并关联指定的 ArrayBuffer 对象
    let c = new Int32Array(buffer); // 8 个元素
    // 指定需要操作的 ArrayBuffer 对象的起始索引位置，直至结尾
    let d = new Int32Array(buffer, 4); // 7 个元素
    // 指定需要操作的 ArrayBuffer 对象的起始索引位置，直至指定的长度（这个长度指的是 TypedArray 对象的元素的个数）
    let e = new Int32Array(buffer, 4, 2); // 2 个元素
    // 通过指定元素个数实例化 TypedArray 对象（会自动创建并关联 ArrayBuffer 对象）
    let f = new Int32Array(4);
    // 通过指定数组实例化 TypedArray 对象（会自动创建并关联 ArrayBuffer 对象）
    let g = new Int32Array([1, 2, 3, 4]);
    // Int32Array.of() - 通过指定数组实例化 TypedArray 对象（会自动创建并关联 ArrayBuffer 对象）
    let h = Int32Array.of(1, 2, 3, 4);
    // Int32Array.from() - 通过指定数组实例化 TypedArray 对象（会自动创建并关联 ArrayBuffer 对象）
    let i = Int32Array.from([1, 2, 3, 4]);
    console.log(c.length, d.length, e.length, f.length, g.length, h.length, i.length);
    // 8 7 2 4 4 4 4


    // TypedArray 包含有大部分的 Array 的方法，具体用法请参见 array 的说明


    let j = new Int32Array([1, 2, 3, 4]);
    let k = new Int32Array(4);
    let l = new Int32Array(6);
    // set() - 将指定的数组复制过来
    k.set(h);
    // set() - 将指定的数组复制过来，第 2 个参数用于指定复制过来的数组从当前数组的哪个位置开始写入
    l.set(h, 2);
    console.log(j, k, l);
    // [1, 2, 3, 4] [1, 2, 3, 4] [0, 0, 1, 2, 3, 4]


    let m = new Int32Array([1, 2, 3, 4]);
    // subarray() - 根据关联的 ArrayBuffer 对象复制一份新的且一样的 ArrayBuffer 对象
    //              subarray() 返回的新的 TypedArray 对象关联的是这个新的 ArrayBuffer 对象
    //              subarray() 返回的新的 TypedArray 对象操作的是第 1 个参数指定的位置到第 2 个参数指定的位置（不包括本身）之间的元素
    // 参数可以是负的，负的意思就是从右往左数
    let n = i.subarray(1, 3);
    // slice() - 根据第 1 个参数指定的位置到第 2 个参数指定的位置（不包括本身）之间的元素，生成一个新的 ArrayBuffer 对象
    //           slice() 返回的新的 TypedArray 对象关联的是这个新的 ArrayBuffer 对象
    //           slice() 返回的新的 TypedArray 对象操作的是整个 ArrayBuffer 对象
    // 参数可以是负的，负的意思就是从右往左数
    let o = i.slice(1, 3);
    console.log(m, n, o, m.buffer.byteLength, n.buffer.byteLength, o.buffer.byteLength);
    // [1, 2, 3, 4] [2, 3] [2, 3] 16 16 8


    // 复合视图
    let p = new ArrayBuffer(24);
    // ArrayBuffer 对象的 0 - 4（不包括 4）字节由 Uint32Array 对象操作
    let q = new Uint32Array(p, 0, 1);
    // ArrayBuffer 对象的 4 - 20（不包括 20）字节由 Uint8Array 对象操作
    let r = new Uint8Array(p, 4, 16);
    // ArrayBuffer 对象的 20 - 24（不包括 24）字节由 Float32Array 对象操作
    let s = new Float32Array(p, 20, 1);


    // 实例化 DataView 对象，并关联指定的 ArrayBuffer 对象
    // 还有其他多种实例化 DataView 对象的方式，请参见上面的实例化 TypedArray 对象的说明
    // 通过 setInt8(), setUint8(), setInt16(), setUint16(), setInt32(), setUint32(), setFloat32(), setFloat64() 设置数据（第 1 个参数指定字节位置，第 2 个参数指定需要设置的值）
    // 通过 getInt8(), getUint8(), getInt16(), getUint16(), getInt32(), getUint32(), getFloat32(), getFloat64() 获取数据（第 1 个参数指定字节位置）
    let t = new DataView(buffer);
    t.setInt32(0, 100);
    t.setInt32(4, 200);
    console.log(t.getInt32(0), t.getInt32(4), t.byteLength, ArrayBuffer.isView(t));
    // 100 200 32 true


    // 计算机硬件有两种储存数据的方式：大端字节序（big endian）和小端字节序（little endian）
    // 举例来说，数值 0x2211 使用两个字节储存，高位字节是 0x22，低位字节是 0x11
    // 大端字节序：高位字节在前，低位字节在后，即以 0x2211 形式储存，这个符合人类的习惯，所以一般都是大端字节序
    // 小端字节序：低位字节在前，高位字节在后，即以 0x1122 形式储存
    // DataView 对象的 setXXX() 方法的第 3 个参数用于指定是否使用小端字节序，默认为 false（即使用大端字节序）
    // DataView 对象的 getXXX() 方法的第 2 个参数用于指定是否使用小端字节序，默认为 false（即使用大端字节序）
}

源码 https://github.com/webabcd/TypeScriptDemo
作者 webabcd