ArrayBuffer, Binary Arrays
JavaScript ArrayBuffer, Binary Arrays （JavaScript ArrayBuffer ，二进制数组）
In web-development, binary data is generally used while working with files ( for instance, creating, uploading, downloading). JavaScript allows doing it all. （在Web开发中，通常在处理文件（例如，创建、上传、下载）时使用二进制数据。 JavaScript允许执行所有操作。）
Multiple classes exist, among them are:
ArrayBuffer
ArrayBuffer, Uint8Array, DataView （- ArrayBuffer、Uint8Array、DataView）
Uint8Array
Blob, and so on. （- Blob等等。）
In JavaScript, binary data is performed in a non-standard way. But, it becomes simple after getting into some details. （在JavaScript中，二进制数据以非标准方式执行。但是，在深入了解一些细节后，它会变得简单。）
ArrayBuffer
ArrayBuffer
ArrayBuffer is known as the basic binary object. It is a reference to a fixed-length contiguous memory area. （ArrayBuffer被称为基本二进制对象。它是对固定长度连续存储区域的引用。）
ArrayBuffer can be generated in the following way:
let buffer = new ArrayBuffer(16); // create a buffer of length 16
console.log(buffer.byteLength); // 16
A contiguous memory area of 16 bytes and pre-filled with zeros by this. Be careful not to confuse ArrayBuffer with Array. they don’t have anything in common. （16个字节的连续内存区域，并由此预填充零。 注意不要将ArrayBuffer与Array混淆。它们没有任何共同点。）
The most specific things about ArrayBuffer is that:
Its length is fixed, it can’t be increased or decreased. （-它的长度是固定的，不能增加或减少。）
Exactly that much memory is taken by it in the memory. （-正是它在内存中占用了那么多内存。）
For accessing individual bytes, another “view” object, not buffer, is needed. （-对于访问单个字节，需要另一个“视图”对象，而不是缓冲区。）
For manipulating an ArrayBuffer, a “view” object is needed. （为了操作ArrayBuffer ，需要一个“视图”对象。）
On its own, a view object contains nothing. It gives an interpretation of the bytes, stored in the ArrayBuffer. （视图对象本身不包含任何内容。它提供了存储在ArrayBuffer中的字节的解释。）
For example, （例如，制造业，）
Uint8Array treats every byte inside ArrayBuffer as a particular number with possible values from 0 to 255 ( one byte is equal to 8 bites). A value like this is known as “8-bit unsigned integer”. （- Uint8Array将ArrayBuffer中的每个字节视为一个特定的数字，可能的值从0到255 （一个字节等于8位）。这样的值被称为“8位无符号整数”。）
Uint16Array treats any two bytes like an integer, with possible values from 0 to 65535 (“16-bit unsigned integer”). （- Uint16Array将任何两个字节视为整数，可能的值从0到65535 （ “16位无符号整数” ）。）
Uint32Array treats any four bytes like an integer with possible values from 0 to 4294967295 (“32-bit unsigned integer”). （- Uint32Array将任何四个字节视为0到4294967295之间可能值的整数（ “32位无符号整数” ）。）
Float64Array treats any eight bytes like a floating-point number with possible values from 5.0x10-324 to 1.8x10308. （- Float64Array将任何八个字节视为浮点数，可能的值从5.0x10-324到1.8x10308。）
ArrayBuffer is the raw binary data. It’s the basic object, the root of everything. （ArrayBuffer是原始二进制数据。它是基本的对象，是一切的根源。）
For writing it or iterating over it, and for any other operation, a view should be used like this:
let buffer = new ArrayBuffer(16); // create a buffer of length 16
let view = new Uint32Array(buffer); // consider buffer as a sequence of 32-bit integers
console.log(Uint32Array.BYTES_PER_ELEMENT); // 4 integer byte
console.log(view.length); // 4, it stores so many integers
console.log(view.byteLength); // 16, size in bytes
// let's write the value
view[0] = 123456;
// iterate over the values
for (let num of view) {
console.log(num); // 123456, then 0, 0, 0 (4 values total)
}
TypedArray
TypedArray
TypedArray is the common term for all the views (Uint8Array, Uint32Array, and more). The same methods and properties are used by them. （TypedArray是所有视图（ Uint8Array、Uint32Array等）的通用术语。它们使用相同的方法和属性。）
There is no constructor TypedArray. It’s just an “umbrella” term for representing one of the views over ArrayBuffer. For example, new new TypedArray means one of the new Int8Array, new Uint8Array, and more. （没有构造函数TypedArray。它只是一个“伞形”术语，用于表示ArrayBuffer上的其中一个视图。例如， new new TypedArray意味着new Int8Array、new Uint8Array等之一。）
The Typed array is similar to the regular arrays: they include iterable and indexes.
Five types of arguments exist:
new TypedArray(buffer, [byteOffset], [length]);
new TypedArray(object);
new TypedArray(typedArray);
new TypedArray(length);
new TypedArray();
A TypedArray can be created directly, without referring to ArrayBuffer. But no view can exist without an underlying ArrayBuffer. So, it’s generated automatically in any case, except when it’s provided. （可以直接创建TypedArray ，而无需参考ArrayBuffer。但是，如果没有底层ArrayBuffer ，任何视图都不可能存在。因此，它在任何情况下都是自动生成的，除非提供了它。）
The properties for accessing ArrayBuffer are the following:
arr.buffer: it references the ArrayBuffer.
arr.byteLength: it’s the length of the ArrayBuffer.
So, it can be moved from one view to another like this:
let arr8 = new Uint8Array([0, 1, 2, 3]);
// another view at the same data
let arr16 = new Uint16Array(arr8.buffer);
The list of the typed arrays is demonstrated below:
Uint8Array, Uint16Array, Uint32Array: these are used for integer numbers of 8,16, and 32 bits.
Uint8ClampedArray: it is used for 8-bit integers.
Int8Array, Int16Array, Int32Array are used for signed integer numbers and can be negative. （- Int8Array、Int16Array、Int32Array用于有符号整数，可以是负数。）
Float32Array, Float64Array are applied for the signed floating-point numbers of 32 and 64 bits. （- Float32Array、Float64Array适用于32位和64位的带符号浮点数。）
Also, take into account that no single-value type (int or int8) exists in JavaScript. （此外，要考虑到JavaScript中不存在单值类型（ int或int8 ）。）
Out-of-bounds Behavior
If you try to write an out-of-bounds value into a typed array, no error will occur, but the bytes will be cut off. （如果尝试将越界值写入类型化数组，则不会发生错误，但字节将被切断。）
For example, let’s attempt to store 256 into Uint8Array. Within the binary form, 256 is 9 bits (100000000). But, as it was stated above, Uint8Array can contain 8 bits per value. （例如，让我们尝试将256存储到Uint8Array中。在二进制形式中， 256为9位（ 100000000 ）。但是，如上所述， Uint8Array每个值可以包含8位。）
The demo will look like this:
let uint8array = new Uint8Array(16);
let number = 256;
console.log(number.toString(2)); // 100000000, binary representation
uint8array[0] = 256;
uint8array[1] = 257;
console.log(uint8array[0]); // 0
console.log(uint8array[1]); // 1
In this point,Uint8ClampedArray is unique: it behaves differently. It can save 255 for each number greater than 255 and 0 for negative numbers.
The Methods of TypedArray
The Methods of TypedArray （TypedArray的方法）
Regular array methods are used by ArrayBuffer. But, there are remarkable exceptions. （ArrayBuffer使用常规数组方法。但是，也有一些显著的例外。）
For example, slice, map, find, and other methods can be iterated. But, there are things that can not be done. For example, there is no concat method and no splice. （例如，可以迭代切片、映射、查找和其他方法。 但是，有些事情是做不到的。 例如，没有concat方法，也没有splice。）
Instead, there are to additional methods such as:
arr.set(fromArr, [offset]): it copies all the elements from fromArr to the arr, beginning at the offset position.
arr.subarray([begin, end]): it generates a new same-type view from begin to end.
This method is like the slice method but it doesn’t copy anything. Wit it, you just can create a new view, operating on a particular piece of data. （此方法类似于切片方法，但它不会复制任何内容。换句话说，您只需创建一个新视图，对特定数据进行操作。）
DataView
DataView
There is a flexible untyped view over the ArrayBuffer, known as DataView. With it, you can access the data on any offset in any format. The constructor indicates what the format is for typed arrays. The whole array should be uniform, and arr[i] is the i-th number. The data can be accessed using .getUint8(i) or .getUint16(i) method with DataView. （ArrayBuffer上有一个灵活的非类型化视图，称为DataView。 使用它，您可以以任何格式访问任何偏移量的数据。 构造函数指示类型化数组的格式。 整个数组应该是均匀的， arr [i]是第i个数字。 可以使用DataView的.getUint8 (i)或.getUint16 (i)方法访问数据。）
The syntax of DataView is the following:
new DataView(buffer, [byteOffset], [byteLength]);
Let’s try to extract numbers in distinct formats from the same buffer, like this:
// binary array of 4 bytes, all have a maximal value of 255
let bufferArr = new Uint8Array([255, 255, 255, 255]).buffer;
let dataView = new DataView(bufferArr);
// get an 8-bit number with an offset of 0
console.log(dataView.getUint8(0)); // 255
// now get a 16-bit number with an offset of 0, it consists of 2 bytes, together iterpreted as 65535
console.log(dataView.getUint16(0)); // 65535 (biggest 16-bit unsigned int)
// get 32-bit number with an offset of 0
console.log(dataView.getUint32(0)); // 4294967295 ,biggest unsigned int 32-bit
dataView.setUint32(0, 0); // thus setting all bytes to 0, set 4-byte number to zero
So, the DataView is great for storing mixed-format data in the same buffer. （因此， DataView非常适合将混合格式的数据存储在同一缓冲区中。）
Summary
Summary （概要）
ArrayBuffer is the basic binary object. It is considered as a reference to a fixed-length contiguous memory area. A view is necessary for almost all the operations on ArrayBuffer. （ArrayBuffer是基本的二进制对象。 它被认为是对固定长度连续内存区域的引用。 视图对于ArrayBuffer上的几乎所有操作都是必需的。）
It can be either a TypedArray or a DataView. （它可以是TypedArray或DataView。）
In the majority of cases, you can create and operate on the typed arrays directly, leaving ArrayBuffer under cover. It can be accessed as a .buffer , making another view, if it’s necessary. （在大多数情况下，可以直接在类型化数组上创建和操作ArrayBuffer。如有必要，可以作为.buffer进行访问，并制作另一个视图。）