欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

js ArrayBuffer和Array区别 有大用

区别:
    1、数组里面可以放数字、字符串、布尔值以及对象和数组等,ArrayBuffer放0和1组成的二进制数据
    2、数组放在堆中,ArrayBuffer则把数据放在栈中(所以取数据时后者快)
    3、ArrayBuffer初始化后固定大小,数组则可以自由增减。

ArrayBuffer
    ArrayBuffer又称类型化数组。类型化数组是JavaScript操作二进制数据的一个接口。最初为了满足JavaScript与显卡之间大量的、实时的数据交换,它们之间的数据通信必须是二进制的

    类型化数组是建立在ArrayBuffer对象的基础上的。它的作用是,分配一段可以存放数据的连续内存区域。

1                        var bf = new ArrayBuffer(40); // 生成了字节长度为40的内存区域                        
2                        //通过提供的 byteLength 属性返回分配字节的长度                        
3                        console.log(bf.byteLength);  // 40                        
4                        /*                        
5                            值得注意的是如果要分配的内存区域很大,有可能分配失败(因为没有那么多的连续空余内存),所以有必要检查是否分配成功。                        
6                        */                        

    ArrayBuffer对象有一个slice方法,允许将内存区域的一部分,拷贝生成一个新的ArrayBuffer对象。

1                        const bf = new ArrayBuffer(40);                        
2                        const newBf = bf.slice(0, 10); // 从0 - 9 不包括 10                        

    · 上面代码拷贝buffer对象的前10个字节,生成一个新的ArrayBuffer对象。slice方法其实包含两步,第一步是先分配一段新内存,第二步是将原来那个ArrayBuffer对象拷贝过去。
    · slice方法接受两个参数,第一个参数表示拷贝开始的字节序号,第二个参数表示拷贝截止的字节序号。如果省略第二个参数,则默认到原ArrayBuffer对象的结尾。
    · 除了slice方法,ArrayBuffer对象不提供任何直接读写内存的方法,只允许在其上方建立视图,然后通过视图读写。

ArrayBuffer作为内存区域,可以存放多种类型的数据。不同数据有不同的存储方式,这就叫做“视图”。
    JavaScript提供以下类型的视图:
        Int8Array:8位有符号整数,长度1个字节。
        Uint8Array:8位无符号整数,长度1个字节。
        Int16Array:16位有符号整数,长度2个字节。
        Uint16Array:16位无符号整数,长度2个字节。
        Int32Array:32位有符号整数,长度4个字节。
        Uint32Array:32位无符号整数,长度4个字节。
        Float32Array:32位浮点数,长度4个字节。
        Float64Array:64位浮点数,长度8个字节。
    每一种视图都有一个BYTES_PER_ELEMENT常数,表示这种数据类型占据的字节数。

1                        Int8Array.BYTES_PER_ELEMENT  // 1                        
2                        Uint8Array.BYTES_PER_ELEMENT // 1                        
3                        //...                        

    每一种视图都是一个构造函数,有多种方法可以生成:

1                        // 浏览器控制台输出:                        
2                        > Int32Array                        
3                        function Int32Array() { [native code] }                        

在ArrayBuffer对象之上生成视图
    同一个ArrayBuffer对象之上,可以根据不同的数据类型,建立多个视图。

01                        // 创建一个8字节的ArrayBuffer                        
02                        var b = new ArrayBuffer(8);                        
03                        
04                        // 创建一个指向b的Int32视图,开始于字节0,直到缓冲区的末尾                        
05                        var v1 = new Int32Array(b);                        
06                        
07                        // 创建一个指向b的Uint8视图,开始于字节2,直到缓冲区的末尾                        
08                        var v2 = new Uint8Array(b, 2);                        
09                        
10                        // 创建一个指向b的Int16视图,开始于字节2,长度为2                        
11                        var v3 = new Int16Array(b, 2, 2);                        

    上面代码在一段长度为8个字节的内存(b)之上,生成了三个视图:v1、v2和v3。视图的构造函数可以接受三个参数:

        第一个参数:视图对应的底层ArrayBuffer对象,该参数是必需的。
        第二个参数:视图开始的字节序号,默认从0开始。
        第三个参数:视图包含的数据个数,默认直到本段内存区域结束。
    注意:v1、v2和v3是重叠:v1[0]是一个32位整数,指向字节0~字节3;v2[0]是一个8位无符号整数,指向字节2;v3[0]是一个16位整数,指向字节2~字节3。只要任何一个视图对内存有所修改,就会在另外两个视图上反应出来。

