您的位置:首页> 前端教程> ES6教程
文章导航

JavaScript ArrayBuffer

2018-12-31 15:23| 作者: admin| 查看: 858| 评论: 0|来自: 蚂蚁部落

JavaScript是一种应用于网络编程的脚本语言。

设计的初衷是为了实现用户与页面更加人性化的交互,为页面增加简单动态效果。

随着时间的推移和软硬件的进步,JavaScript用途用途越来越广泛,是设计之初梦想之所不到。

可以肯定,最初JavaScript就没有考虑过要直接处理二进制数据,在ES2015之前没有此方面明确规定。

HTML5规范的制定,对二进制数据的操作有了现实的需求:

(1).XHR2可以上传和下载二进制数据。

(2).canvas和WebGL等绘图功能需要和显卡之间进行大量的二进制数据通信。

于是,ES2015新增ArrayBuffer对象和Typed Array(类型化数组)实现操作二进制数据。

关于视图可以参阅以下两篇文章:

(1).TypedArray视图参阅JavaScript TypedArray 视图一章节。

(2).DataView视图参阅JavaScript DataView 视图一章节。

一.基本概念:

ArrayBuffer对象表示内中一段二进制存储区域,具有如下特点:

(1).是一段长度固定且连续的存储区域,所以读写速度快。

(2).只是一段存储区域,自身无法读写数据,需要借助于类型化数组。

通过构造函数可以创建一个ArrayBuffer对象,语法结构如下:

[JavaScript] 纯文本查看 复制代码
let buffer = new ArrayBuffer(length);

参数解析:

(1).length:必需,规定开辟这段二进制存储空间的字节长度。

看一个代码片段:

[JavaScript] 纯文本查看 复制代码
let buffer = new ArrayBuffer(16);

上述代码通过构造函数创建一个ArrayBuffer对象,表示内存中一块连续且长度为16个字节的内存空间。

特别说明:默认状态下,每一个字节的数据为0。

二.属性:

(1).byteLength:此属性返回所分配连续内存空间的长度。

三.方法:

(1).ArrayBuffer.isView():静态方法,检测参数是否为ArrayBuffer的视图实例。

(2).slice() :实例方法,在原有内存空间基础上拷贝生成一个新内存空间,也就是一个新ArrayBuffer实例。

四.代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let buf = new ArrayBuffer(32);
console.log(buf.byteLength);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/31/152507zfv52i03ixsp52fs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

byteLength属性返回的就是ArrayBuffer对象开辟内存空间的长度,也就是字节的数目。

[JavaScript] 纯文本查看 复制代码运行代码
let buffer = new ArrayBuffer(8);
let v = new Int32Array(buffer);
console.log(ArrayBuffer.isView(v));

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/31/152533zcz87ic7c50d0c5d.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).ArrayBuffer.isView()是一个静态方法,直接使用类调用。

(2).它可以判断参数是否是一个视图实例(实质就是类型化数组实例)。

(3).前面已经介绍过ArrayBuffer只负责开辟内存空间,并不能直接操作数据,所以需要借助于类型化数组。

更多用法可以参阅ArrayBuffer.isView() 方法一章节。

[JavaScript] 纯文本查看 复制代码运行代码
let buf1 = new ArrayBuffer(8);
let buf2 = buf1.slice(3);
console.log(buf2.byteLength);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/31/152609ekb3dabob6rzokza.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).此方法可以从原来ArrayBuffer内存区域拷贝指定长度的内容,生成一个新的ArrayBuffer对象。

(2).如果方法只规定一个参数,表示从此处开始拷贝一直到结尾,所以打印结果是5。

关于此方法更多内容参阅ArrayBuffer slice() 方法一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:Math.imul()下一篇:Math.asinh()

最新评论

返回顶部