es6 ArrayBuffer对象
ArrayBuffer对象
概述
ES6 ArrayBuffer
对象代表储存二进制数据的一段内存,它不能直接读写,只能通过视图(TypedArray
视图和DataView
视图)来读写,视图的作用是以指定格式解读二进制数据。
ArrayBuffer
也是一个构造函数,可以分配一段可以存放数据的连续内存区域。
const buf = new ArrayBuffer(32);
上面代码生成了一段 32 字节的内存区域,每个字节的值默认都是 0。可以看到,ArrayBuffer
构造函数的参数是所需要的内存大小(单位字节)。
为了读写这段内容,需要为它指定视图。DataView
视图的创建,需要提供ArrayBuffer
对象实例作为参数。
const buf = new ArrayBuffer(32);
const dataView = new DataView(buf);
dataView.getUint8(0) // 0
上面代码对一段 32 字节的内存,建立DataView
视图,然后以不带符号的 8 位整数格式,从头读取 8 位二进制数据,结果得到 0,因为原始内存的ArrayBuffer
对象,默认所有位都是 0。
另一种 TypedArray 视图,与DataView
视图的一个区别是,它不是一个构造函数,而是一组构造函数,代表不同的数据格式。
const buffer = new ArrayBuffer(12);
const x1 = new Int32Array(buffer);
x1[0] = 1;
const x2 = new Uint8Array(buffer);
x2[0] = 2;
x1[0] // 2
上面代码对同一段内存,分别建立两种视图:32 位带符号整数(Int32Array
构造函数)和 8 位不带符号整数(Uint8Array
构造函数)。由于两个视图对应的是同一段内存,一个视图修改底层内存,会影响到另一个视图。
ES6 TypedArray 视图的构造函数,除了接受ArrayBuffer
实例作为参数,还可以接受普通数组作为参数,直接分配内存生成底层的ArrayBuffer
实例,并同时完成对这段内存的赋值。
const typedArray = new Uint8Array([0,1,2]);
typedArray.length // 3
typedArray[0] = 5;
typedArray // [5, 1, 2]
上面代码使用 TypedArray 视图的Uint8Array
构造函数,新建一个不带符号的 8 位整数视图。可以看到,Uint8Array
直接使用普通数组作为参数,对底层内存的赋值同时完成。
ArrayBuffer.prototype.byteLength
ArrayBuffer
实例的byteLength
属性,返回所分配的内存区域的字节长度。
const buffer = new ArrayBuffer(32);
buffer.byteLength
// 32
如果要分配的内存区域很大,有可能分配失败(因为没有那么多的连续空余内存),所以有必要检查是否分配成功。
if (buffer.byteLength === n) {
// 成功
} else {
// 失败
}
ArrayBuffer.prototype.slice()
ArrayBuffer
实例有一个slice
方法,允许将内存区域的一部分,拷贝生成一个新的ArrayBuffer
对象。
const buffer = new ArrayBuffer(8);
const newBuffer = buffer.slice(0, 3);
上面代码拷贝buffer
对象的前 3 个字节(从 0 开始,到第 3 个字节前面结束),生成一个新的ArrayBuffer
对象。slice
方法其实包含两步,第一步是先分配一段新内存,第二步是将原来那个ArrayBuffer
对象拷贝过去。
slice
方法接受两个参数,第一个参数表示拷贝开始的字节序号(含该字节),第二个参数表示拷贝截止的字节序号(不含该字节)。如果省略第二个参数,则默认到原ArrayBuffer
对象的结尾。
除了slice
方法,ArrayBuffer
对象不提供任何直接读写内存的方法,只允许在其上方建立视图,然后通过视图读写。
ArrayBuffer.isView()
ArrayBuffer
有一个静态方法isView
,返回一个布尔值,表示参数是否为ArrayBuffer
的视图实例。这个方法大致相当于判断参数,是否为 TypedArray 实例或DataView
实例。
const buffer = new ArrayBuffer(8);
ArrayBuffer.isView(buffer) // false
const v = new Int32Array(buffer);
ArrayBuffer.isView(v) // true
es6 ArrayBuffer对象相关推荐
- ES6 ArrayBuffer 概述
概述 ES6 ArrayBuffer对象.TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口.这些对象早就存在,属于独立的规格(2011 年 2 月发布) ...
- es6 ArrayBuffer的应用
ArrayBuffer的应用 大量的 Web API 用到了ArrayBuffer对象和它的视图对象. AJAX 传统上,服务器通过 AJAX 操作只能返回文本数据,即responseType属性默认 ...
- 【ES6】对象的拓展
[ES6]对象的拓展 一.对象的两种表示法[掌握] 1)简洁表示法 2)属性名表达式法 二.Object.is()[了解] 三.Object.assign()[了解] 查看更多ES6教学文章: 参考文 ...
- 第九节:ES6为对象做了哪些扩展?
ES6不仅为字符串.数值和数组带来了扩展,也为对象带来了很多新特性.这一节,我们来一起学习一下对象的扩展. 对象的传统表示法 我们回顾一下,对象的传统表示法: let person = { " ...
- es6 Atomics对象
Atomics对象 多线程共享内存,最大的问题就是如何防止两个线程同时修改某个地址,或者说,当一个线程修改共享内存以后,必须有一个机制让其他线程同步.SharedArrayBuffer API 提供A ...
- es6 对象中是否有键值_js/es6判断对象是否为空,并判断对象是否包含某个属性...
js判断对象为空以及有好几种方法了,但是个人觉得不是特别方便. 比如: 1.把对象通过 JSON.stringify 转为字符串,再判断字符串是否等于 " {} " 2.for i ...
- es6调用c语言sdk,ES6 关于对象的扩展-contracts-WinFrom控件库|.net开源控件库|HZHControls官网...
今天来简单说下ES6 中对象的扩展 首先回顾传统的对象表示法 let person={ 'name':'zhang', 'age':'20', 'play':function(){ alert('pl ...
- es6根据对象属性获取到当前值的下标
前言: es6根据对象属性获取到当前值的下标. 实现效果: var index = 数组.findIndex(item=> item.value=== 0);//item.value=== 0是 ...
- 使用ES6进行对象数组去重
之前使用new Set数组去重,只可以去重简单字符数组,或者数字数组等.Array.from(new Set(arr))即可.但是这种方案针对对象数组并不适用. 那么简易的使用ES6进行对象数组去重呢 ...
最新文章
- Android自定义控件(特效二) 点击屏幕,根据所点击的位置绘制桃心
- php中括号的优先级是不是最高的,理解php中操作符的优先级和结合性
- 浅谈Object Pascal的指针[引用 Nicrosoft]
- 【kafka系列】centos7系统安装kafka
- 华为机试HJ3:明明的随机数
- C#继承(初始化基类,重写,重载)
- 计算机主机光驱弹不出来怎么办,win7系统电脑按下光驱按钮托盘就是弹不出来怎么办...
- AMPL_网络项目问题
- vue 导出excel文件
- 关于火狐浏览器国际版和国内版的说明
- 海马扫描Linux,海马扫描公式识别软件
- “碳壁垒”悄然而起,碳足迹如何算清楚、减明白?|双碳科普
- 【年月】-单词学习记录(模板)
- 中科院半导体所裴为华研究团队及其合作者在脑电电极领域取得重要研究进展...
- ZooKeeper学习笔记五 ZooKeeper开源客户端ZkClient
- Nodejs实现给手机发送短信验证码用于登录功能(免费短信)
- 毕设 老年公寓管理系统
- 网址打包(详细图文教程!) 使用HBuilder将网址打包成app
- rust开发环境_Rust开发环境搭建
- Java实现简单的台球桌游戏