• 浅析JavaScript类型化数组TypedArray理解、为什么使用TypedArray、类型数组与普通数组的区别及其常见应用(处理二进制数据类型)


      Javascript 中的数组是个强大的家伙:你可以创建的时候不规定长度,而是动态的去改变长度。你可以把他当成普通的数组去读取,也可以当他是堆栈来使用。你可以改变数组中每个元素的值甚至是类型。其实它是一个对象,比如我们可以这样去创建数组:var array = new Array(10); 

      Javascript 的数组的强大以及全能,给我们带来了便捷性。但一般而言:全能的东西能在各种环境下使用,但却不一定适用于各种环境。而 TypedArray 正是为了解决Javascript 中数组“干太多事”而出现的。

    一、什么是类型化数组

      在定制 html5 版本中,TypedArray是一种通用的固定长度缓冲区类型,允许读取缓冲区中的二进制数据。其在WEBGL规范中被引入用于解决Javascript处理二进制数据的问题。类型化数组也是数组,只不过其元素被设置为特定类型的值。

      类型化数组的核心就是一个名为 ArrayBuffer 的类型。每个ArrayBuffer对象表示的只是内存中指定的字节数,但不会指定这些字节用于保存什么类型的数据。通过ArrayBuffer能做的,就是为了将来使用而分配一定数量的字节。

    // 创建一个8-byte的ArrayBuffer
    var b = new ArrayBuffer(8);
    
    // 创建一个b的引用,类型是Int32,起始位置在0,结束位置为缓冲区尾部
    var v1 = new Int32Array(b);
    
    // 创建一个b的引用,类型是Uint8,起始位置在2,结束位置为缓冲区尾部
    var v2 = new Uint8Array(b, 2);
    
    // 创建一个b的引用,类型是Int16,起始位置在2,总长度为2
    var v3 = new Int16Array(b, 2, 2);

    1、类型数组:描述的是二进制缓存区一个类似数组的视图

    2、构造函数:上面我们通过ArrayBuffer来创建TypedArray,而实际上,TypedArray提供了3个构造函数来创建他的实例。

    TypedArray(unsigned long length)   
    // 创建一个新的TypedArray,length是其固定长度。
    
    TypedArray(TypedArray array)
    TypedArray(type[] array)
    // 创建一个新的TypedArray,其每个元素根据array进行初始化,元素进行了相应的类型转换。
    
    TypedArray(ArrayBuffer buffer, optional unsigned long byteOffset, optional unsigned long length)
    // 创建一个新的TypedArray,使其作为buffer的一个引用,byteOffset为其起始的偏移量,length为其长度。

    二、为什么要用TypedArray

      我们知道Javascript中数字是64位浮点数。则对于一个二进制图片(图片每个像素点是以8位无符号整数存储的),如果要将其数据在Javascript数组中使用,相当于使用了图片8倍的内存来存储一个图片的数据,这显然是不科学的。而TypedArray能帮助我们只使用原来1/8的内存来存储图片数据。

      或者对于WebSocket,如果用base64进行传输也是一个花费较高的方式,转而使用二进制传送可能是更好的方式。

      当然,TypedArray还有更多好处,比如具有更好的性能,下面我们进行一些小测试来验证这一点。

    1、顺序读取速读

    2、随机读取

    3、顺序写入

    4、复制操作

      可以看到性能均比 Array 要好。详见这篇文章:https://www.jb51.net/html5/68844.html

    三、TypedArray和数组的区别

    四、实际应用

      传统意义上服务通过AJAX只能返回文本数据,responseType默认是一个text,但是在xhr中,可以设定为一个二进制数据,只需要将responseType设置成arraybuffer

    var xhr=new XMLHttpRequest();
    xhr.open("GET","/myfile.png",true);
    xhr.responseType="arraybuffer";
     
    xhr.onload=function (oEvent) {
        var arrayBuffer=xhr.response;
        if (arrayBuffer){
            var byteArray=new Uint8Array(arrayBuffer)
            for (var i=0;i<byteArray.byteLength;i++){
                //对数组中每个元素进行操作
            }
        }
    }
    xhr.send(null)

      其他应用平时确实用的不多,以后遇到可以考虑看看。

  • 相关阅读:
    hadoop集群管理之 SecondaryNameNode和NameNode
    无法fsck问题解决
    处世
    [THUSC2016]成绩单
    Python安装官方whl包、tar.gz包、zip包
    poj1159 Palindrome 动态规划
    hoj1249 Optimal Array Multiplication Sequence 矩阵链乘
    hoj分类(转)
    hoj 2012 winter training Graph Day1 106 miles to Chicago图论最短路dijkstra算法
    poj1050 To the Max
  • 原文地址:https://www.cnblogs.com/goloving/p/15305312.html
Copyright © 2020-2023  润新知