From 3460283133eaa741d1eb4d67082c842e186b117b Mon Sep 17 00:00:00 2001 From: longo-andrea Date: Sun, 11 Apr 2021 12:06:33 +0200 Subject: [PATCH 1/2] ArrayBuffer, binary arrays --- .../01-concat/_js.view/solution.js | 6 +- .../01-concat/_js.view/source.js | 2 +- .../01-concat/task.md | 4 +- .../01-arraybuffer-binary-arrays/article.md | 234 +++++++++--------- 4 files changed, 123 insertions(+), 123 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..a95c52d09 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 + // somma delle lunghezze dei singoli array 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 + // ogni array, lo copiamo in result + // il prossimo array viene copiato accanto a quello precedente 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..bfbf07e2a 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... + // ...il vostro codice... } let chunks = [ diff --git a/4-binary/01-arraybuffer-binary-arrays/01-concat/task.md b/4-binary/01-arraybuffer-binary-arrays/01-concat/task.md index 6710104b2..fedcb76d1 100644 --- a/4-binary/01-arraybuffer-binary-arrays/01-concat/task.md +++ b/4-binary/01-arraybuffer-binary-arrays/01-concat/task.md @@ -1,4 +1,4 @@ -# Concatenate typed arrays +# Concatenate TypedArrays -Given an array of `Uint8Array`, write a function `concat(arrays)` that returns a concatenation of them into a single array. +Dato un array di `Uint8Array`, scrivete una funzione `concat(arrays)` che ritorna una loro concatenazione in un singolo array. diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index accd3c505..b9f46a4f7 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -1,87 +1,87 @@ -# ArrayBuffer, binary arrays +# ArrayBuffer, array binari -In web-development we meet binary data mostly while dealing with files (create, upload, download). Another typical use case is image processing. +Nello sviluppo web incontriamo dati di tipo binario principalmente quando lavoriamo con i file (creazione, upload o download). Un altro tipico caso d'uso è l'elaborazione di immagini. -That's all possible in JavaScript, and binary operations are high-performant. +Sono tutte cose possibili con JavaScript, e le operazioni binarie ottimizzano le prestazioni. -Although, there's a bit of confusion, because there are many classes. To name a few: +Sebbene ci sia un pò di confusione, poiché esistono molte classi. Per citarne alcune: - `ArrayBuffer`, `Uint8Array`, `DataView`, `Blob`, `File`, etc. -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. +I dati binari in JavaScript sono implementati in maniera non standard, se paragona ad altri linguaggi. Ma se riusciamo a riorganizzare le idee, tutto diventa piuttosto semplice. -**The basic binary object is `ArrayBuffer` -- a reference to a fixed-length contiguous memory area.** +**L'oggetto binario di base è `ArrayBuffer`, un riferimento ad un'area di memoria contigua di lunghezza fissata.** -We create it like this: +Lo possiamo creare in questo modo: ```js run -let buffer = new ArrayBuffer(16); // create a buffer of length 16 +let buffer = new ArrayBuffer(16); // creiamo un buffer di lunghezza 16 alert(buffer.byteLength); // 16 ``` -This allocates a contiguous memory area of 16 bytes and pre-fills it with zeroes. +Questo alloca un'area di memoria contigua di 16 byte, e la popola con degli zeri. -```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` non sono degli array di "qualcosa"" +Eliminiamo subito una possibile fonte di confusione. `ArrayBuffer` non hanno nulla in comune con gli `Array`: +- Hanno dimensione prefissata, non possiamo aumentarla o diminuirla. +- Occupano esattamente quello spazio in memoria. +- Per accedere a uno specifico byte, è richiesto un ulteriore oggetto, `buffer[index]` non funzionerebbe. ``` -`ArrayBuffer` is a memory area. What's stored in it? It has no clue. Just a raw sequence of bytes. +`ArrayBuffer` rappresenta un'area di memoria. Cosa vi è memorizzano? Non ne ha assolutamente idea. Semplicemente una sequenza di byte. -**To manipulate an `ArrayBuffer`, we need to use a "view" object.** +**Per manipolare un `ArrayBuffer`, dobbiamo utilizzare un oggetto "visualizzatore".** -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`. +Un oggetto visualizzatore non memorizza nulla. Funge da "lente di ingrandimento" che fornisce un interpretazione dei byte memorizzati in un `ArrayBuffer`. -For instance: +Ad esempio: -- **`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`**: tratta ogni byte contenuto nell'`ArrayBuffer` come un numero separato, che può assumere valori compresi tra 0 e 255 (un byte è composta da 8-bit, quindi quell'intervallo è il massimo rappresentabile). Questo valore viene definito un "interno a 8-bit senza segno". +- **`Uint16Array`**: interpreta 2 byte come un intero, possono quindi assumere valori nell'intervallo da 0 a 65535. Questo viene definito un "intero a 16-bit senza segno". +- **`Uint32Array`**: interpreta 4 byte come un intero, possono quindi assumere valori nell'intervallo da 0 a 4294967295. Questo viene definito un "intero a 32-bit senza segno". +- **`Float64Array`**: interpreta 8 byte come un numero in virgola mobile, possono quindi assumere valori nell'intervallo da 5.0x10-324 a 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). +Quindi, i dati binari contenuti in un `ArrayBuffer` di 16 byte possono essere interpretati con 16 "piccoli numeri", oppure 8 "grandi numeri" (2 byte ciascuno), oppure 4 "numeri ancora più grandi" (4 byte ciascuno), oppure 2 valori in virgola mobile ad alta precisione (8 byte ciascuno). ![](arraybuffer-views.svg) -`ArrayBuffer` is the core object, the root of everything, the raw binary data. +`ArrayBuffer` è l'oggetto principale, la radice di tutto, quello che contiene i dati binari. -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: +Ma nel momento in cui andiamo a scriverci qualcosa, o iteriamo su di esso, e per praticamente qualsiasi altra operazione, dobbiamo utilizzare un visualizzatore, e.g: ```js run -let buffer = new ArrayBuffer(16); // create a buffer of length 16 +let buffer = new ArrayBuffer(16); // crea un buffer di lunghezza 16 *!* -let view = new Uint32Array(buffer); // treat buffer as a sequence of 32-bit integers +let view = new Uint32Array(buffer); // interpreta un buffer come una sequenza di interi a 32 bit -alert(Uint32Array.BYTES_PER_ELEMENT); // 4 bytes per integer +alert(Uint32Array.BYTES_PER_ELEMENT); // intero a 4 byte */!* -alert(view.length); // 4, it stores that many integers -alert(view.byteLength); // 16, the size in bytes +alert(view.length); // 4, numero di interi memorizzati +alert(view.byteLength); // 16, la dimensione in byte -// let's write a value +// scriviamo un valore view[0] = 123456; -// iterate over values +// iteriamo sui valori for(let num of view) { - alert(num); // 123456, then 0, 0, 0 (4 values total) + alert(num); // 123456, poi 0, 0, 0 (4 valori in totale) } ``` ## 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. +Il termine comune utilizzato per i visualizzatori (`Uint8Array`, `Uint32Array`, etc) è [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). Questi condividono lo stesso insieme di metodi e proprietà. -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. +Da notare, non esiste alcun costruttore per il tipo `TypedArray`, è semplicemente un "ombrello" comune per rappresentare un visualizzatore per `ArrayBuffer`: `Int8Array`, `Uint8Array` e così via, vedremo la lista completa a breve. -When you see something like `new TypedArray`, it means any of `new Int8Array`, `new Uint8Array`, etc. +Quando vedete qualcosa come `new TypedArray`, equivale a: `new Int8Array`, `new Uint8Array`, etc. -Typed arrays behave like regular arrays: have indexes and are iterable. +I TypedArray si comportano come gli array regolari: sono indicizzabili ed iterabili. -A typed array constructor (be it `Int8Array` or `Float64Array`, doesn't matter) behaves differently depending on argument types. +Un costruttore di TypedArray (che sia `Int8Array` o `Float64Array`, non ha importanza) si comporta diversamente in base al tipo degli argomenti. -There are 5 variants of arguments: +Esistono 5 varianti degli argomenti: ```js new TypedArray(buffer, [byteOffset], [length]); @@ -91,92 +91,92 @@ new TypedArray(length); new TypedArray(); ``` -1. If an `ArrayBuffer` argument is supplied, the view is created over it. We used that syntax already. +1. Se viene fornito un `ArrayBuffer` come argomento, il visualizzatore verrà creato su questo. Abbiamo già usato questa sintassi. - 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`. + Come parametri opzionali, possiamo fornire il `byteOffset` da cui iniziare (0 di default) e la `length` (fino alla fine del buffer di default), in questo modo il visualizzatore coprirà solamente una parte del `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. Se viene fornito un `Array`, o un oggetto simil-array, viene creato un TypedArray delle stessa lunghezza e ne viene copiato il contenuto. - We can use it to pre-fill the array with the data: + Possiamo utilizzarlo per pre-popolare l'array con dei dati: ```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, creazione di un array binario delle stessa lunghezza + alert( arr[1] ); // 1, popolato con 4 byte (intero a 8-bit senza segno) con i valori forniti ``` -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. Se viene fornito un ulteriore `TypedArray`, accadrà la stessa cosa: verrà creato un TypedArray delle stessa lunghezza e ne verrà copiato il contenuto. I valori verranno convertiti al nuovo tipo, se necessario. ```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, prova a copiare 1000, ma non può essere rappresentato con 8 bit (vedi la spiegazione sotto) ``` -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. Per una argomento numerico `length`, verrà creato un TypedArray in grado di contenere quel numero di elementi. La sua dimensione in byte sarà `length` moltiplicato per il numero di byte per singolo elemento `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); // crea un TypedArray per 4 interi + alert( Uint16Array.BYTES_PER_ELEMENT ); // 2 byte per intero + alert( arr.byteLength ); // 8 (dimensione in byte) ``` -5. Without arguments, creates an zero-length typed array. +5. Senza argomenti, crea un TypedArray di lunghezza zero. -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). +Possiamo creare un `TypedArray` direttamente, senza menzionare `ArrayBuffer`. Ma un visualizzatore non può esistere senza un relativo `ArrayBuffer`, quindi questo verrà creato automaticamente in tutti i casi, ad eccezione del primo (in cui viene fornito). -To access the `ArrayBuffer`, there are properties: -- `arr.buffer` -- references the `ArrayBuffer`. -- `arr.byteLength` -- the length of the `ArrayBuffer`. +Per accedere all'`ArrayBuffer`, abbiamo a disposizione le seguenti proprietà: +- `arr.buffer`, che fa riferimento a `ArrayBuffer`. +- `arr.byteLength`, la lunghezza dell'`ArrayBuffer`. -So, we can always move from one view to another: +Quindi possiamo sempre spostarci da un visualizzatore ad un altro: ```js let arr8 = new Uint8Array([0, 1, 2, 3]); -// another view on the same data +// un altro visualizzatore sugli stessi dati let arr16 = new Uint16Array(arr8.buffer); ``` -Here's the list of typed arrays: +Qui vediamo la lista dei TypedArray: -- `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`: per numeri interi a 8, 16 e 32 bit. + - `Uint8ClampedArray`: per interi a 8-bit, "bloccati" in fase di assegnazione (vedi sotto). +- `Int8Array`, `Int16Array`, `Int32Array`: per numeri interi con segno (possono essere negativi). +- `Float32Array`, `Float64Array`: per numeri in virgola mobile con segno, a 32 e 64 bit. -```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="Non esistono `int8`, o simili, tipi a singolo valore" +Da notare che, nonostante i nomi, come `Int8Array`, non esiste alcun tipo a singolo valore come `int`, o `int8` in JavaScript. -That's logical, as `Int8Array` is not an array of these individual values, but rather a view on `ArrayBuffer`. +E' abbastanza logico, poiché `Int8Array` non è un array per questi valori, ma piuttosto un visualizzatore su un `ArrayBuffer`. ``` -### Out-of-bounds behavior +### Comportamento per valori fuori dai limiti -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. +Cosa accade se proviamo a scrivere un valore fuori dai limiti in un TypedArray? Non verrà generata alcuna eccezione. Ma i bit di troppo verranno ignorati. -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. +Ad esempio, proviamo a scrivere 256 in `Uint8Array`. Nella forma binaria, 256 equivale a `100000000` (9 bit), ma `Uint8Array` fornisce solamente 8 bit per valore, questo fa si che l'intervallo di valori disponibili vada da 0 a 255. -For bigger numbers, only the rightmost (less significant) 8 bits are stored, and the rest is cut off: +Per numeri più grandi, vengono memorizzati solamente gli 8 bit più a destra (meno significativi), gli altri verranno ignorati: ![](8bit-integer-256.svg) -So we'll get zero. +Quindi otterremo uno zero. -For 257, the binary form is `100000001` (9 bits), the rightmost 8 get stored, so we'll have `1` in the array: +Nel caso di 257, la forma binaria è `100000001` (9 bit), vengono memorizzati gli 8 bit più a destra, quindi il valore memorizzato nell'array sarà `1`: ![](8bit-integer-257.svg) -In other words, the number modulo 28 is saved. +In altre parole, viene memorizzato il numero modulo 28. -Here's the demo: +Qui vediamo un esempio: ```js run let uint8array = new Uint8Array(16); let num = 256; -alert(num.toString(2)); // 100000000 (binary representation) +alert(num.toString(2)); // 100000000 (rappresentazione binaria) uint8array[0] = 256; uint8array[1] = 257; @@ -185,88 +185,88 @@ 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` è speciale in questo aspetto, il suo comportamento è differente. Memorizza 255 per qualsiasi numero maggiore di 255, e 0 per qualsiasi valore negativo. Questo comportamento risulta essere molto utile nell'elaborazione di immagini. -## TypedArray methods +## Metodi dei TypedArray -`TypedArray` has regular `Array` methods, with notable exceptions. +`TypedArray` possiede gli stessi metodi di `Array`, con un paio di eccezioni. -We can iterate, `map`, `slice`, `find`, `reduce` etc. +Possiamo iterare su di essi con `map`, `slice`, `find`, `reduce` etc. -There are few things we can't do though: +Ci sono però un pò di cose che non possiamo fare: -- 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. +- Non possiamo utilizzare `splice`. Non possiamo "eliminare" un valore, poiché i TypedArray sono dei visualizzatori su un buffer, e questi sono di dimensioni fissata, su un'area contigua di memoria. Tutto ciò che possiamo fare è assegnargli zero. +- Non esiste il metodo `concat`. -There are two additional methods: +Abbiamo a disposizione due metodi aggiuntivi: -- `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])` copia tutti gli elementi da `fromArr` a `arr`, iniziando dalla posizione `offset` (0 di default). +- `arr.subarray([begin, end])` crea un nuovo visualizzatore dello stesso tipo, a partire da `begin` fino a `end` (esclusi). Questo comportamento è molto simile al metodo `slice` (il quale è supportato), ma non copia nulla, crea semplicemente un nuovo visualizzatore, utile per operare in uno specifico pezzo di dati. -These methods allow us to copy typed arrays, mix them, create new arrays from existing ones, and so on. +Questi metodi ci consentono di copiare i TypedArray, mescolarli, creare nuovi array partendo da quelli già esistenti, e così via. ## 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) è uno speciale, super flessibile visualizzatore "non tipizzato" su `ArrayBuffer`. Consente di accedere ai dati in qualsiasi offset in qualsiasi formato. -- 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. +- Nel caso di TypedArray, il costruttore ne definiva il formato. Si supponeva che l'intero array fosse uniforme. L'i-esimo numero è `arr[i]`. +- Nel caos id `DataView` accediamo ai dati con metodi come `.getUint8(i)` o `.getUint16(i)`. Scegliamo il formato al momento della lettura, piuttosto che al momento della costruzione. -The syntax: +La sintassi: ```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`**, l'`ArrayBuffer` di riferimento. A differenza dei TypedArray, `DataView` non crea un suo buffer. Dobbiamo averne già uno pronto. +- **`byteOffset`**, la posizione del byte di partenza del visualizzatore (do default 0). +- **`byteLength`**, la lunghezza in byte del visualizzatore (di default fino alla fine di `buffer`). -For instance, here we extract numbers in different formats from the same buffer: +Ad esempio, qui estraiamo numeri in formati differenti dallo stesso buffer: ```js run -// binary array of 4 bytes, all have the maximal value 255 +// array binario di 4 byte, tutti con valore massimo 255 let buffer = new Uint8Array([255, 255, 255, 255]).buffer; let dataView = new DataView(buffer); -// get 8-bit number at offset 0 +// prendiamo un numero a 8 bit all'offset 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) +// ora prendiamo un numero a 16 bit all'offset 0, consiste di 2 byte, insieme vengono interpretati come 65535 +alert( dataView.getUint16(0) ); // 65535 (il più grande intero a 16-bit senza segno) -// get 32-bit number at offset 0 -alert( dataView.getUint32(0) ); // 4294967295 (biggest 32-bit unsigned int) +// prendiamo un numero a 32-bit all'offset 0 +alert( dataView.getUint32(0) ); // 4294967295 (il più grande intero a 32-bit senza segno) -dataView.setUint32(0, 0); // set 4-byte number to zero, thus setting all bytes to 0 +dataView.setUint32(0, 0); // imposta un numero a 4 byte a zero, questo imposta tutti i byte a 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` è ottimo quando memorizziamo dati in formati misti nello stesso buffer. Ad esempio, quando memorizziamo una sequenza di coppie (intero a 16-bit, 32-bit in virgola mobile), `DataView` ci consente di accedervi in maniera semplice. -## Summary +## Riepilogo -`ArrayBuffer` is the core object, a reference to the fixed-length contiguous memory area. +`ArrayBuffer` è l'oggetto principale, un riferimento un'area di memoria contigua di lunghezza fissata. -To do almost any operation on `ArrayBuffer`, we need a view. +Per eseguire qualsiasi operazioni su un `ArrayBuffer`, abbiamo bisogno di un visualizzatore. -- 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)`. +- Questo può essere un `TypedArray`: + - `Uint8Array`, `Uint16Array`, `Uint32Array`, per interi senza segno a 8, 16, e 32 bit. + - `Uint8ClampedArray`, per interi a 8 bit, fissati in fase di assegnazione. + - `Int8Array`, `Int16Array`, `Int32Array`, per numeri interi con segno (possono essere negativi). + - `Float32Array`, `Float64Array`, per numeri in virgola mobile con segno di 32 e 64 bit. +- Oppure un `DataView`, un visualizzatore che utilizza che utilizza i metodi per specificare un formato, e.g. `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. +Nella maggior parte dei casi creiamo ed operiamo direttamente sui TypedArray, tenendo `ArrayBuffer` sotto copertura, come "denominatore comune". Possiamo accedervi come `.buffer` e creare un altro visualizzatore, se necessario. -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`. +Ci sono due ulteriori termini, utilizzati nei descrittori dei metodi che operano sui dati binari: +- `ArrayBufferView` è un "termine ombrello" che fa riferimento a tutti questi tipi di visualizzatori. +- `BufferSource` è un "termine ombrello" per `ArrayBuffer` o `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. +Vederemo questi termini nei prossimi capitoli. `BufferSource` è uno dei termini più comuni, poiché equivale a "qualsiasi tipo di dato binario"; un `ArrayBuffer` o un suo visualizzatore. -Here's a cheatsheet: +Eccovi un cheatsheet: ![](arraybuffer-view-buffersource.svg) From c5259d0e4fc36b77f8689fb7827e85605cf667f1 Mon Sep 17 00:00:00 2001 From: Andrea <45577511+longo-andrea@users.noreply.github.com> Date: Thu, 22 Apr 2021 21:59:15 +0200 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Simone Pasini <66781510+pasor1@users.noreply.github.com> --- .../01-concat/_js.view/solution.js | 2 +- .../01-arraybuffer-binary-arrays/article.md | 28 +++++++++---------- 2 files changed, 15 insertions(+), 15 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 a95c52d09..e5d4a9547 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 @@ -7,7 +7,7 @@ function concat(arrays) { let result = new Uint8Array(totalLength); // ogni array, lo copiamo in result - // il prossimo array viene copiato accanto a quello precedente + // l'array successivo viene copiato subito dopo quello precedente let length = 0; for(let array of arrays) { result.set(array, length); diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index b9f46a4f7..a67585b27 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -4,12 +4,12 @@ Nello sviluppo web incontriamo dati di tipo binario principalmente quando lavori Sono tutte cose possibili con JavaScript, e le operazioni binarie ottimizzano le prestazioni. -Sebbene ci sia un pò di confusione, poiché esistono molte classi. Per citarne alcune: +Sebbene ci sia un po' di confusione, poiché esistono molte classi. Per citarne alcune: - `ArrayBuffer`, `Uint8Array`, `DataView`, `Blob`, `File`, etc. -I dati binari in JavaScript sono implementati in maniera non standard, se paragona ad altri linguaggi. Ma se riusciamo a riorganizzare le idee, tutto diventa piuttosto semplice. +I dati binari in JavaScript sono implementati in maniera non standard, rispetto ad altri linguaggi. Ma se riusciamo a riorganizzare le idee, tutto diventa piuttosto semplice. -**L'oggetto binario di base è `ArrayBuffer`, un riferimento ad un'area di memoria contigua di lunghezza fissata.** +**L'oggetto binario di base è `ArrayBuffer`, un riferimento ad un'area di memoria contigua di lunghezza fissa.** Lo possiamo creare in questo modo: ```js run @@ -19,11 +19,11 @@ alert(buffer.byteLength); // 16 Questo alloca un'area di memoria contigua di 16 byte, e la popola con degli zeri. -```warn header="`ArrayBuffer` non sono degli array di "qualcosa"" -Eliminiamo subito una possibile fonte di confusione. `ArrayBuffer` non hanno nulla in comune con gli `Array`: -- Hanno dimensione prefissata, non possiamo aumentarla o diminuirla. -- Occupano esattamente quello spazio in memoria. -- Per accedere a uno specifico byte, è richiesto un ulteriore oggetto, `buffer[index]` non funzionerebbe. +```warn header="`ArrayBuffer` è un array di "qualcosa"" +Eliminiamo subito una possibile fonte di confusione. `ArrayBuffer` non ha nulla in comune con `Array`: +- Ha una dimensione prefissata, non possiamo aumentarla o diminuirla. +- Occupa esattamente quello spazio in memoria. +- Per accedere a uno specifico byte, è richiesto un ulteriore oggetto. `buffer[index]` non funzionerebbe. ``` `ArrayBuffer` rappresenta un'area di memoria. Cosa vi è memorizzano? Non ne ha assolutamente idea. Semplicemente una sequenza di byte. @@ -130,11 +130,11 @@ Per accedere all'`ArrayBuffer`, abbiamo a disposizione le seguenti proprietà: - `arr.buffer`, che fa riferimento a `ArrayBuffer`. - `arr.byteLength`, la lunghezza dell'`ArrayBuffer`. -Quindi possiamo sempre spostarci da un visualizzatore ad un altro: +Quindi possiamo sempre cambiare da un visualizzatore ad un altro: ```js let arr8 = new Uint8Array([0, 1, 2, 3]); -// un altro visualizzatore sugli stessi dati +// un altro visualizzatore per gli stessi dati let arr16 = new Uint16Array(arr8.buffer); ``` @@ -185,7 +185,7 @@ alert(uint8array[0]); // 0 alert(uint8array[1]); // 1 ``` -`Uint8ClampedArray` è speciale in questo aspetto, il suo comportamento è differente. Memorizza 255 per qualsiasi numero maggiore di 255, e 0 per qualsiasi valore negativo. Questo comportamento risulta essere molto utile nell'elaborazione di immagini. +`Uint8ClampedArray` è speciale sotto questo aspetto, il suo comportamento è differente. Memorizza 255 per qualsiasi numero maggiore di 255, e 0 per qualsiasi valore negativo. Questo comportamento risulta essere molto utile nell'elaborazione di immagini. ## Metodi dei TypedArray @@ -212,7 +212,7 @@ Questi metodi ci consentono di copiare i TypedArray, mescolarli, creare nuovi ar [DataView](mdn:/JavaScript/Reference/Global_Objects/DataView) è uno speciale, super flessibile visualizzatore "non tipizzato" su `ArrayBuffer`. Consente di accedere ai dati in qualsiasi offset in qualsiasi formato. - Nel caso di TypedArray, il costruttore ne definiva il formato. Si supponeva che l'intero array fosse uniforme. L'i-esimo numero è `arr[i]`. -- Nel caos id `DataView` accediamo ai dati con metodi come `.getUint8(i)` o `.getUint16(i)`. Scegliamo il formato al momento della lettura, piuttosto che al momento della costruzione. +- Con `DataView` accediamo ai dati con metodi come `.getUint8(i)` o `.getUint16(i)`. Scegliamo il formato al momento della lettura, piuttosto che al momento della costruzione. La sintassi: @@ -221,7 +221,7 @@ new DataView(buffer, [byteOffset], [byteLength]) ``` - **`buffer`**, l'`ArrayBuffer` di riferimento. A differenza dei TypedArray, `DataView` non crea un suo buffer. Dobbiamo averne già uno pronto. -- **`byteOffset`**, la posizione del byte di partenza del visualizzatore (do default 0). +- **`byteOffset`**, la posizione del byte di partenza del visualizzatore (di default 0). - **`byteLength`**, la lunghezza in byte del visualizzatore (di default fino alla fine di `buffer`). Ad esempio, qui estraiamo numeri in formati differenti dallo stesso buffer: @@ -248,7 +248,7 @@ dataView.setUint32(0, 0); // imposta un numero a 4 byte a zero, questo imposta t ## Riepilogo -`ArrayBuffer` è l'oggetto principale, un riferimento un'area di memoria contigua di lunghezza fissata. +`ArrayBuffer` è l'oggetto principale, un riferimento un'area di memoria contigua di lunghezza fissa. Per eseguire qualsiasi operazioni su un `ArrayBuffer`, abbiamo bisogno di un visualizzatore.