ECMAScript6(7)：二进制数组

TypedArray

具有一个构造函数 DataView(), 接受一个ArrayBuffer参数,视图化该段内存；或接受一个数组参数，实例化该数组为二进制内容。得到的值是一个数组，可以直接使用[]访问每个位置的内容，有length属性。其构造函数有9个：

| 数据类型 | 字节长度 | 含义 | 对应 C 语言类型 | TypedArray 类型构造函数 |

| — | — | — | — | — |

| Int8 | 1 | 8位有符号整数 | char | Int8Array() |

| Uint8 | 1 | 8位无符号整数 | unsigned char | Uint8Array() |

| Uint8C | 1 | 8位无符号整数(自动过滤溢出) | unsigned char | Uint8ClampedArray() |

| Int16 | 2 | 16位有符号整数 | short | Int16Array() |

| Uint16 | 2 | 16位无符号整数 | unsigned short | Uint16Array() |

| Int32 | 4 | 32位有符号整数 | int | Int32Array() |

| Uint32 | 4 | 32位无符号整数 | unsigned int | Uint32Array() |

| Float32 | 4 | 32位浮点数 | float | Float32Array() |

| Float64 | 8 | 64位浮点数 | double | Float64Array() |

以上9个会对内存进行不同位数的格式化，以得到对应类型值的数组。这个数组不同于普通数组，它不支持稀疏数组，默认值为0，而且同一个数组只能存放同一个类型的变量。

以上每个构造函数都对应如下形式的参数：

(buffer, start=0, len=buffer.byteLength-start*8)

可以指定序列化其中 start到 end部分的二进制数据。注意这里指定的范围必须和数组类型所匹配，不能出现类似new Int32Array(buffer,2,2)的情况。如果你觉得这个不符合你的需求，可以使用 DataView。

如果你觉得上面的写法复杂，可以不写 new ArrayBuffer，直接使用 TypedArray，但注意参数的意义不一样：

var f64a = new Float64Array(4); //分配32个字节，并作为double类型使用。 32 = 64 / 8 * 4

TypedArray的构造函数还接受另一个TypedArray作为参数，开辟新内存复制其值并改变类型，对原视图和buffer 不构成影响，也不共用内存。

TypeArray的构造函数还接受另一个Array作为参数，开辟新内存复制其值，对原数组不构成影响，也不共用内存。

当然利用一下方法，可以把 TypedArray 转换为普通数组：

var arr = [].slice.call(typedArray);

TypedArray具有除了concat()以外的全部数组方法，当然，它也具有 iterator，可以用 for…of 遍历。

以下是 TypedArray 特有的属性和方法：

• buffer属性：返回该视图对于的二进制内存区域

• BYTES_PER_ELEMENT属性：是个常数，表示数组中每个值的字节大小，不同视图的返回值与上方表格一致

• byteLength: 返回该视图对于的内存大小，只读

• byteOffset: 返回该视图从对应 buffer 的哪个字节开始，只读

• set(arr_or_typeArray, start=0): 在内存层面，从arr_or_typeArray 的 start 下标开始复制数组到当然 typeArray

• subarray(start=0,end=this.length),截取 start到 end部分子数组,但是和原数组共用内存

• from(): 接受一个可遍历参数，转为该视图实例

• of(): 将参数列表转为该视图实例

小技巧，转换字符串和 ArrayBuffer

//该方法仅限转换 utf-16 的字符串

function ab2str(buf){

return String.fromCharCode.apply(null, new Uint16Array(buf));

}

function str2ab(str){

var len = str.length;

var view = new Uint16Array(len);

for(let i = 0; i < len; i++){

view[i] = str.charCodeAt(i);

}

return view.buffer;

}

var str = “Hello world”;

var buf = str2ab(str);

var view = new Uint16Array(buf);

for(var i = 0; i < view.length; i++){

console.log(String.fromCharCode(view[i])); //一次输出"Hello world"的每个字母

}

console.log(ab2str(buf)); //“Hello world”

这里扩展一些编码知识，我们知道计算机里面存储的是二进制，并且存储的最小单位是字节。但是不同的系统存储方式不同，分为高位优先和低位优先。比如 20170101 这个数字，其十六进制表示为 0x0133C575, 在低位优先的系统中存储方式为 0x75 0xC5 0x33 0x01, 而在高位优先的系统中存储方式为 0x01 0x33 0xC5 0x75。由于大多数计算机采用低位优先的方式，所以 ES6 采用是也是低位优先的方式，但遇到高位优先的数据时，就不能简单的直接那来使用，具体使用会在 DataView 中介绍，这里说明一种判断低位优先(little endian)还是高位优先(big endian)的方法:

