HTML5 中的新数组

最新推荐文章于 2024-08-26 10:22:39 发布
最新推荐文章于 2024-08-26 10:22:39 发布
阅读量88 收藏
点赞数
文章标签： javascript 网络 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snake_hand/article/details/84430462
版权

Javascript中的数组是个强大的家伙：

  • 你可以创建的时候不规定长度，而是动态的去改变长度。
  • 你可以把他当成普通的数组去读取，也可以当他是堆栈来使用。
  • 你可以改变数组中每个元素的值甚至是类型。

好吧，其实他是一个对象，比如我们可以这样去创建数组：

var array = new Array(10);

Javascript的数组的强大以及全能，给我们带来了便捷性。但一般而言：

全能的东西能在各种环境下使用，但却不一定适用于各种环境。

而TypedArray正是为了解决Javascript中数组“干太多事”而出现的。

 

 

起源

TypedArray是一种通用的固定长度缓冲区类型，允许读取缓冲区中的二进制数据。

其在WEBGL规范中被引入用于解决Javascript处理二进制数据的问题。

TypedArray已经被大部分现代浏览器支持，例如可以用下面方法创建TypedArray：

    // 创建一个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);

则缓冲和创建的引用布局为：

变量索引
 字节数
b =01234567
 索引数
v1 =01
v2 = 012345
v3 = 01 

这表示Int32类型的v1数组的第0个元素是ArrayBuffer类型的b的第0-3个字节，如此等等。

 

构造函数

上面我们通过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：

var array = new Uint8Array(10);

或者：

var array = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

 

数据操作

TypedArray提供了setter、getter、set和subarray四个方法进行数据操作。

方法
getter  type get(unsigned long index)

返回指定索引的元素。

setter void set(unsigned long index,  type value)

设置指定索引的元素为指定值。

void  set( TypedArray array, optional unsigned long offset) void  set( type[] array, optional unsigned long offset)

根据array设置值，offset为偏移位置。

TypedArray  subarray(long begin, optional long end)

返回一个新的TypedArray，起始位为begin，结束位为end。

例如读取元素可以用：

var array = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
alert(array[4]);    //5

设置元素可以用：

var array = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
alert(array[4]);    //5
array[4] = 12;
alert(array[4]);    //12

获取一个副本可以用：

var array = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
var array2 = array.subarray(0);

 

数组类型

类型大小描述Web IDL类型C 类型
Int8Array18位有符号整数bytesigned char
Uint8Array18位无符号整数octetunsigned char
Uint8ClampedArray18位无符号整数 (clamped)octetunsigned char
Int16Array216位有符号整数shortshort
Uint16Array216位无符号整数unsigned shortunsigned short
Int32Array432位有符号整数longint
Uint32Array432位无符号整数unsigned longunsigned int
Float32Array432位IEEE浮点数unrestricted floatfloat
Float64Array864位IEEE浮点数unrestricted doubledouble

玩过canvas的可能会觉得很眼熟。

因为ImageData中用于存储图像数据的数组便是Uint8ClampedArray类型的。

例如：

var context = document.createElement("canvas").getContext("2d");

var imageData = context.createImageData(100, 100);

console.log(imageData.data);

其在FireBug中显示为：

Uint8ClampedArray { 0=0, 1=0, 2=0, 更多...}

 

为什么要用TypedArray

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

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

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

参与测试的浏览器为：

FireFox 17.0.1 和 Chrome 23.0.1271.97m

  • Test1：顺序读取速读
var timeArray1 = [];
var timeArray2 = [];

function check1(){
    var array = new Uint8ClampedArray(5000000);
    for(var i = array.length; i--;){
        array[i] = Math.floor(Math.random() * 100);
    }
    var temp;
    var time1 = (new Date()).getTime();
    for(var i = array.length; i--;){
        temp = array[i];
    }
    var time2 = (new Date()).getTime();
    console.log(time2 - time1);
    timeArray1.push(time2 - time1);
}

function check2(){
    var array2 = new Array(5000000);
    for(var i = array2.length; i--;){
        array2[i] = Math.floor(Math.random() * 100);
    }
    var temp;
    var time3 = (new Date()).getTime();
    for(var i = array2.length; i--;){
        temp = array2[i];
    }
    var time4 = (new Date()).getTime();
    console.log(time4 - time3);
    timeArray2.push(time4 - time3);
}

function timer(__fun, __time, __callback){
    var now = 0;
    function begin(){
        var timeout = setTimeout(function(){
            if(now !== __time){
                now++;
                __fun();
                begin();
            }else{
                if(timeArray1.length && timeArray2.length){
                    console.log("timeArray1 == " + timeArray1 + ", average == " + average(timeArray1));
                    console.log("timeArray2 == " + timeArray2 + ", average == " + average(timeArray2));
                }
                __callback && __callback();
            }
        }, 100);
    }
    begin();
}

function average(__array){
    var total = 0;
    for(var i = __array.length; i--;){
        total += __array[i];
    }
    return (total / __array.length);
}

timer(check1, 10, function(){
    timer(check2, 10);
});

