You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 4-binary/01-arraybuffer-binary-arrays/article.md
+11-15Lines changed: 11 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ Although, there's a bit of confusion, because there are many classes. To name a
9
9
10
10
Binary data in JavaScript is implemented in a non-standard way, compared to other languages. But when we sort things out, everything becomes fairly simple.
11
11
12
-
**The basic binary object is `ArrayBuffer` -- a reference to a fixed-length contiguos memory area.**
12
+
**The basic binary object is `ArrayBuffer` -- a reference to a fixed-length contiguous memory area.**
13
13
14
14
We create it like this:
15
15
```js run
@@ -102,17 +102,17 @@ new TypedArray();
102
102
*!*
103
103
let arr =newUint8Array([0, 1, 2, 3]);
104
104
*/!*
105
-
alert( arr.length ); // 4
106
-
alert( arr[1] ); // 1
105
+
alert( arr.length ); // 4, created binary array of the same length
106
+
alert( arr[1] ); // 1, filled with 4 bytes (unsigned 8-bit integers) with given values
107
107
```
108
-
3. If another `TypedArray` is supplied, it does the same: creates a typed array of the same length and copies values. Values are converted to the newtypein the process.
108
+
3. If another `TypedArray` is supplied, it does the same: creates a typed array of the same length and copies values. Values are converted to the newtypein the process, if needed.
109
109
```js run
110
110
let arr16 = new Uint16Array([1, 1000]);
111
111
*!*
112
112
let arr8 = new Uint8Array(arr16);
113
113
*/!*
114
114
alert( arr8[0] ); // 1
115
-
alert( arr8[1] ); // 232 (tried to copy 1000, but can't fit 1000 into 8 bits)
115
+
alert( arr8[1] ); // 232, tried to copy 1000, but can't fit 1000 into 8 bits (explanations below)
116
116
```
117
117
118
118
4. For a numeric argument `length`-- creates the typed array to contain that many elements. Its byte length will be `length` multiplied by the number of bytes in a single item `TypedArray.BYTES_PER_ELEMENT`:
@@ -212,7 +212,7 @@ These methods allow us to copy typed arrays, mix them, create new arrays from ex
212
212
[DataView](mdn:/JavaScript/Reference/Global_Objects/DataView) is a special super-flexible "untyped" view over `ArrayBuffer`. It allows to access the data on any offset in any format.
213
213
214
214
- For typed arrays, the constructor dictates what the format is. The whole array is supposed to be uniform. The i-th number is `arr[i]`.
215
-
- With `DataView` we access the data with methods like `.getUint8(i)` or `.gteUint16(i)`. We choose the format at method call time instead of the construction time.
215
+
- With `DataView` we access the data with methods like `.getUint8(i)` or `.getUint16(i)`. We choose the format at method call time instead of the construction time.
216
216
217
217
The syntax:
218
218
@@ -227,24 +227,21 @@ new DataView(buffer, [byteOffset], [byteLength])
227
227
For instance, here we extract numbers in different formats from the same buffer:
228
228
229
229
```js run
230
+
// binary array of 4 bytes, all have the maximal value 255
230
231
let buffer = new Uint8Array([255, 255, 255, 255]).buffer;
231
232
232
233
let dataView = new DataView(buffer);
233
234
234
235
// get 8-bit number at offset 0
235
236
alert( dataView.getUint8(0) ); // 255
236
237
237
-
<<<<<<< HEAD
238
-
// now get 16-bit number at offset 0, that's 2 bytes, both with max value
239
-
=======
240
238
// now get 16-bit number at offset 0, it consists of 2 bytes, together interpreted as 65535
dataView.setUint32(0, 0); // set 4-byte number to zero
244
+
dataView.setUint32(0, 0); // set 4-byte number to zero, thus setting all bytes to 0
248
245
```
249
246
250
247
`DataView` is great when we store mixed-format data in the same buffer. For example, when we store a sequence of pairs (16-bit integer, 32-bit float), `DataView` allows to access them easily.
@@ -256,20 +253,19 @@ dataView.setUint32(0, 0); // set 4-byte number to zero
256
253
To do almost any operation on `ArrayBuffer`, we need a view.
257
254
258
255
- It can be a `TypedArray`:
259
-
- `Uint8Array`, `Uint16Array`, `Uint32Array` -- for integer numbers of 8, 16 and 32 bits.
256
+
- `Uint8Array`, `Uint16Array`, `Uint32Array` -- for unsigned integers of 8, 16, and 32 bits.
260
257
- `Uint8ClampedArray` -- for 8-bit integers, "clamps" them on assignment.
261
258
- `Int8Array`, `Int16Array`, `Int32Array` -- for signed integer numbers (can be negative).
262
259
- `Float32Array`, `Float64Array` -- for signed floating-point numbers of 32 and 64 bits.
263
260
- Or a `DataView` -- the view that uses methods to specify a format, e.g. `getUint8(offset)`.
264
261
265
262
In most cases we create and operate directly on typed arrays, leaving `ArrayBuffer` under cover, as a "common discriminator". We can access it as `.buffer` and make another view if needed.
266
263
267
-
There are also two additional terms:
264
+
There are also two additional terms, that are used in descriptions of methods that operate on binary data:
268
265
- `ArrayBufferView` is an umbrella term for all these kinds of views.
269
266
- `BufferSource` is an umbrella term for `ArrayBuffer` or `ArrayBufferView`.
270
267
271
-
These are used in descriptions of methods that operate on binary data. `BufferSource` is one of the most common teerms, as it means "any kind of binary data" -- an `ArrayBuffer` or a view over it.
272
-
268
+
We'll see these terms in the next chapters. `BufferSource` is one of the most common terms, as it means "any kind of binary data" -- an `ArrayBuffer` or a view over it.
0 commit comments