JavaScript 在 ES6 引入那些集合类型—TypeArray(1)

323 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

早在 ES6 出现之前,数据结构主要是基于数组和对象,一些其他类型的数据结构例如 Map 和 Set 这样在其他语言都给支持的数据结构。

  • TypeArray 在 ES5 时代是 WebGL 组件,到了 ES6 时代将其引入到了 JavaScript 组件,并作为 first class
  • JavaScript 在 ES6 提供 Map 和 Set 数据类型,大家都知道 Map 是键值对形式存储数据,不过在 JavaScript 中键不限于字符串,可以用函数或者对象作为键使用。

TypeArray

TypeArray(类型化数组)是ECMAScript 6的一个API,用于处理二进制数据。

const buf = new ArrayBuffer(32);
console.log(buf.byteLength)

现在 buf 就是一个二进制 buffer,长为 32 字节(256位),预先初始化全部为 0.

const typedArray = new Uint8Array([0,1,2]);
console.log(typedArray.length); // 3
typedArray[0] = 5;
console.log(typedArray[0])//5
const normalArray = [...typedArray]; // [5,1,2]


// 在 typeArray.buffer 中储存元素,对于同一个数据可以获取不同视图
const dataView = new DataView(typedArray.buffer);
console.log(dataView.getUint8(0)); // 5

ArrayBuffer的实例存储要处理的二进制数据。有两种视图被用来访问数据。

  • 类型数组(Uint8Array, Int16Array, Float32Array, etc.)将ArrayBuffer解释为单一类型元素的索引序列。

  • DataView 的实例可以让你在 ArrayBuffer 内的指定大小字节偏移来方法方法(Uint8、Int16、Float32等)几种类型的元素。

人们在网络上使用的许多数据都是文本,例如 JSON 文件、HTML 文件、CSS 文件、JavaScript 代码等等。对于处理这类数据,JavaScript 内置的字符串数据类型足够用了。然而直到几年前,JavaScript 在处理二进制数据方面的一直是 JS 的弱项。2011 年 2 月 8 日,TypeArray 规范1.0 规范了处理二进制数据的设施。到现在,TypeArray 已经被各种引擎所支持。在 ECMAScript 6中,TypeArray 成为了核心语言的一部分,并在这个处理数据可以使用到许多数组的方法例如(map(), filter(), 等等)。

Typed Arrays 的主要应用场合:

处理二进制数据:操作 HTML Canvas 元素中的图像数据,解析二进制文件,处理二进制网络协议,等等。

与本地 API 交互。本机 API 经常以二进制格式接收和返回数据,而在传统的 JavaScript 中既不能存储,也不能很好地操作这些数据。这意味着每当与这样的 API 进行通信时,数据必须从 JavaScript 转换为二进制,然后再返回,每次调用都是如此。因此 TypedArray 可以消除了这个瓶颈。与本地 API 进行通信的一个例子是 WebGL,TypedArray 最初就是为其而生的。