可见Uint8ClampedArray的读取速度明显比Array要快（条状柱越长，代表花费时间越多）。

  • Test2：随机读取
//……

function check1(){
    var array = new Uint8ClampedArray(5000000);
    for(var i = array.length; i--;){
        array[i] = Math.floor(Math.random() * 100);
    }
    var temp;
    var time1 = (new Date()).getTime();
    for(var i = array.length; i--;){
        temp = array[Math.floor(Math.random() * 5000000)];
    }
    var time2 = (new Date()).getTime();
    console.log(time2 - time1);
    timeArray1.push(time2 - time1);
}

function check2(){
    var array2 = new Array(5000000);
    for(var i = array2.length; i--;){
        array2[i] = Math.floor(Math.random() * 100);
    }
    var temp;
    var time3 = (new Date()).getTime();
    for(var i = array2.length; i--;){
        temp = array2[Math.floor(Math.random() * 5000000)];
    }
    var time4 = (new Date()).getTime();
    console.log(time4 - time3);
    timeArray2.push(time4 - time3);
}

//……

随即读取中Uint8ClampedArray的读取速度也是比Array要快的。

  • Test3：顺序写入
//……

function check1(){
    var array = new Uint8ClampedArray(5000000);
    var time1 = (new Date()).getTime();
    for(var i = array.length; i--;){
        array[i] = Math.floor(Math.random() * 100);
    }
    var time2 = (new Date()).getTime();
    console.log(time2 - time1);
    timeArray1.push(time2 - time1);
}

function check2(){
    var array2 = new Array(5000000);
    var time3 = (new Date()).getTime();
    for(var i = array2.length; i--;){
        array2[i] = Math.floor(Math.random() * 100);
    }
    var time4 = (new Date()).getTime();
    console.log(time4 - time3);
    timeArray2.push(time4 - time3);
}

//……

  • Test4：复制操作（U8C to U8C 和 Array to U8C）
//……

function check1(){
    var array = new Uint8ClampedArray(5000000);
    for(var i = array.length; i--;){
        array[i] = Math.floor(Math.random() * 100);
    }
    var temp;
    var array2 = new Uint8ClampedArray(5000000);
    var time1 = (new Date()).getTime();
    array2.set(array);
    var time2 = (new Date()).getTime();
    console.log(time2 - time1);
    timeArray2.push(time2 - time1);
}

function check2(){
    var array = new Array(5000000);
    for(var i = array.length; i--;){
        array[i] = Math.floor(Math.random() * 100);
    }
    var temp;
    var array2 = new Uint8ClampedArray(5000000);
    var time1 = (new Date()).getTime();
    array2.set(array);
    var time2 = (new Date()).getTime();
    console.log(time2 - time1);
    timeArray2.push(time2 - time1);
}

//……

可见U8C复制到U8C，比Array复制到U8C快得多。

 

参考文献

Typed Array Specification

snake_hand
关注
HTML5引入的新数组TypedArray介绍
12-13
你可以改变数组中每个元素的值甚至是类型。 好吧，其实他是一个对象，比如我们可以这样去创建数组： 复制代码代码如下:var array = new Array(10); Javascript的数组的强大以及全能，给我们带来了便捷性。但一般而...
Js中blob、file、FormData、DataView、TypedArray
可可的博客
02-21 1568
ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图（TypedArray视图和DataView视图)来读写，视图的作用是以指定格式解读二进制数据。简单说，ArrayBuffer对象代表原始的二进制数据，TypedArray视图用来读写简单类型的二进制数据，DataView视图用来读写复杂类型的二进制数据。TypedArray视图，与DataView视图的一个区别是，它不是一个构造函数，而是一组构造函数，代表不同的数据格式。一种数据格式，用于表单的上传。
JavaScript 图片RGBA数据转base64编码
l8487的专栏
07-08 717
RGBA转base64
JS Uint8ClampedArray to Base64
xuyanquan的专栏
12-10 3375
var toBase64 = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h',...
javaScript（十四） TypedArray，送给正在迷茫的你
2401_83974173的博客
04-01 1048
当传入数组长度时，一个内部数组缓存区被创建，该缓存区的大小是数组的长度乘以数组中每个元素的字节数，并且每个元素的值都是0；这边y虽然是x复制过来的，但是y不会随着x修改，如果要求同步，那么，参数x得是x.buffer，意思是代表指向同一段地址。console.log(y[0]) //输出1，不会随着X的改变而改变。//创建一个指向ab的Int32视图，开始字节0，直到缓冲区末尾。//创建一个指向ab的Int32视图，开始字节2，直到缓冲区末尾。//创建一个指向ab的Int32视图，开始字节2，长度为2。
HTML5 ArrayBuffer：类型化数组 （二）
weixin_33963189的博客
02-16 1027
  类型化数组是JavaScript操作二进制数据的一个接口。 这要从WebGL项目的诞生说起，所谓WebGL，就是指浏览器与显卡之间的通信接口，为了满足JavaScript与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式。 比如，以文本格式传递一个32位整数，两端的JavaScript脚本与显卡都要进行格式转化，将非常耗时。这时要是存在一种机制，可...