还有需要注意的是数据溢出，这个也是需要数制方面基础比较好理解，这里不过多展开了。举一个例子：

Uint8 只能表示8位无符号整数，最大是1111 1111, 也就是十进制的 0_{255；Int8因为有了符号位，只能表示十进制-128}127，如果给它的值不在这个范围内就会发生溢出，得到一个你意想不到但情理之中的值

var view1 = new Uint8Array(2);

view1[0] = 256; //256 二进制是 1 0000 0000 由于数据只能容纳8个值，进位1就丢了

view1[1] = -1; //之前说过-1 二进制(补码)为 1111 1111(全1), 作为无符号数8个1就是255

console.log(view1[0]); //0

console.log(view1[1]); //255

var view2 = new Int8Array(2);

view2[0] = 128; //由于符号位溢出，系统自动用32位计算这个数1 000 0000 0000 0000 0000 0000 1000 0000，取符号位和最后8位得到-128

view2[1] = -128; //由于符号位溢出，系统自动用32位计算这个数0 111 1111 1111 1111 1111 1111 0111 1111，取符号位和最后8位得到127

console.log(view2[0]); //-128

console.log(view2[1]); //127

为了防止这样的情况，js 有一个 Unit8ClampedArray, 使整数方向的溢出值为255，0方向的易楚志为0。注意这是个无符号的类型；

var view = new Uint8ClampedArray(2);

view[0] = 256;

view[1] = -1;

console.log(view[0]); //255

console.log(view[1]); //0

复合视图

划分一块 buffer 使用得到 C 语言中的结构体

var buf = new ArrayBuffer(24);

var name = new Uint8Array(buf, 0, 16);

var gender = new Uint8Array(buf, 16, 1);

var age = new Uint16Array(buf, 18, 1);

var score = new Float32Array(buf,20,1);

相当于以下 C语言代码

struct Person{

char name[16];

char gender;

int age;

float score;

}

共用一块 buffer 使用得到 C 语言中的联合体

var buf = new ArrayBuffer(8);

var num = new Uint16Array(buf);

var dotNum = new Float64Array(buf);

相当于以下 C语言代码

union Example{

int num[4];

double dotNum;

}

DataView

具有一个构造函数 DataView(), 接受一个ArrayBuffer参数,视图化该段内存。毕竟当一段内存有多种数据时，复合视图也不是那么方便，这时适合使用 DataView 视图。其次 DataView 可以自定义高位优先和低位优先，这样可以读取的数据就更多了。

DataView构造函数形式如下,这一点和 TypedArray 一致：

(buffer, start=0, len=buffer.byteLength-start*8)

它具有以下方法格式化读取 buffer 中的信息：

• getInt8(start, isLittleEndian): 从 start 字节处读取 1 个字节，返回一个8位有符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• getUint8(start, isLittleEndian): 从 start 字节处读取 1 个字节，返回一个8位无符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• getInt16(start, isLittleEndian): 从 start 字节处读取 2 个字节，返回一个16位有符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• getUint16(start, isLittleEndian): 从 start 字节处读取 2 个字节，返回一个16位无符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• getInt32(start, isLittleEndian): 从 start 字节处读取 4 个字节，返回一个32位有符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• getUint32(start, isLittleEndian): 从 start 字节处读取 4 个字节，返回一个32位无符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• getFloat32(start, isLittleEndian): 从 start 字节处读取 4 个字节，返回一个32位浮点数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• getFloat64(start, isLittleEndian): 从 start 字节处读取 8 个字节，返回一个64位浮点数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

它具有以下方法格式化写入 buffer 中的信息：

• setInt8(start,value,isLittleEndian): 在 start位置写入 1 个字节的8位有符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• setUint8(start,value,isLittleEndian): 在 start位置写入 1 个字节的8位无符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• setInt16(start,value,isLittleEndian): 在 start位置写入 2 个字节的16位有符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• setUint16(start,value,isLittleEndian): 在 start位置写入 2 个字节的16位无符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• setInt32(start,value,isLittleEndian): 在 start位置写入 4 个字节的32位有符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• setUint32(start,value,isLittleEndian): 在 start位置写入 4 个字节的32位无符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• setFloat32(start,value,isLittleEndian): 在 start位置写入 4 个字节的32位浮点数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

• setFloat64(start,value,isLittleEndian): 在 start位置写入 8 个字节的64位浮点数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

它具有以下属性和方法：

• buffer属性：返回该视图对于的二进制内存区域

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端校招精编面试解析大全点击这里免费获取完整版pdf查看

.(img-ObsupZtP-1713482904276)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-R2VKa8jg-1713482904276)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-eKepPOL2-1713482904277)]

最后

前端校招精编面试解析大全点击这里免费获取完整版pdf查看