JS 类型字段到底是什么？ ？ ？

前言：在JavaScript中，我们都需要对数组足够熟悉，才能知道数组本质上是动态的，并且可以包含任何JavaScript对象。但是，如果您曾经使用过 C 以外的语言，您应该知道数组本质上不是动态的。而且你只能在这个数组中存储特定类型的数据，毕竟这使得数组在性能方面更加高效。然而，字段的动态性和存储信息类型的多样化实际上并没有让 JavaScript 字段变得低效。借助JavaScript引擎优化，JavaScript中字段的执行速度确实非常快。

随着 Web 应用程序变得越来越强大，我们开始不得不让 Web 应用程序处理和操作原始二进制数据。 JavaScript 字段无法处理这种原始二进制数据，因此我们引入了 JavaScript 字段。

键入字段

类型化数组是与数组非常相似的对象，但提供了一种将原始二进制数据写入缓冲区的机制。该功能得到了所有主流浏览器的良好支持，并且 ES6 已将其集成到核心 JavaScript 框架中，该框架还提供了对 Array 方法的访问，例如 map()、filter() 等。我强烈建议您查看本文末尾列出的资源，以了解有关类型化字段的更多信息。

成分

类型化字段由两个主要部分组成：Buffer和View。

保险杠

Buffer是ArrayBuffer类型的对象，代表一个数据块。该原始二进制数据块无法单独访问或修改。您可能想知道如何使用无法访问或修改的数据对象。其实视图就是读写缓存的接口。

视图

View 是一个对象，允许您访问和编辑存储在 ArrayBuffer 中的原始二进制内容。一般有两种看法。

• TypedArray 对象实例

  这些对象类型与常规数组非常相似，但仅存储一种类型的数值数据。 Int8、Uint8、Int16 和 Float32 等数据类型是类型化数组。 type 中的数字表示为数据类型分配的位数。例如，Int8表示8位整数。

• DataView 对象实例

  DataView 是一个低级接口，它为 getter/setter 提供 API，以在缓冲区中读取和写入任意数据。这极大的方便了我们的开发，尤其是当我们需要在一个类型化的字段中处理多种类型的数据时。

  使用DataView的另一个优点是它允许您控制数据的字节顺序 - 类型字段使用平台字节顺序。当然，如果您的程序在本地运行，这不会成为问题，因为您的设备将使用与输入字段相同的字节序。在大多数情况下，您的字段将是小端字节序，因为英特尔使用小端字节序。由于英特尔在计算机处理器中无处不在，因此这通常不是问题。但是，如果将小端编码的数据传输到使用大端编码的设备，则会在读取过程中导致错误，最终导致数据丢失。由于 DataView 允许您控制字节序方向，因此您可以根据需要使用它。

，这使得它们与常规字段不同

如上所述，常规 JavaScript 字段已经经过 JavaScript 优化，你不需要使用类型化字段来提高性能，因为它不会给你带来太多创新。但是，有一些属性使键入字段与常规字段不同，因此您可以选择它们。

• 允许您使用原始二进制数据
• 因为它们处理的数据类型有限，所以你的引擎优化类型化字段比常规字段更容易，因为优化常规字段实际上是一个非常复杂的过程。
• 无法保证普通字段始终会得到优化，因为您的引擎可能会出于各种原因选择不进行优化。

1. XMLHttpRequest API

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

   const xhr = new XMLHttpRequest();
   xhr.open('GET', exampleUrl);
   xhr.responseType = 'arraybuffer';
   
   xhr.onload = function () {
       const arrayBuffer = xhr.response;
       // 处理数据
   };
   
   xhr.send();
    

2. 获取API

   与 XMLHttpRequest API 类似，Fetch API 允许您接收 ArrayBuffer 中的响应。只需在 fetch API 响应中使用 arrayBuffer() 方法，您将能够收到 ArrayBuffer 解析的 Promise。

   fetch(url)
   .then(response => response.arrayBuffer())
   .then(arrayBuffer => {
      // 处理数据
   });
    

3. HTML 画布

   HTML5 Canvas 元素允许渲染动态 2D 形状和位图图像。该元素仅充当使用 JavaScript 绘制的图形的容器。

   canvas 2D 上下文允许您以 Uint8CampedArray 实例的形式获取位图数据。我们来看看Dr.提供的示例代码。作者：阿克塞尔：

      const canvas = document.getElementById('my_canvas');
      const context = canvas.getContext('2d');
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      const uint8ClampedArray = imageData.data;
    

4. WebGL

   WebGL 允许您渲染高性能交互式 3D 和 2D 图形。它在处理原始像素数据以将必要的图形输出到画布时严重依赖于类型化数组。

   在本文中，您可以阅读有关 WebGL 基础知识的更多信息。

5. 网络套接字

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

   const socket = new WebSocket("ws://localhost:8080");
   socket.binaryType = "arraybuffer";
   
   // 监听 message
   socket.addEventListener("message", function (event) {
       const view = new DataView(event.data);
       // 处理接收数据
   });
   
   // 发送二进制数据
   socket.addEventListener('open', function (event) {
       const typedArray = new Uint16Array(7);
       socket.send(typedArray.buffer);
   });
    

初学者可能对类型化字段没有详细的了解，但在过渡到中级和高级 JavaScript 开发时它们是必不可少的。这主要是因为您可能想要开发需要使用类型化字段的更复杂的应用程序。

感谢您的阅读并祝您编程愉快！ ！