From 47c86e27e1ddc822279c10b4123634aee774d938 Mon Sep 17 00:00:00 2001 From: purusah Date: Sun, 2 Jan 2022 15:37:26 +0200 Subject: [PATCH 01/10] P1 --- .../01-arraybuffer-binary-arrays/article.md | 68 +++++++++---------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index 95c18dda9..e876dea35 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -1,70 +1,70 @@ -# ArrayBuffer, binary arrays +# ArrayBuffer, бінарні масиви -In web-development we meet binary data mostly while dealing with files (create, upload, download). Another typical use case is image processing. +У веб-розробці ми маємо справу з бінарними даними переважно при роботі з файлами (створення, вивантаження та завантаження). Іншим частим випадком є обробка зображень. -That's all possible in JavaScript, and binary operations are high-performant. +Все це є можливим в JavaScript, ба більше, бінарні операції ще й високопродуктивні. -Although, there's a bit of confusion, because there are many classes. To name a few: -- `ArrayBuffer`, `Uint8Array`, `DataView`, `Blob`, `File`, etc. +Хоча й велика кількість різних класів може спантеличити. Деякі з них: +- `ArrayBuffer`, `Uint8Array`, `DataView`, `Blob`, `File` тощо. -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. +Бінарні дані в JavaScript реалізовано не так, як це переважно роблять в інших мовах програмування. Але якщо трошки розібратися, все виявиться досить простим. -**The basic binary object is `ArrayBuffer` -- a reference to a fixed-length contiguous memory area.** +**Базовим об’єктом для роботи з бінарними даними є `ArrayBuffer` -- посилання на неперервну область пам’яті фіксованої довжини.** -We create it like this: +Масив створюється наступним чином: ```js run -let buffer = new ArrayBuffer(16); // create a buffer of length 16 +let buffer = new ArrayBuffer(16); // створити буфер з довжиною 16 alert(buffer.byteLength); // 16 ``` -This allocates a contiguous memory area of 16 bytes and pre-fills it with zeroes. +Це виділяє неперервну область пам’яті з довжиною 16 байт та заповнює нулями. -```warn header="`ArrayBuffer` is not an array of something" -Let's eliminate a possible source of confusion. `ArrayBuffer` has nothing in common with `Array`: -- It has a fixed length, we can't increase or decrease it. -- It takes exactly that much space in the memory. -- To access individual bytes, another "view" object is needed, not `buffer[index]`. +```warn header="`ArrayBuffer` не є масивом" +Позбудьмося можливого джерела непорозумінь. `ArrayBuffer` не має нічого спільного з `Array`: +- Він має фіксовану довжину, що не може бути збільшена чи зменшена. +- Він займає саме стільки місця, скільки виділено при створенні. +- Для доступу до окремих байтів нам знадобиться окремий об’єкт представлення, `buffer[index]` не спрацює. ``` -`ArrayBuffer` is a memory area. What's stored in it? It has no clue. Just a raw sequence of bytes. +`ArrayBuffer` - область пам’яті. Що там зберігається? Інформації про це немає. Просто послідовність байтів. -**To manipulate an `ArrayBuffer`, we need to use a "view" object.** +**Для роботи з `ArrayBuffer` нам потрібен спеціальний об’єкт "представлення".** -A view object does not store anything on it's own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`. +Власне об’єкт представлення не зберігає ніяких даних. Це "вікно", що надає певну інтерпретацію "сирих" байтів всередині `ArrayBuffer`. -For instance: +Наприклад: -- **`Uint8Array`** -- treats each byte in `ArrayBuffer` as a separate number, with possible values from 0 to 255 (a byte is 8-bit, so it can hold only that much). Such value is called a "8-bit unsigned integer". -- **`Uint16Array`** -- treats every 2 bytes as an integer, with possible values from 0 to 65535. That's called a "16-bit unsigned integer". -- **`Uint32Array`** -- treats every 4 bytes as an integer, with possible values from 0 to 4294967295. That's called a "32-bit unsigned integer". -- **`Float64Array`** -- treats every 8 bytes as a floating point number with possible values from 5.0x10-324 to 1.8x10308. +- **`Uint8Array`** -- представляє кожен байт в `ArrayBuffer` окремим число зі областю значень від 0 до 255 (байт складається з 8 біт, тому тільки такі значення можливі). Такі значення називаються "8-бітові беззнакові цілі числа". +- **`Uint16Array`** -- представляє кожні 2 байти цілим числом з областю значень від 0 до 65535. Має назву "16-бітові беззнакові цілі числа". +- **`Uint32Array`** -- представляє кожні 4 байти цілим числом з областю значень від 0 до 4294967295. Має назву "32-бітові беззнакові цілі числа". +- **`Float64Array`** -- представляє кожні 8 байт числом з плаваючою комою з областю значень від 5.0x10-324 до 1.8x10308. -So, the binary data in an `ArrayBuffer` of 16 bytes can be interpreted as 16 "tiny numbers", or 8 bigger numbers (2 bytes each), or 4 even bigger (4 bytes each), or 2 floating-point values with high precision (8 bytes each). +Отже, бінарні дані в 16 байтному `ArrayBuffer` можна представити як 16 "коротких чисел" або 8 більших чисел (2 байти кожне), або 4 ще більших (4 байти кожне), або 2 числа з плаваючою комою високої точності (8 байти кожне). ![](arraybuffer-views.svg) -`ArrayBuffer` is the core object, the root of everything, the raw binary data. +`ArrayBuffer` - головний об’єкт представлення даних, проста послідовність байтів. -But if we're going to write into it, or iterate over it, basically for almost any operation – we must use a view, e.g: +Якщо нам знадобиться щось туди записати, перебрати їх або для будь-якої іншої операції - нам знадобиться об’єкт представлення: ```js run -let buffer = new ArrayBuffer(16); // create a buffer of length 16 +let buffer = new ArrayBuffer(16); // створення буферу з довжиною 16 *!* -let view = new Uint32Array(buffer); // treat buffer as a sequence of 32-bit integers +let view = new Uint32Array(buffer); // представлення буферу послідовністю 32-бітових цілих чисел -alert(Uint32Array.BYTES_PER_ELEMENT); // 4 bytes per integer +alert(Uint32Array.BYTES_PER_ELEMENT); // 4 байти на кожне число */!* -alert(view.length); // 4, it stores that many integers -alert(view.byteLength); // 16, the size in bytes +alert(view.length); // 4, стільки чисел вміщає буфер +alert(view.byteLength); // 16, розмір в байтах -// let's write a value +// запишімо туди значення view[0] = 123456; -// iterate over values +// перебрати всі значення for(let num of view) { - alert(num); // 123456, then 0, 0, 0 (4 values total) + alert(num); // 123456, потім 0, 0, 0 (всього 4 значення) } ``` From a069e3e15f93637043c8ee4af010ece831134118 Mon Sep 17 00:00:00 2001 From: purusah Date: Sun, 2 Jan 2022 16:33:47 +0200 Subject: [PATCH 02/10] P2 --- .../01-arraybuffer-binary-arrays/article.md | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index e876dea35..780bf7387 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -71,17 +71,17 @@ for(let num of view) { ## TypedArray -The common term for all these views (`Uint8Array`, `Uint32Array`, etc) is [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). They share the same set of methods and properities. +Спільним терміном для опису об’єктів представлень (`Uint8Array`, `Uint32Array` тощо) є [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). Вони мають однаковий набір методів та властивостей. -Please note, there's no constructor called `TypedArray`, it's just a common "umbrella" term to represent one of views over `ArrayBuffer`: `Int8Array`, `Uint8Array` and so on, the full list will soon follow. +Зверніть увагу, не існує конструктору з іменем `TypedArray`, це просто термін, що використовується для опису представлень `ArrayBuffer`: `Int8Array`, `Uint8Array` і так далі. -When you see something like `new TypedArray`, it means any of `new Int8Array`, `new Uint8Array`, etc. +Коли ви бачите щось на кшталт `new TypedArray` - це означає будь-що з `new Int8Array`, `new Uint8Array` тощо. -Typed arrays behave like regular arrays: have indexes and are iterable. +Типізовані масиви поводять себе як звичайні масиви: мають індекси та можуть перебиратися. -A typed array constructor (be it `Int8Array` or `Float64Array`, doesn't matter) behaves differently depending on argument types. +Конструктори типізованих масивів (`Int8Array` чи `Float64Array`, це неважливо) поводять себе по-різному в залежності від типу аргументів. -There are 5 variants of arguments: +Існує 5 варіантів сигнатур конструктору: ```js new TypedArray(buffer, [byteOffset], [length]); @@ -91,65 +91,65 @@ new TypedArray(length); new TypedArray(); ``` -1. If an `ArrayBuffer` argument is supplied, the view is created over it. We used that syntax already. +1. Якщо передається аргумент типу`ArrayBuffer`, то об’єкт представлення створюється для нього. Ми вже використовувати такий синтаксис. - Optionally we can provide `byteOffset` to start from (0 by default) and the `length` (till the end of the buffer by default), then the view will cover only a part of the `buffer`. + Необов’язкові аргументи: `byteOffset` вибору зміщення від початку (типове значення 0) та `length` (типове значення відповідає кінцю) - дозволяють працювати з частиною даних з `buffer`. -2. If an `Array`, or any array-like object is given, it creates a typed array of the same length and copies the content. +2. Якщо передати `Array` чи будь-який об’єкт схожий на масив - це створить типізований масив такої ж довжини і з копією вмісту. - We can use it to pre-fill the array with the data: + Ми можемо використовувати це для заповнення масиву даними: ```js run *!* let arr = new Uint8Array([0, 1, 2, 3]); */!* - alert( arr.length ); // 4, created binary array of the same length - alert( arr[1] ); // 1, filled with 4 bytes (unsigned 8-bit integers) with given values + alert( arr.length ); // 4, створюється бінарний масив такої ж довжини + alert( arr[1] ); // 1, складається з 4 байтів (8-бітові беззнакові цілі числа) із заданими значеннями ``` -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 new type in the process, if needed. +3. Якщо передано інший `TypedArray` - це спрацює таким же чином: буде створено новий типізований масив такої ж довжини та копією значень. Значення конвертуються в новий тип в процесі, якщо необхідно. ```js run let arr16 = new Uint16Array([1, 1000]); *!* let arr8 = new Uint8Array(arr16); */!* alert( arr8[0] ); // 1 - alert( arr8[1] ); // 232, tried to copy 1000, but can't fit 1000 into 8 bits (explanations below) + alert( arr8[1] ); // 232, спроба скопіювати 1000, але 8 біт не можуть вмістити число 1000 (пояснення нижче) ``` -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`: +4. Для числових аргументів `length` -- створить типізований масив з відповідним числом елементів. Його довжиною в байтах буде `length` помноженим на кількість байтів в одному елементі `TypedArray.BYTES_PER_ELEMENT`: ```js run - let arr = new Uint16Array(4); // create typed array for 4 integers - alert( Uint16Array.BYTES_PER_ELEMENT ); // 2 bytes per integer - alert( arr.byteLength ); // 8 (size in bytes) + let arr = new Uint16Array(4); // створить типізований масив для 4 цілих чисел + alert( Uint16Array.BYTES_PER_ELEMENT ); // 2 байт на число + alert( arr.byteLength ); // 8 (розмір в байтах) ``` -5. Without arguments, creates an zero-length typed array. +5. Без аргументів буде створено типізований масив нульової довжини. -We can create a `TypedArray` directly, without mentioning `ArrayBuffer`. But a view cannot exist without an underlying `ArrayBuffer`, so gets created automatically in all these cases except the first one (when provided). +`TypedArray` можна створити безпосередньо, без використання `ArrayBuffer`. Але об’єкт представлення не може існувати без базового `ArrayBuffer`, тому його буде створено автоматично в усіх випадках окрім першого (коли `ArrayBuffer` передано безпосередньо). -To access the underlying `ArrayBuffer`, there are following properties in `TypedArray`: -- `buffer` -- references the `ArrayBuffer`. -- `byteLength` -- the length of the `ArrayBuffer`. +Для доступу до внутрішнього `ArrayBuffer` `TypedArray` має властивості: +- `buffer` -- посилання на `ArrayBuffer`. +- `byteLength` -- довжина `ArrayBuffer`. -So, we can always move from one view to another: +Отже, ми можемо завжди змінити об’єкт представлення на інший: ```js let arr8 = new Uint8Array([0, 1, 2, 3]); -// another view on the same data +// інше представлення однакових даних let arr16 = new Uint16Array(arr8.buffer); ``` -Here's the list of typed arrays: +Список типізованих масивів: -- `Uint8Array`, `Uint16Array`, `Uint32Array` -- for integer numbers of 8, 16 and 32 bits. - - `Uint8ClampedArray` -- for 8-bit integers, "clamps" them on assignment (see below). -- `Int8Array`, `Int16Array`, `Int32Array` -- for signed integer numbers (can be negative). -- `Float32Array`, `Float64Array` -- for signed floating-point numbers of 32 and 64 bits. +- `Uint8Array`, `Uint16Array`, `Uint32Array` -- для цілих беззнакових чисел з довжиною 8, 16 або 32 біт. + - `Uint8ClampedArray` -- для 8-бітових беззнакових цілих чисел, що "обрізаються" при присвоєнні (пояснення нижче). +- `Int8Array`, `Int16Array`, `Int32Array` -- для цілих чисел зі знаком (можуть мати від'ємні значення). +- `Float32Array`, `Float64Array` -- для чисел з плаваючою комою зі знаком довжиною 32 або 64 біти. -```warn header="No `int8` or similar single-valued types" -Please note, despite of the names like `Int8Array`, there's no single-value type like `int`, or `int8` in JavaScript. +```warn header="Не існує `int8` або подібних типів для значень" +Зверніть увагу, попри імена на кшталт `Int8Array`, в JavaScript не існує значень з типами `int` або `int8`. -That's logical, as `Int8Array` is not an array of these individual values, but rather a view on `ArrayBuffer`. +Це логічно, оскільки, `Int8Array` не є масивом окремих значення, а всього-на-всього представленням `ArrayBuffer`. ``` ### Out-of-bounds behavior From 4ac168777d6489b6b9506d612f745f684dba4945 Mon Sep 17 00:00:00 2001 From: purusah Date: Sun, 2 Jan 2022 16:52:37 +0200 Subject: [PATCH 03/10] P3 --- .../01-arraybuffer-binary-arrays/article.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index 780bf7387..bc4b9d696 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -152,31 +152,31 @@ let arr16 = new Uint16Array(arr8.buffer); Це логічно, оскільки, `Int8Array` не є масивом окремих значення, а всього-на-всього представленням `ArrayBuffer`. ``` -### Out-of-bounds behavior +### Вихід за область допустимих значень -What if we attempt to write an out-of-bounds value into a typed array? There will be no error. But extra bits are cut-off. +Що буде у випадку спроби записати значення, що не вміщується в область допустимих значень? Це не призведе до помилки, але зайві біти значення буде відкинуто. -For instance, let's try to put 256 into `Uint8Array`. In binary form, 256 is `100000000` (9 bits), but `Uint8Array` only provides 8 bits per value, that makes the available range from 0 to 255. +Наприклад, запишімо 256 в `Uint8Array`. В бінарному форматі 256 це `100000000` (9 біт), але `Uint8Array` дозволяє тільки 8 біт для одного значення, тобто значення від 0 до 255. -For bigger numbers, only the rightmost (less significant) 8 bits are stored, and the rest is cut off: +Для більших чисел тільки праві (найменш важливі) 8 біт буде збережено, а решту буде обрізано. ![](8bit-integer-256.svg) -So we'll get zero. +Тому ми отримає нуль. -For 257, the binary form is `100000001` (9 bits), the rightmost 8 get stored, so we'll have `1` in the array: +257 в бінарному форматі буде `100000001` (9 біт), праві 8 біт буде збережено, тому значення в масиві буде 1: ![](8bit-integer-257.svg) -In other words, the number modulo 28 is saved. +Інакше кажучи, буде збережено тільки число за модулем 28. -Here's the demo: +Приклад: ```js run let uint8array = new Uint8Array(16); let num = 256; -alert(num.toString(2)); // 100000000 (binary representation) +alert(num.toString(2)); // 100000000 (бінарна форма) uint8array[0] = 256; uint8array[1] = 257; @@ -185,7 +185,7 @@ alert(uint8array[0]); // 0 alert(uint8array[1]); // 1 ``` -`Uint8ClampedArray` is special in this aspect, its behavior is different. It saves 255 for any number that is greater than 255, and 0 for any negative number. That behavior is useful for image processing. +`Uint8ClampedArray` є особливим в цьому сенсі, його поведінка відрізняється. Буде збережено 255 для усіх чисел, що більше ніж 255 та 0 для від’ємних чисел. Така поведінка буде в нагоді при обробці зображень. ## TypedArray methods From e37acd797246a6e77b7301529591fafcabece0bc Mon Sep 17 00:00:00 2001 From: purusah Date: Sun, 2 Jan 2022 17:07:15 +0200 Subject: [PATCH 04/10] P4 --- .../01-arraybuffer-binary-arrays/article.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index bc4b9d696..4dbf1d960 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -187,23 +187,23 @@ alert(uint8array[1]); // 1 `Uint8ClampedArray` є особливим в цьому сенсі, його поведінка відрізняється. Буде збережено 255 для усіх чисел, що більше ніж 255 та 0 для від’ємних чисел. Така поведінка буде в нагоді при обробці зображень. -## TypedArray methods +## Методи TypedArray -`TypedArray` has regular `Array` methods, with notable exceptions. +Методи `TypedArray` в цілому збігаються з методами звичайного `Array`, але є деякі відмінності. -We can iterate, `map`, `slice`, `find`, `reduce` etc. +Ми можемо його перебирати `map`, `slice`, `find`, `reduce` тощо. -There are few things we can't do though: +Але є речі, що ми не можемо зробити: -- No `splice` -- we can't "delete" a value, because typed arrays are views on a buffer, and these are fixed, contiguous areas of memory. All we can do is to assign a zero. -- No `concat` method. +- Немає методу `splice` -- ми не можемо "видалити" значення. В основі типізованих масивів лежить буфер, що є неперервною областю пам’яті фіксованої довжини, а типізовані масиви є всього-на-всього їх представленням. Ми можемо тільки присвоїти нульове значення. +- Немає методу `concat`. -There are two additional methods: +Існує 2 додаткових методи: -- `arr.set(fromArr, [offset])` copies all elements from `fromArr` to the `arr`, starting at position `offset` (0 by default). -- `arr.subarray([begin, end])` creates a new view of the same type from `begin` to `end` (exclusive). That's similar to `slice` method (that's also supported), but doesn't copy anything -- just creates a new view, to operate on the given piece of data. +- `arr.set(fromArr, [offset])` копіює всі елементи, що починаються з `offset` (типово з 0) з `fromArr` в `arr`. +- `arr.subarray([begin, end])` створює нове представлення такого ж типу починаючи з `begin` до `end` (не включно). Це схоже на метод `slice` (також підтримується), але значення не буде скопійовано -- тільки створюється нове представлення для роботи з тими самими даними. -These methods allow us to copy typed arrays, mix them, create new arrays from existing ones, and so on. +Ці методи дають змогу копіювати типізовані масиви, змішувати їх, створювати нові ґрунтуючись на попередніх і так далі. From 2dd907b0dcd98711505cc568b6c0cef249e1558a Mon Sep 17 00:00:00 2001 From: purusah Date: Fri, 7 Jan 2022 00:01:39 +0200 Subject: [PATCH 05/10] P5 --- .../01-arraybuffer-binary-arrays/article.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index 4dbf1d960..a5a646986 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -209,42 +209,42 @@ alert(uint8array[1]); // 1 ## DataView -[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. +[DataView](mdn:/JavaScript/Reference/Global_Objects/DataView) спеціальне надзвичайно гнучке "не типізоване" представлення `ArrayBuffer`. Це дозволяє отримати доступ до даних з будь-яким зміщенням та в будь-якому форматі. -- 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]`. -- 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. +- Для типізованого масиву конструктор визначає формат даних. Увесь масив повинен складатися зі значень одного типу. Доступ до i-го елементу виконується за допомогою `arr[i]`. +- З `DataView` доступ до даних відбувається за допомогою методів на кшталт `.getUint8(i)` чи `.getUint16(i)`. Тепер можна обирати формат даних під час виклику методу, а не конструктора. -The syntax: +Синтаксис: ```js new DataView(buffer, [byteOffset], [byteLength]) ``` -- **`buffer`** -- the underlying `ArrayBuffer`. Unlike typed arrays, `DataView` doesn't create a buffer on its own. We need to have it ready. -- **`byteOffset`** -- the starting byte position of the view (by default 0). -- **`byteLength`** -- the byte length of the view (by default till the end of `buffer`). +- **`buffer`** -- базовий `ArrayBuffer`. На відміну від типізованих масивів `DataView` не створює новий буфер. Його потрібно створити завчасно. +- **`byteOffset`** -- початкова позиція представлення (типове значення 0). +- **`byteLength`** -- довжина представлення в байтах (типове значення дорівнює кінцю `buffer`). -For instance, here we extract numbers in different formats from the same buffer: +На приклад, тут ми дістаємо числа в різному форматі з одного й того ж самого буферу: ```js run -// binary array of 4 bytes, all have the maximal value 255 +// бінарний масив довжиною 4 байти, всі числа мають максимальне значення 255 let buffer = new Uint8Array([255, 255, 255, 255]).buffer; let dataView = new DataView(buffer); -// get 8-bit number at offset 0 +// отримати 8-бітове число за зміщенням 0 alert( dataView.getUint8(0) ); // 255 -// now get 16-bit number at offset 0, it consists of 2 bytes, together interpreted as 65535 -alert( dataView.getUint16(0) ); // 65535 (biggest 16-bit unsigned int) +// тепер отримати 16-бітове число за зміщенням 0, воно складається з 2 байт, що разом представляється як 65535 +alert( dataView.getUint16(0) ); // 65535 (найбільше 16-бітове беззнакове ціле число) -// get 32-bit number at offset 0 -alert( dataView.getUint32(0) ); // 4294967295 (biggest 32-bit unsigned int) +// отримати 32-бітове число за зміщенням 0 +alert( dataView.getUint32(0) ); // 4294967295 (найбільше 32-бітове беззнакове ціле число) -dataView.setUint32(0, 0); // set 4-byte number to zero, thus setting all bytes to 0 +dataView.setUint32(0, 0); // встановити 4-байтове число в нуль, тобто запити всі байти як 0 ``` -`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. +`DataView` зручне для використання, коли ми зберігаємо дані різного формату в одному буфері. На приклад, коли ми зберігаємо послідовність пар (16-бітове ціле число, 32-бітове число з плаваючою комою), `DataView` дозволяє легко отримати до них доступ. ## Summary From ed6ac4e0b9c44c08020d320537cbc086e4c739fd Mon Sep 17 00:00:00 2001 From: purusah Date: Fri, 7 Jan 2022 23:02:40 +0200 Subject: [PATCH 06/10] P6 --- .../01-arraybuffer-binary-arrays/article.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index a5a646986..a0a617277 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -143,7 +143,7 @@ let arr16 = new Uint16Array(arr8.buffer); - `Uint8Array`, `Uint16Array`, `Uint32Array` -- для цілих беззнакових чисел з довжиною 8, 16 або 32 біт. - `Uint8ClampedArray` -- для 8-бітових беззнакових цілих чисел, що "обрізаються" при присвоєнні (пояснення нижче). -- `Int8Array`, `Int16Array`, `Int32Array` -- для цілих чисел зі знаком (можуть мати від'ємні значення). +- `Int8Array`, `Int16Array`, `Int32Array` -- для цілих чисел зі знаком (можуть мати від’ємні значення). - `Float32Array`, `Float64Array` -- для чисел з плаваючою комою зі знаком довжиною 32 або 64 біти. ```warn header="Не існує `int8` або подібних типів для значень" @@ -246,27 +246,27 @@ dataView.setUint32(0, 0); // встановити 4-байтове число в `DataView` зручне для використання, коли ми зберігаємо дані різного формату в одному буфері. На приклад, коли ми зберігаємо послідовність пар (16-бітове ціле число, 32-бітове число з плаваючою комою), `DataView` дозволяє легко отримати до них доступ. -## Summary +## Підсумки -`ArrayBuffer` is the core object, a reference to the fixed-length contiguous memory area. +`ArrayBuffer` - головний об’єкт, що є посиланням на неперервну область пам’яті фіксованої довжини. -To do almost any operation on `ArrayBuffer`, we need a view. +Для більшості операцій з `ArrayBuffer` нам потрібне представлення. -- It can be a `TypedArray`: - - `Uint8Array`, `Uint16Array`, `Uint32Array` -- for unsigned integers of 8, 16, and 32 bits. - - `Uint8ClampedArray` -- for 8-bit integers, "clamps" them on assignment. - - `Int8Array`, `Int16Array`, `Int32Array` -- for signed integer numbers (can be negative). - - `Float32Array`, `Float64Array` -- for signed floating-point numbers of 32 and 64 bits. -- Or a `DataView` -- the view that uses methods to specify a format, e.g. `getUint8(offset)`. +- Це може бути `TypedArray`: + - `Uint8Array`, `Uint16Array`, `Uint32Array` -- для беззнакових цілих чисел довжиною 8, 16 та 32 біти. + - `Uint8ClampedArray` -- для 8-бітових цілих чисел, при присвоєнні відбувається "обрізання" значень. + - `Int8Array`, `Int16Array`, `Int32Array` -- для цілих чисел зі знаком (можуть бути від’ємними). + - `Float32Array`, `Float64Array` -- для чисел з плаваючою комою зі знаком довжиною 32 та 64 біти. +- Чи `DataView` -- представлення, яке дозволяє вибрати формат даних за допомогою методів як `getUint8(offset)`. -In most cases we create and operate directly on typed arrays, leaving `ArrayBuffer` under cover, as a "common denominator". We can access it as `.buffer` and make another view if needed. +В більшості випадків ми маємо справу безпосередньо з типізованими масивами, `ArrayBuffer` залишається прихованим. Якщо необхідно, можливо отримати доступ до буферу за допомогою `.buffer` та створити нове представлення. -There are also two additional terms, that are used in descriptions of methods that operate on binary data: -- `ArrayBufferView` is an umbrella term for all these kinds of views. -- `BufferSource` is an umbrella term for `ArrayBuffer` or `ArrayBufferView`. +Також для опису методів, що дозволяють працювати з бінарними даними існує два додаткових терміни: +- `ArrayBufferView` - загальна назва представлень всіх типів. +- `BufferSource` - термін, що означає `ArrayBuffer` або `ArrayBufferView`. -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. +Ці терміни також будуть використані в наступній частині. `BufferSource` дуже використовується для позначення "будь-яких бінарних даних" -- `ArrayBuffer` чи його представлення. -Here's a cheatsheet: +Ось підказка: ![](arraybuffer-view-buffersource.svg) From 853a6d797d5e452b8daa5a72f748fea3b8117a46 Mon Sep 17 00:00:00 2001 From: purusah Date: Fri, 7 Jan 2022 23:10:42 +0200 Subject: [PATCH 07/10] P7 --- .../01-concat/_js.view/solution.js | 6 +++--- .../01-concat/_js.view/source.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/solution.js b/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/solution.js index 2f51384ef..e5f1d3e26 100644 --- a/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/solution.js +++ b/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/solution.js @@ -1,13 +1,13 @@ function concat(arrays) { - // sum of individual array lengths + // сума довжин всіх масивів let totalLength = arrays.reduce((acc, value) => acc + value.length, 0); if (!arrays.length) return null; let result = new Uint8Array(totalLength); - // for each array - copy it over result - // next array is copied right after the previous one + // копіюємо кожний масив в result + // наступний масив буде скопійовано одразу після попереднього let length = 0; for(let array of arrays) { result.set(array, length); diff --git a/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/source.js b/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/source.js index e88b1a537..fabb4738e 100644 --- a/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/source.js +++ b/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/source.js @@ -1,5 +1,5 @@ function concat(arrays) { - // ...your code... + // ...ваш код... } let chunks = [ From 927310e105b8553de7a78294f50aab12912a2be3 Mon Sep 17 00:00:00 2001 From: purusah Date: Fri, 7 Jan 2022 23:30:15 +0200 Subject: [PATCH 08/10] P8 --- .../01-arraybuffer-binary-arrays/article.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index a0a617277..3bcc07551 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -7,7 +7,7 @@ Хоча й велика кількість різних класів може спантеличити. Деякі з них: - `ArrayBuffer`, `Uint8Array`, `DataView`, `Blob`, `File` тощо. -Бінарні дані в JavaScript реалізовано не так, як це переважно роблять в інших мовах програмування. Але якщо трошки розібратися, все виявиться досить простим. +Бінарні дані в JavaScript реалізовано не так, як це переважно роблять в інших мовах програмування. Але, якщо трошки розібратися, все виявиться досить простим. **Базовим об’єктом для роботи з бінарними даними є `ArrayBuffer` -- посилання на неперервну область пам’яті фіксованої довжини.** @@ -34,7 +34,7 @@ alert(buffer.byteLength); // 16 Наприклад: -- **`Uint8Array`** -- представляє кожен байт в `ArrayBuffer` окремим число зі областю значень від 0 до 255 (байт складається з 8 біт, тому тільки такі значення можливі). Такі значення називаються "8-бітові беззнакові цілі числа". +- **`Uint8Array`** -- представляє кожен байт в `ArrayBuffer` окремим числом із областю значень від 0 до 255 (байт складається з 8 біт, тому тільки такі значення можливі). Такі числа називаються "8-бітові беззнакові цілі числа". - **`Uint16Array`** -- представляє кожні 2 байти цілим числом з областю значень від 0 до 65535. Має назву "16-бітові беззнакові цілі числа". - **`Uint32Array`** -- представляє кожні 4 байти цілим числом з областю значень від 0 до 4294967295. Має назву "32-бітові беззнакові цілі числа". - **`Float64Array`** -- представляє кожні 8 байт числом з плаваючою комою з областю значень від 5.0x10-324 до 1.8x10308. @@ -43,9 +43,9 @@ alert(buffer.byteLength); // 16 ![](arraybuffer-views.svg) -`ArrayBuffer` - головний об’єкт представлення даних, проста послідовність байтів. +`ArrayBuffer` - головний об’єкт представлення даних, що є простою послідовністю байтів. -Якщо нам знадобиться щось туди записати, перебрати їх або для будь-якої іншої операції - нам знадобиться об’єкт представлення: +Якщо нам знадобиться щось туди записати, перебрати їх або для будь-якої іншої операції -- нам знадобиться об’єкт представлення: ```js run let buffer = new ArrayBuffer(16); // створення буферу з довжиною 16 @@ -62,7 +62,7 @@ alert(view.byteLength); // 16, розмір в байтах // запишімо туди значення view[0] = 123456; -// перебрати всі значення +// переберемо всі значення for(let num of view) { alert(num); // 123456, потім 0, 0, 0 (всього 4 значення) } @@ -71,11 +71,11 @@ for(let num of view) { ## TypedArray -Спільним терміном для опису об’єктів представлень (`Uint8Array`, `Uint32Array` тощо) є [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). Вони мають однаковий набір методів та властивостей. +Спільним терміном для опису об’єктів представлень (`Uint8Array`, `Uint32Array` тощо) є [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). Всі вони мають однаковий набір методів та властивостей. Зверніть увагу, не існує конструктору з іменем `TypedArray`, це просто термін, що використовується для опису представлень `ArrayBuffer`: `Int8Array`, `Uint8Array` і так далі. -Коли ви бачите щось на кшталт `new TypedArray` - це означає будь-що з `new Int8Array`, `new Uint8Array` тощо. +Коли ви бачите щось на кшталт `new TypedArray` -- це означає будь-що з `new Int8Array`, `new Uint8Array` тощо. Типізовані масиви поводять себе як звичайні масиви: мають індекси та можуть перебиратися. @@ -115,7 +115,7 @@ new TypedArray(); alert( arr8[1] ); // 232, спроба скопіювати 1000, але 8 біт не можуть вмістити число 1000 (пояснення нижче) ``` -4. Для числових аргументів `length` -- створить типізований масив з відповідним числом елементів. Його довжиною в байтах буде `length` помноженим на кількість байтів в одному елементі `TypedArray.BYTES_PER_ELEMENT`: +4. Для числових аргументів `length` -- створить типізований масив із відповідним числом елементів. Його довжиною в байтах буде `length` помноженим на кількість байтів в одному елементі `TypedArray.BYTES_PER_ELEMENT`: ```js run let arr = new Uint16Array(4); // створить типізований масив для 4 цілих чисел alert( Uint16Array.BYTES_PER_ELEMENT ); // 2 байт на число @@ -259,13 +259,13 @@ dataView.setUint32(0, 0); // встановити 4-байтове число в - `Float32Array`, `Float64Array` -- для чисел з плаваючою комою зі знаком довжиною 32 та 64 біти. - Чи `DataView` -- представлення, яке дозволяє вибрати формат даних за допомогою методів як `getUint8(offset)`. -В більшості випадків ми маємо справу безпосередньо з типізованими масивами, `ArrayBuffer` залишається прихованим. Якщо необхідно, можливо отримати доступ до буферу за допомогою `.buffer` та створити нове представлення. +В більшості випадків ми маємо справу безпосередньо з типізованими масивами, а `ArrayBuffer` залишається прихованим. Якщо необхідно, можливо отримати доступ до буферу за допомогою `.buffer` та створити нове представлення. Також для опису методів, що дозволяють працювати з бінарними даними існує два додаткових терміни: - `ArrayBufferView` - загальна назва представлень всіх типів. - `BufferSource` - термін, що означає `ArrayBuffer` або `ArrayBufferView`. -Ці терміни також будуть використані в наступній частині. `BufferSource` дуже використовується для позначення "будь-яких бінарних даних" -- `ArrayBuffer` чи його представлення. +Ці терміни також будуть використані в наступній частині. `BufferSource` часто використовується для позначення "будь-яких бінарних даних" -- `ArrayBuffer` чи його представлення. Ось підказка: From 811015957b3b53eb74c6ee1908b48264d1d46b77 Mon Sep 17 00:00:00 2001 From: purusah Date: Sun, 9 Jan 2022 14:20:59 +0200 Subject: [PATCH 09/10] P9 --- .../01-arraybuffer-binary-arrays/article.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index 3bcc07551..e4806aba6 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -7,7 +7,7 @@ Хоча й велика кількість різних класів може спантеличити. Деякі з них: - `ArrayBuffer`, `Uint8Array`, `DataView`, `Blob`, `File` тощо. -Бінарні дані в JavaScript реалізовано не так, як це переважно роблять в інших мовах програмування. Але, якщо трошки розібратися, все виявиться досить простим. +Бінарні дані в JavaScript реалізовано не так, як в інших мовах програмування. Але, якщо трошки розібратися, все виявиться досить простим. **Базовим об’єктом для роботи з бінарними даними є `ArrayBuffer` -- посилання на неперервну область пам’яті фіксованої довжини.** @@ -26,7 +26,7 @@ alert(buffer.byteLength); // 16 - Для доступу до окремих байтів нам знадобиться окремий об’єкт представлення, `buffer[index]` не спрацює. ``` -`ArrayBuffer` - область пам’яті. Що там зберігається? Інформації про це немає. Просто послідовність байтів. +`ArrayBuffer` - область пам’яті. Що там зберігається? Просто послідовність байтів, що можна інтерпретувати як нам потрібно. **Для роботи з `ArrayBuffer` нам потрібен спеціальний об’єкт "представлення".** @@ -56,10 +56,10 @@ let view = new Uint32Array(buffer); // представлення буферу alert(Uint32Array.BYTES_PER_ELEMENT); // 4 байти на кожне число */!* -alert(view.length); // 4, стільки чисел вміщає буфер +alert(view.length); // 4, стільки чисел вміщує буфер alert(view.byteLength); // 16, розмір в байтах -// запишімо туди значення +// запишемо туди значення view[0] = 123456; // переберемо всі значення @@ -91,7 +91,7 @@ new TypedArray(length); new TypedArray(); ``` -1. Якщо передається аргумент типу`ArrayBuffer`, то об’єкт представлення створюється для нього. Ми вже використовувати такий синтаксис. +1. Якщо передається аргумент типу `ArrayBuffer`, то об’єкт представлення створюється для нього. Ми вже використовувати такий синтаксис. Необов’язкові аргументи: `byteOffset` вибору зміщення від початку (типове значення 0) та `length` (типове значення відповідає кінцю) - дозволяють працювати з частиною даних з `buffer`. @@ -115,7 +115,7 @@ new TypedArray(); alert( arr8[1] ); // 232, спроба скопіювати 1000, але 8 біт не можуть вмістити число 1000 (пояснення нижче) ``` -4. Для числових аргументів `length` -- створить типізований масив із відповідним числом елементів. Його довжиною в байтах буде `length` помноженим на кількість байтів в одному елементі `TypedArray.BYTES_PER_ELEMENT`: +4. З числовим аргументом `length` буде створено типізований масив із відповідним числом елементів. Його довжиною в байтах буде `length` помноженим на кількість байтів в одному елементі `TypedArray.BYTES_PER_ELEMENT`: ```js run let arr = new Uint16Array(4); // створить типізований масив для 4 цілих чисел alert( Uint16Array.BYTES_PER_ELEMENT ); // 2 байт на число @@ -156,9 +156,9 @@ let arr16 = new Uint16Array(arr8.buffer); Що буде у випадку спроби записати значення, що не вміщується в область допустимих значень? Це не призведе до помилки, але зайві біти значення буде відкинуто. -Наприклад, запишімо 256 в `Uint8Array`. В бінарному форматі 256 це `100000000` (9 біт), але `Uint8Array` дозволяє тільки 8 біт для одного значення, тобто значення від 0 до 255. +Наприклад, запишемо 256 в `Uint8Array`. В бінарному форматі 256 це `100000000` (9 біт), але `Uint8Array` дозволяє тільки 8 біт для одного значення, тобто значення від 0 до 255. -Для більших чисел тільки праві (найменш важливі) 8 біт буде збережено, а решту буде обрізано. +Для більших чисел тільки праві (найменш значущі) 8 біт буде збережено, а решту буде обрізано. ![](8bit-integer-256.svg) @@ -191,7 +191,7 @@ alert(uint8array[1]); // 1 Методи `TypedArray` в цілому збігаються з методами звичайного `Array`, але є деякі відмінності. -Ми можемо його перебирати `map`, `slice`, `find`, `reduce` тощо. +Ми можемо його перебирати з використанням `map`, `slice`, `find`, `reduce` тощо. Але є речі, що ми не можемо зробити: @@ -201,7 +201,7 @@ alert(uint8array[1]); // 1 Існує 2 додаткових методи: - `arr.set(fromArr, [offset])` копіює всі елементи, що починаються з `offset` (типово з 0) з `fromArr` в `arr`. -- `arr.subarray([begin, end])` створює нове представлення такого ж типу починаючи з `begin` до `end` (не включно). Це схоже на метод `slice` (також підтримується), але значення не буде скопійовано -- тільки створюється нове представлення для роботи з тими самими даними. +- `arr.subarray([begin, end])` створює нове представлення такого ж типу починаючи з `begin` до `end` (не включно). Це схоже на метод `slice` (що також підтримується), але значення не буде скопійовано -- тільки створюється нове представлення для роботи з тими самими даними. Ці методи дають змогу копіювати типізовані масиви, змішувати їх, створювати нові ґрунтуючись на попередніх і так далі. @@ -224,7 +224,7 @@ new DataView(buffer, [byteOffset], [byteLength]) - **`byteOffset`** -- початкова позиція представлення (типове значення 0). - **`byteLength`** -- довжина представлення в байтах (типове значення дорівнює кінцю `buffer`). -На приклад, тут ми дістаємо числа в різному форматі з одного й того ж самого буферу: +Наприклад, тут ми дістаємо числа в різному форматі з одного й того ж самого буферу: ```js run // бінарний масив довжиною 4 байти, всі числа мають максимальне значення 255 @@ -244,7 +244,7 @@ alert( dataView.getUint32(0) ); // 4294967295 (найбільше 32-бітов dataView.setUint32(0, 0); // встановити 4-байтове число в нуль, тобто запити всі байти як 0 ``` -`DataView` зручне для використання, коли ми зберігаємо дані різного формату в одному буфері. На приклад, коли ми зберігаємо послідовність пар (16-бітове ціле число, 32-бітове число з плаваючою комою), `DataView` дозволяє легко отримати до них доступ. +`DataView` зручне для використання, коли ми зберігаємо дані різного формату в одному буфері. Наприклад, коли ми зберігаємо послідовність пар (16-бітове ціле число, 32-бітове число з плаваючою комою), `DataView` дозволяє легко отримати до них доступ. ## Підсумки @@ -259,7 +259,7 @@ dataView.setUint32(0, 0); // встановити 4-байтове число в - `Float32Array`, `Float64Array` -- для чисел з плаваючою комою зі знаком довжиною 32 та 64 біти. - Чи `DataView` -- представлення, яке дозволяє вибрати формат даних за допомогою методів як `getUint8(offset)`. -В більшості випадків ми маємо справу безпосередньо з типізованими масивами, а `ArrayBuffer` залишається прихованим. Якщо необхідно, можливо отримати доступ до буферу за допомогою `.buffer` та створити нове представлення. +У більшості випадків ми маємо справу безпосередньо з типізованими масивами, а `ArrayBuffer` залишається прихованим. Якщо необхідно, можливо отримати доступ до буферу за допомогою `.buffer` та створити нове представлення. Також для опису методів, що дозволяють працювати з бінарними даними існує два додаткових терміни: - `ArrayBufferView` - загальна назва представлень всіх типів. From fd7dde1759db4462930df0d4a32e9623c6d41efe Mon Sep 17 00:00:00 2001 From: Taras Date: Mon, 10 Jan 2022 21:12:57 +0200 Subject: [PATCH 10/10] Apply suggestions from code review --- 4-binary/01-arraybuffer-binary-arrays/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index e4806aba6..3150aefab 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -162,7 +162,7 @@ let arr16 = new Uint16Array(arr8.buffer); ![](8bit-integer-256.svg) -Тому ми отримає нуль. +Тому ми отримаємо нуль. 257 в бінарному форматі буде `100000001` (9 біт), праві 8 біт буде збережено, тому значення в масиві буде 1: