在 ES8 中，JavaScript 引入了一个新的数据结构 —— DataView 对象。DataView 是一种类数组对象，它可以读取和写入原始二进制数据，提供了一种更加灵活和底层的读写方式。 在本文中，我们将深入解析 DataView 对象，学习它的基本用法并提供示例代码作为指导。
DataView 对象的创建
使用 DataView 对象之前，我们需要先创建一个 ArrayBuffer 对象，再用 ArrayBuffer 创建一个 DataView。在创建 DataView 对象时，需要制定两个参数：第一个参数是 ArrayBuffer 对象，第二个参数是开始读取数据的位置。
let buffer = new ArrayBuffer(8); // 创建一个长度为8的 ArrayBuffer let view = new DataView(buffer); // 创建一个 DataView 对象
这个 DataView 对象包含了一个长度为8的 ArrayBuffer，初始时，DataView 对象所包含的二进制数据都是0。
DataView 对象的读写操作
DataView 对象提供了一系列用于读写二进制数据的方法，这些方法的参数包括要读取或者写入的数据类型，以及数据所在位置的偏移量：
getInt8()/setInt8(): 读取或者写入一个 8 位有符号整数。getUint8()/setUint8(): 读取或者写入一个 8 位无符号整数。getInt16()/setInt16(): 读取或者写入一个 16 位有符号整数。getUint16()/setUint16(): 读取或者写入一个 16 位无符号整数。getInt32()/setInt32(): 读取或者写入一个 32 位有符号整数。getUint32()/setUint32(): 读取或者写入一个 32 位无符号整数。getFloat32()/setFloat32(): 读取或者写入一个 32 位浮点数。getFloat64()/setFloat64(): 读取或者写入一个 64 位浮点数。
这些方法的使用方式类似：
view.setInt8(0, -1); // 在 0 位置写入一个 8 位有符号整数 view.getInt8(0); // 读取位置0处的 8 位有符号整数
在读写二进制数据时，需要注意数据的类型、长度以及 endianness 问题。DataView 对象提供了两个方法来检查当前系统的 endianness，并且允许对二进制数据进行读写：
getUint16()/setUint16(): 按照当前系统的 endianness 进行读写。getUint16BigEndian()/setUint16BigEndian(): 强制使用大端字节序进行读写。getUint16LittleEndian()/setUint16LittleEndian(): 强制使用小端字节序进行读写。
举个例子：
let buffer = new ArrayBuffer(16); let view = new DataView(buffer); view.setUint16(0, 128); // 默认使用当前系统的 endianness view.setUint16BigEndian(2, 128); // 使用大端字节序 view.setUint16LittleEndian(4, 128); // 使用小端字节序
DataView 对象的应用场景
DataView 对象的特点是可以读写不同大小的二进制数据，并且可以使用不同的 endianness 进行读写，因此它在一些底层的网络应用中比较有用。比如，我们可以使用 DataView 对象来操作一个 Web Socket 中的二进制数据：
-- -------------------- ---- -------
---------------- - --------------- -
--- ---- - --- ---------------------
--- ----------- - -----------------
-- ------------ --- -- -
--- -------- - ------------------
-- ---
- ---- -- ------------ --- -- -
--- ------------- - -------------------
-- ---
-
--结论
DataView 对象是 JavaScript 中一个强大且很有用的数据结构，它允许以更加底层和灵活的方式读写二进制数据，并且提供了一种符合不同 endianness 的方案。在 Web 应用程序中，一些网络协议的消息格式都是二进制的，因此 DataView 对象将是一种非常有用的工具。我们希望本文和示例代码能够帮助你更好地理解 DataView 对象的使用和应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67137d08ad1e889fe20d4e1b