JavaScript的类型化数组介绍

286 阅读5分钟

JavaScript中类型化数组的介绍

我们肯定都熟悉JavaScript数组,它具有动态性质,可以容纳任何JavaScript对象。但是如果你熟悉C语言的话,你就会知道数组在本质上不是动态的。而且你只能在该数组中存储特定的数据类型。但这确保了数组从性能的角度来看是更有效的。但这并不意味着JavaScript数组的效率低下。在JavaScript引擎优化的帮助下,JavaScript中的数组是相当快的,谢谢。

随着网络应用的日益强大,网络应用需要处理和操作原始二进制数据。JavaScript数组无法处理这些原始二进制数据。因此,JavaScript类型化数组被引入。

类型化数组

类型化数组是与数组非常相似的对象,但它提供了一种将原始二进制数据写入内存缓冲区的机制。这个功能在所有主要的浏览器中都得到了很好的支持,并且在ES6中,它们被整合到了JS的核心框架中,并获得了对数组方法的访问权,如map()、filter()等。我强烈建议你通过本文末尾提到的资源来深入了解类型化数组的知识。

结构

类型化数组是以这样一种方式实现的,它们的结构是由两个主要部分组成的。实现类型化数组的两个组件是Buffer和View。

缓冲区

缓冲区是一个ArrayBuffer类型的对象,它代表一个数据块。这块原始的二进制数据,不能被单独访问或修改。你可能会问,一个不能被访问或修改的数据对象有什么用。这就是视图出现的地方。

视图

视图是一个对象,它允许你访问和修改存储在ArrayBuffer中的原始二进制内容。有两种类型的视图。

  • TypedArray对象的一个实例

这些类型的对象与通常的Arrays很相似,但只存储单一类型的数字数据。像Int8、Uint8、Int16、Float32这样的类型是TypedArray的一些类型。类型中的数字表示分配给该数据类型的比特数。例如,Int8表示分配给它的8位整数。

你可以阅读参考文档来了解更多关于TypedArray数据类型的细节。

  • DataView对象的一个实例

DataView是一个低级别的接口,它提供了一个getter/setter API来读取和写入任意数据到缓冲区。这对你有很大的帮助,特别是在单一的TypedArray中处理多种数据类型时。

使用DataView的另一个好处是,它可以让你控制数据的Endianness。类型化数组使用你的平台的Endianness。如果你在本地工作,这将不是一个问题,因为你的设备将使用与你的类型化数组相同的Endianness。在大多数情况下,你的类型化数组将是小编码的,因为Intel使用小编码。由于英特尔在计算机处理器中非常普遍,所以在大多数情况下不会有问题。但是,如果你将一个小序数编码的数据传输到一个使用大序数编码的设备上,你将会得到很差的编码,最终可能会被破坏。由于DataView使你能够控制Endianness,你可以在必要时使用它。

为什么它们与普通数组不同?

正如我之前提到的,普通的JavaScript数组已经被JavaScript引擎优化得很好了,所以你不需要仅仅为了性能而使用类型化数组,因为这不会给你带来太大的提升。但是有一些特性使得类型数组与普通数组不同,这可能是你选择它们的原因。

  • 让你处理原始二进制数据
  • 因为它们只处理有限的数据类型,所以与普通数组相比,你的引擎更容易优化类型数组,因为后者将是一个非常复杂的过程。
  • 普通数组的优化是无法保证的,因为你的引擎可能因为各种原因决定不这样做。

在网络开发中的应用

XMLHttpRequest API

你可以根据你的响应类型以ArrayBuffer的形式接收数据响应。

const xhr = new XMLHttpRequest();
xhr.onload = function () {
xhr.send();

获取API

与XMLHttpRequest API类似,fetch API也允许你在ArrayBuffer中接收响应。你只需要在你的fetch API响应上使用arrayBuffer()方法,你就会收到一个以ArrayBuffer解析的Promise。

fetch(url)

HTML Canvas

HTML5 Canvas元素让你可以渲染动态的2D形状和位图图像。这个元素只是作为你的图形的一个容器。这个图形应该在JavaScript的帮助下绘制。

画布的2D上下文让你把位图数据作为Uint8ClampedArray的实例来检索。让我们来看看Axel博士给出的示例代码。

const canvas = document.getElementById('my_canvas');

WebGL

WebGL允许你渲染高性能的交互式3D和2D图形。它在很大程度上依赖于类型化数组,因为它处理原始像素数据以在画布上输出必要的图形。

你可以在我的文章中阅读更多关于WebGL的基础知识。

了解WebGL

网络套接字

Web Sockets允许你以blob或数组缓冲区的形式发送和接收原始二进制数据。

const socket = new WebSocket("ws://localhost:8080");
// Listen for messages
// Sending binary data

虽然作为初学者,你可能不需要详细了解TypedArrays,但当你进入中高级JavaScript开发阶段时,它们将是必不可少的。这主要是因为你可能会开始开发更复杂的应用程序,需要使用类型化数组。

为了深入了解TypedArrays,请阅读下面的资源。

谢谢您的阅读,祝您编码愉快