JavaScript中的TypedArray对象有什么用处

简介： Java和C++中的数组是数据结构，具有 固定大小连续 和存储同一类型数据的特性。这些数组利用连续性和缓存来提高性能，从而减少随机访问时间。然而，JavaScript数组与之不同。与典型的数组不同，它们是动态的、稀疏的和非同质的。这在一开始给人一种性能低下的假设(因为不能使用缓存特性)，但事实并非如此。Javascript引擎非常聪明。每当数据不是稀疏的且是同一类型时，Javascript会以连续的内存块的方式透明地存储它们。因此，它们表现得有点像典型的数组，并提供了改进的性能。

TypedArrays的需求： 虽然JavaScript数组性能不错，但随着Web应用程序的改进，如添加了WebGL、Sockets等功能，需要提高性能。需要能够快速、轻松地操作原始二进制数据的JavaScript代码。这就是 TypedArrays 的作用。但问题是：如果 JavaScript引擎 可以对底层进行优化，为什么还需要变量数组？ ** 要回答这个问题，我们需要了解数字和JavaScript数组的行为如何。实际上，JavaScript中的所有数字都是根据 IEEE-754标准定义为64位浮点数，效率不高。然而， TypedArrays 允许我们使用连续的 8， 16 , 32 和 64位 的有符号和无符号整数，以及32位和64位浮点数。

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

TypedArrays的用途： 如果我们希望将二进制数据以16位连续整数的格式传输，而不是传统的64位浮点数形式，TypedArrays将更加高效。简而言之，通过TypedArrays，我们可以创建严格控制其内容的数组。

示例1： 假设您想在Web上呈现一些3D图形。这需要能够传输一个数字数组，比如像素值作为RGB，或者传输到需要特定大小的本地接口的一些数据（对于 RGBA在（0, 255） ）。但对于TypedArrays，我们需要实现大量数据处理以确保正确工作，而且还需要使用64位浮点数格式。

JavaScript

<script>
 
    // 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)
</script>

输出：

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

解释： 上述输出显示了如何使用Uint8ClampedArray轻松实现像素值的夹取，而无需进行任何显式数据处理。

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

HTML

<!DOCTYPE html>
<html lang="en">
 
<body>
 
    <input type="file" onchange='readFile(event)' />
 
    <br><br>
    <textarea cols="50" rows="10"></textarea>
 
    <script>
        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]);
        };
    </script>
</body>
 
</html>

输出：

JavaScript中的TypedArray对象有什么用处