直接生成
    视图还可以不通过ArrayBuffer对象,直接分配内存而生成。

1                        var f64a = new Float64Array(8);                        
2                        f64a[0] = 10;                        
3                        f64a[1] = 20;                        
4                        f64a[2] = f64a[0] + f64a[1];                        

    上面代码生成一个8个成员的Float64Array数组(共64字节),然后依次对每个成员赋值。这时,视图构造函数的参数就是成员的个数。可以看到,视图数组的赋值操作与普通数组的操作毫无两样。


来自 http://www.5imoban.net/jiaocheng/jquery/202009043949.html






http://www.5imoban.net/jiaocheng/jquery/202009043949.html




ArrayBuffer是JavaScript用来处理二进制的,ArrayBuffer对象保存着原始二进制数据,它不能对数据进行操作,

只能通过视图类(TypeArray或DataView)才能对数据进行读写。

 

ArrayBuffer特点:

1.数组里面存放的是二进制原始数据01,以字节为单位,一个字节8位

2.初始化后固定大小

构造函数:

  1. //创建了2个字节的ArrayBuffer 数据默认:0000 0000 | 0000 0000
  2. var buffer = new ArrayBuffer(2);
  3. //log : 2
  4. console.log(buffer.byteLength);

方法及属性:

  1. byteLength //readonly 只读属性,缓存数据的长度,可以体现改buffer申请了多大的内存空间

  2. slice(start, end?);//返回一个新的buffer,end默认到最后

  3. ArrayBuffer.isView(typeArray);//静态方法,判断是否是typeArray 或者 DataView, 返回boolen值

  1. var buffer = new ArrayBuffer(8);
  2. //创建一个8位的视图
  3. var int8a = new Int8Array(buffer);
  4. int8a[0] = 1;
  5. int8a[1] = 2;
  6. int8a[2] = 3;
  7. int8a[3] = 4;
  8. //字节长度 8
  9. console.log('buffer byte length: ', buffer.byteLength);
  10. //int8第一位 1
  11. console.log('new8int : ', newInt8a[0]);
  12. //从buffer中slice一个新的buffer
  13. var newBuffer = buffer.slice(2);
  14. var newInt8a = new Int8Array(newBuffer);
  15. console.log('newBuffer byte length: ', newBuffer.byteLength);
  16. console.log('new8int : ', newInt8a[0]);
  17. //判断是否视图
  18. console.log(ArrayBuffer.isView(int8a));

字节说明:

  1. 一字节:8位,可以表示2^8=256种状态,如果是int8类型可以表示-128到127(1000 0000 - 0111 1111)如果是uint8类型则可以表示0到255(0000 0000 - 1111 1111)

  2. 四字节:32位,可以表示2^32=4294967296种状态,如果是int32类型可以表示-2^16到2^16-1(1000 0000 0000 0000 - 0111 1111 1111 1111) ,uint32 为(0-0111 1111 1111 1111)

位和字节单位换算:

1Byte(字节) = 8bit(位)

1024Byte(字节) = 1k 

1024KB = 1MB;

1024MB =  1GB;

1024GB = 1TB;

下一篇继续说如果使用typeArray读取和改写ArrayBuffer



来自   https://blog.csdn.net/xiaye_go/article/details/87168781

https://wenku.baidu.com/view/6e1e6d68fd4733687e21af45b307e87101f6f878.html



普通分类: