JavaScript 中 TypedArray 对象的用途是什么？

简介： Java和 C++ 中的数组是数据结构，具有固定大小的连续并存储同质数据。这些阵列利用连续性和缓存来提高性能，从而减少随机访问时间。然而，JavaScript 数组是不同的野兽。与典型的数组不同，它们是动态的、稀疏的和非同质的。这首先假设它们的性能低下（由于无法缓存功能），但在幕后情况有所不同。 Javascript 引擎是非常聪明的野兽。只要数据不是稀疏的并且是同质的，Javascript就会透明地将它们存储在连续的内存块中。因此表现得有点像典型的数组并给我们提高了性能。

需要 TypedArrays：虽然 Javascript 数组表现良好，但是由于 WebGL、Sockets 等的添加，Web 应用程序的改进需要提高性能。 JavaScript 代码需要能够快速轻松地操作原始二进制数据。这就是TypedArrays发挥作用的地方。但是问题来了：如果JavaScript 引擎可以优化底层的东西，我们为什么需要 TypesArrays？要回答这个问题，我们需要知道数字和 JavaScript 数组的行为方式？实际上，根据 IEEE-754 标准，JavaScript 中的所有数字都将转换为 64 位浮点数，但效率并不高。但是， TypedArrays允许我们为有符号和无符号整数以及32位和 64 位浮点数提供8、16、32和64位的连续块。

这使我们能够更高效，因为它指定了要使用多少内存，并且还有助于以预期格式传输二进制数据。

TypedArrays 的使用：如果我们想以 16 位连续整数格式而不是传统的 64 位浮点数传输二进制数据，TypedArrays 将是有效的。简而言之，使用 TypedArrays，我们正在创建内容严格控制的数组。

示例 1：假设您想在 Web 上渲染一些 3d 图形。这需要能够传输一个数字数组，比如像素值作为 RGB，或者一些数据到本地接口，这需要它具有某种特定的大小（对于(0,255) 中的 RGBA ）。但是对于 TypedArrays，我们会实现大量的数据处理以确保一切正常，并且在 64 位浮点格式中也是如此。

Javascript

 
    // pixelData array with pixel values
    const pixelData = [143, 1432, 728,
        913, 182, 64, 023, 343, 183, 194]
 
    // To convert pixel data into RGBA range ie. (0,255)
    const clampedRGBA = new Uint8ClampedArray(pixelData);
 
    console.log("Clamped PixelData: " + clampedRGBA)

输出：

Clamped PixelData: 143,255,255,255,182,64,19,255,183,194

说明：上面的输出显示了使用 Uint8ClampedArray 实现像素值的钳位是多么容易，而不需要任何显式的数据处理。

示例 2：在这个示例中，我们将看到如何将类型化数组视图和 DataViews 附加到缓冲区以读取指定文件的内容。许多 API 使用 TypedArrays，例如FileReader.prototype.readAsArrayBuffer() 。 FileReader 可以将文件内容作为 ArrayBuffer 读取。

HTML

 

 
    
 
    
    
 
    
        var readFile = function (event) {
            var input = event.target;
            var text = "";
            var reader = new FileReader();
 
            reader.onload = function () {
                var arrayBuffer = reader.result;
                var idView = new Uint8Array(arrayBuffer);
                idView.forEach(function (alpha) {
 
                    // console.log(String.fromCharCode(alpha))
                    text = text + String.fromCharCode(alpha)
                });
                console.log(text);
                document.getElementsByTagName(
                    'textarea')[0].innerText = text;
            };
            reader.readAsArrayBuffer(input.files[0]);
        };
    

 

输出：

说明：上面的例子向我们展示了如何在 FileReader API 和 TypedArray 视图的帮助下查看文件或 blob 的内容。