「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战」
在 11 月份分享文章中大部分篇幅会放在如何编写现代的 JavaScript 代码,其中谈到 JavaScript 为开阔疆土而引入一些新特性以及其用法。
当前随着 web 应用发展,对于 web 应用要求也是越来越高,以前简单文本交互已经远远无法满足一些需求要求。在 Web 开发中,当需要处理文件时(创建,上传,下载),经常会遇到二进制数据。另一个典型的应用场景是图像处理。
因此新版本 ES6 中对这一块也加强一块,引入 ArrayBuffer,那么在 ArrayBuffer 中有了 Array 那么 ArrayBuffer 和 Array 有什么关系吗,答案是没有什么关系。
让我们先澄清一个可能的误区。ArrayBuffer 与 Array 没有任何共同之处:
- ArrayBuffer 的长度是固定的,无法增加或减少其长度
- ArrayBuffer 所占用了内存中的是事先指定好的
- 要访问单个字节,需要通过视图对象来进行访问,而不是
buffer[index]
let buffer = new ArrayBuffer(16); // 创建一个长度为 16 的 buffer
alert(buffer.byteLength); // 16
基本的二进制对象是
ArrayBuffer对固定长度的连续内存空间的引用
ArrayBuffer 用于存储数据,通过视图(Typed Arrays 和 DataViews)可以读取和改变数据。为了创建一个 DataView,需要向其构造函数传入一个 ArrayBuffer 类型参数。类型化数组构造函数可以选择为你创建一个ArrayBuffer。
虽然我们可以创建用于存储数据二进制对象,不过想要操作这个对象我们还需要一个视图,通过视图我们可以访问和修改这个二进制数据。
Uint32Array—— 将每 4 个字节视为一个 0 到 4294967295 之间的整数。这称为 “32 位无符号整数”。
const buffer = new ArrayBuffer(32);//创建一个长度为 32 的 buffer
console.log(buffer.byteLength);//32
let view = new Uint32Array(buffer);
console.log(view.length)//8
console.log(view.BYTES_PER_ELEMENT)// 每个整数 4 个字节
view[0] = 123456;
for(let num of view) {
console.log(num); // 123456,然后 0,0,0, 0,0,0, 0(一共 8 个值)
}