• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5 中的新数组

HTML5 中的新数组

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5教程,HTML5中国,HTML5 中的新数组,html5cn,html5资料,html5文章,html5内容,等相关知识,匿名希望在学习及工作中可以帮助到您
Javascript中的数组是个强大的家伙:

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

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

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 = 0 1 2 3 4 5 6 7
索引数
v1 = 0 1
v2 = 0 1 2 3 4 5
v3 = 0 1

这表示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:

或者:

数据操作

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 类型
Int8Array 1 8位有符号整数 byte signed char
Uint8Array 1 8位无符号整数 octet unsigned char
Uint8ClampedArray 1 8位无符号整数 (clamped) octet unsigned char
Int16Array 2 16位有符号整数 short short
Uint16Array 2 16位无符号整数 unsigned short unsigned short
Int32Array 4 32位有符号整数 long int
Uint32Array 4 32位无符号整数 unsigned long unsigned int
Float32Array 4 32位IEEE浮点数 unrestricted float float
Float64Array 8 64位IEEE浮点数 unrestricted double double

玩过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还有更多好处,比如具有更好的性能,下面我们进行一些小测试来验证这一点。

参与测试的浏览器为:

您可能想查找下面的文章:

  • 一款利用html5和css3动画排列人物头像的实例演示
  • html5教程调用绘图api画简单的圆形代码分享
  • html5教程画矩形代码分享
  • html5教程制作简单画板代码分享
  • html5基础教程常用技巧整理
  • html5教程-Canvas入门
  • html5教程画矩形代码分享
  • HTML5晃动DeviceMotionEvent事件
  • HTML5教程之html 5 本地数据库(Web Sql Database)
  • HTML5中对contenteditable属性的解释与规定

相关文章

  • 2018-12-03怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解(一)
  • 2018-12-03H5+C3实现时钟效果
  • 2018-12-03如何绘制路径-线段
  • 2018-12-03css 如何让背景图片拉伸填充避免重复显示_html5教程技巧
  • 2018-12-03i、em、b、strong元素的使用详解
  • 2018-12-03Html5新增标签总结
  • 2018-12-03如何使用canvas实现图片马赛克
  • 2018-12-03微信内置浏览器 x5内核 有哪些坑及解决方案?
  • 2018-12-03Html5 Canvas初探学习笔记(4) -清除屏幕
  • 2018-12-03HTML5 对各个标签的定义与规定:title

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详解HTML5之pushstate、popstate操作history,无刷新改变当前url
    • html5 canvas 画图教程案例分析
    • 分享一个H5上传本地图片以及预览功能的图文实例
    • HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
    • 详解H5 活动页之移动端 REM 布局适配方法
    • 微信如何实现向浏览器注入JS API,并且调用方式就像浏览器原生API一样?
    • 利用H5实现一个轮播器(触屏版)的实例教程
    • 怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解(一)
    • HTML5存储方式小结
    • 如何看待「HTML5 就是变了名字的 JavaScript」这种说法?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有