将html文件转为C数组小工具
10-09
通过这种方式，HTML文件的内容可以作为程序的一部分被加载到内存中，当需要响应HTTP请求时，直接从数组中读取并发送出去。 接下来，我们介绍如何使用“html2c.exe”这个工具。这是一个命令行工具，它的主要功能是将...
数组_本地留言板_H5数组例题_数组练习_
10-03
例如，你可以被要求编写一个函数，找出数组中的最大值，或者实现一个简单的搜索算法，找到特定的留言。 对于初学者来说，理解数组的原理和熟练运用其方法是非常关键的步骤。通过解决H5数组例题，不仅可以巩固理论...
js数组中如何随机取出一个值
12-09
在这个例子中，我们看到一个简单的HTML文件，其中包含了一个JavaScript函数，用于从一个字符串数组中随机选取并显示一条格言。下面我们将详细解释这个过程。 首先，我们看到一个`<script>`标签，它包含了JavaScript...
【算法】base64与Uin8Array互转实现
tc291695377的博客
05-07 3686
base64格式协议rfc2045-2049 base64实质上是把3byte的转成4byte的字符串 是为了方便把二进制转成字符串进行传输避免不同平台上的差异 虽然toString也是可以实现base64的，但还是需要弄懂其原理 下面是我用nodejs实现的 const fs = require('fs'); let base = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/' class Base64Help.
JavaScript 二进制数组（ArrayBuffer、Typed Array、DataView）
越努力，越幸运！
05-09 3006
前言 二进制数组是JavaScript用来操作二进制数据的一个接口。有ArrayBuffer对象、TypedArray视图和DataView视图三个对象接口。它们可以以数组下标的形式直接操作内存，可以与操作系统的原生接口进行二进制通信。 随着Web应用程序变得越来越强大，尤其一些新增加的功能例如：音频视频编辑，访问WebSockets的原始数据等，很明显有些时候如果使用JavaScript代码可以快速方便地通过类型化数组(Typed Arrays)来操作原始的二进制数据将会非常有帮助。注意：(不要把类型
NodeJs学习之路（3）
Tony1590112的博客
12-21 280
Buffer官方文档的描述： 在 ECMAScript 2015 (ES6) 引入 TypedArray 之前，JavaScript语言没有读取或操作二进制数据流的机制。 Buffer 类被引入作为 Node.js API 的一部分，使其可以在 TCP 流或文件系统操作等场景中处理二进制数据流。 TypedArray 现已被添加进 ES6 中，Buffer 类以一种更优化、更适合 No
【二进制】深入解析TypedArray：属性、方法与代码示例
最新发布
软考鸭
08-26 687
在JavaScript中，TypedArray是一种用于处理二进制数据的特殊数组类型。与普通数组相比，TypedArray提供了更高的性能和更好的控制，使得我们能够以特定的数字格式存储和操作二进制数据。本文将深入解析TypedArray的属性和方法，并通过代码示例进行说明。
javaScript（十四） TypedArray，事件分发流程
m0_58269520的博客
03-27 630
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
ArrayBuffer和TypedArray
qq_34754747的博客
02-14 762
一、背景 1、产生 ArrayBuffer对象、TypeArray视图和DataView视图是JavaScript操作二进制数据的一个接口。这些对象早就存在，属于独立的规格（2011年2月发布），ES6将它们纳入了ECMAScript规格，并且增加了新的方法。它们都以数组的语法处理二进制数据，所以统称为二进制数组。 这个接口的原始设计目的与WebGL项目有关，所谓WebGL，就是浏览器与显卡之间的通信接口，为了满足JavaScipt与显卡之间大量、实时的数据交换，它们之间的数据通信必须是二进制的，而不
javaScript（十四） TypedArray
Oliver尹的博客
07-28 2280
TypedArray 描述的是二进制缓存区一个类似数组的视图，也叫类型数组 类型 大小（字节单位） 描述 Int8Array 1 8位二进制带符号整数-2^7~2^7-1 Unit8Array 1 8位无符号整数0~(2^8)-1 Unit8ClampedArray 1 8位无符号整数且值固定在0~255之间 Int16Array...
ES6中的TypedArrays是什么？它们与普通数组有何不同？
极客前端探索者的博客
06-29 342
ES6中的TypedArrays，即类型化数组，是一类指定元素类型的数组，而不是实际的数组类型。它们提供了一种用于处理二进制数据的接口，可以让我们像操作数组一样直接操作内存中的二进制数据。
Uint8Array转换成Base64
月来better
09-15 4443
详细官方地址：https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder function transformUint8ArrayToBase64(array) { var binary = ""; for (var len = array.byteLength, i = 0; i < le
HTML5新特性：TypedArray优化JavaScript数组操作
HTML5引入的TypedArray是JavaScript中针对数组功能的一种增强，它旨在解决传统JavaScript数组在处理二进制数据时的一些局限性。与普通的JavaScript数组不同，TypedArray是一种固定长度的缓冲区类型，设计初衷是为了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值