其他分享
首页 > 其他分享> > JS 类型化数组 到底是何物???

JS 类型化数组 到底是何物???

作者:互联网

前言: 在 JavaScript 这门语言中,我们所有人都必须对数组足够熟悉,知晓数组本质上是动态的,并且可以容纳任何 JavaScript 对象。不过,如果你曾经使用过类似于 C 语言这样的其他语言,你应该知道其数组本质上不是动态的。而且你只能在该数组中存储特定的数据类型,毕竟从性能角度来看,这可以确保数组效率更高。但数组的动态化与存储信息类型的多样化其实并没有使 JavaScript 数组效率低下。在 JavaScript 引擎优化的帮助下,JavaScript 中数组的执行速度其实非常快。

随着 Web 应用程序功能越来越强大,我们开始需要让 Web 应用程序处理和操纵原始二进制数据。JavaScript 数组无法处理这些原始二进制数据,也因此我们引入了 JavaScript 的类型化数组。

类型化数组

类型化数组是与数组非常相似的对象,但是它提供了一种将原始二进制数据写入内存缓冲区的机制。所有主要浏览器均很好地支持此功能,并且 ES6 已将其集成到 JavaScript 核心框架中,也可以访问诸如 map()、filter() 等 Array 方法。我强烈建议你浏览本文结尾处提到的资源,以更深入了解类型化数组。

组成

类型化数组由两个主要部分组成,BufferView

缓冲区

BufferArrayBuffer 类型的对象,表示一个数据块。此原始二进制数据块无法被单独访问或修改。你可能好奇,无法访问或修改的数据对象的能有什么用途。实际上视图是缓冲区的读写接口。

视图

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

是什么使它们与普通数组不同

如前所述,普通的 JavaScript 数组已通过 JavaScript 引擎进行了优化,你没必要为了提升性能而使用类型化数组,因为这不会给你带来太多升级。但是有些特性使类型化数组不同于普通数组,这才可能是你选择它们的原因。

在 Web 开发中的用途

  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. Fetch API

    类似于 XMLHttpRequest API,Fetch API 还允许你在 ArrayBuffer 中接收响应。你只需在 fetch API 响应中使用 arrayBuffer() 方法,你就能够收到一个使用 ArrayBuffer 解析的 Promise。

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

    HTML5 Canvas 元素使你可以渲染动态的 2D 形状和位图图像。该元素仅充当图形的容器,而图形则是在 JavaScript 的帮助下绘制。

    canvas 的 2D Context 使你可以将位图数据作为 Uint8ClampedArray 的实例进行检索。让我们看一下 Axel 博士提供的示例代码:

      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 Socket

    Web Socket 允许你以 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 开发的时候,它们是必不可少的。这主要是因为你可能要开发需要使用类型化数组的更复杂的应用程序。

感谢你的阅读,祝你编程愉快!!

标签:const,字节,二进制,JavaScript,JS,何物,数组,类型化
来源: https://www.cnblogs.com/xiewangfei123/p/14812049.html