`DataView` i JavaScript

Den här artikeln förklarar DataView i JavaScript.

Vi kommer att förklara i detalj den grundläggande användningen av DataView och ge specifika exempel på dess användning.

YouTube Video

DataView i JavaScript

JavaScripts DataView är ett praktiskt API för att hantera data som lagras i en buffert (ArrayBuffer) i olika format. Detta möjliggör flexibel och effektiv läsning och skrivning av binärdata och spelar en viktig roll inom nätverkskommunikation, filbearbetning och interaktion med WebAssembly.

Vad är DataView?

DataView erbjuder ett visningslager ovanpå ett ArrayBuffer-objekt, som gör det möjligt att läsa och skriva olika datatyper (såsom heltal, flyttal och tecken) från valfri byteoffset. DataView liknar TypedArray, men utmärks av sin förmåga att specificera endianness och utföra detaljerade operationer på byte-nivå.

Grundläggande syntax för DataView

1let buffer = new ArrayBuffer(16);  // Create a 16-byte ArrayBuffer
2let view = new DataView(buffer);    // Manipulate the buffer with a DataView

DataView har en konstruktor som tar ett ArrayBuffer som ett argument. I det här exemplet skapas en 16-byte buffert, och DataView används för att få tillgång till denna buffert. Med DataView kan du specificera olika byte-storlekar och endianness (big-endian eller little-endian) vid läsning från eller skrivning till data lagrad i en buffert.

Grundläggande metoder för DataView

DataView erbjuder metoder för att läsa och skriva värden av olika datatyper. De delas huvudsakligen in i get-metoder för dataläsning och set-metoder för skrivning.

De huvudsakliga metoderna visas nedan.

Metoder för att läsa värden

• getInt8(byteOffset): Läser ett 1-byte signerat heltal vid den angivna offseten.
• getUint8(byteOffset): Läser ett 1-byte osignerat heltal vid den angivna offseten.
• getInt16(byteOffset, littleEndian): Läser ett 2-byte signerat heltal.
• getUint16(byteOffset, littleEndian): Läser ett 2-byte osignerat heltal.
• getInt32(byteOffset, littleEndian): Läser ett 4-byte signerat heltal.
• getUint32(byteOffset, littleEndian): Läser ett 4-byte osignerat heltal.
• getFloat32(byteOffset, littleEndian): Läser ett 4-byte IEEE 754 flyttal.
• getFloat64(byteOffset, littleEndian): Läser ett 8-bytes IEEE 754 flyttal.

Metoder för att skriva värden

• setInt8(byteOffset, value): Skriver ett 1-byte signerat heltal.
• setUint8(byteOffset, value): Skriver ett 1-byte osignerat heltal.
• setInt16(byteOffset, value, littleEndian): Skriver ett 2-byte signerat heltal.
• setUint16(byteOffset, value, littleEndian): Skriver ett 2-byte osignerat heltal.
• setInt32(byteOffset, value, littleEndian): Skriver ett 4-byte signerat heltal.
• setUint32(byteOffset, value, littleEndian): Skriver ett 4-byte osignerat heltal.
• setFloat32(byteOffset, value, littleEndian): Skriver ett 4-byte IEEE 754 flyttal.
• setFloat64(byteOffset, value, littleEndian): Skriver ett 8-byte IEEE 754 flyttal.

Genom att använda dessa metoder kan du flexibelt läsa och skriva data lagrad i en ArrayBuffer.

Exempel på användning av DataView

Låt oss titta på ett exempel på hur man manipulerar binär data med hjälp av DataView.

Exempel 1: Skriva och läsa ett 16-bitars heltal

1let buffer = new ArrayBuffer(4);  // Create a 4-byte buffer
2let view = new DataView(buffer);
3
4// Write a 2-byte integer value in little-endian format
5view.setInt16(0, 32767, true);  // byteOffset: 0, value: 32767, littleEndian: true
6
7// Read the data in little-endian format
8let value = view.getInt16(0, true);
9console.log(value);  // Output: 32767

• I detta exempel används metoden setInt16 för att skriva ett 16-bitars signerat heltal i little-endian-format, och metoden getInt16 läser värdet i little-endian.

Exempel 2: Skriva och läsa ett flyttal

1let buffer = new ArrayBuffer(8);  // Create an 8-byte buffer
2let view = new DataView(buffer);
3
4// Write an 8-byte floating-point number
5view.setFloat64(0, 3.14159, false);  // byteOffset: 0, value: 3.14159, bigEndian: false
6
7// Read the data in big-endian format
8let pi = view.getFloat64(0, false);
9console.log(pi);  // Output: 3.14159

• I detta exempel används metoden setFloat64 för att skriva ett 64-bitars flyttal i big-endian-format, och värdet läses med getFloat64.

Om endianness

Låt oss se ett exempel på att läsa och skriva värden i både big-endian och little-endian-format med hjälp av DataView.

 1// Example: Handling Endianness with DataView in TypeScript
 2// Create an ArrayBuffer of 4 bytes
 3const buffer = new ArrayBuffer(4);
 4const view = new DataView(buffer);
 5
 6// Store the same number (0x12345678) in both endian formats
 7// By default, DataView uses big-endian
 8view.setUint32(0, 0x12345678); // Big-endian
 9console.log("Big-endian (default):");
10console.log(buffer);
11
12// Overwrite the buffer with little-endian
13view.setUint32(0, 0x12345678, true); // Little-endian
14console.log("Little-endian:");
15console.log(buffer);
16
17// Read values back in both endian modes
18const bigEndianValue = view.getUint32(0); // Big-endian read
19const littleEndianValue = view.getUint32(0, true); // Little-endian read
20
21console.log("Read as Big-endian:", bigEndianValue.toString(16));
22console.log("Read as Little-endian:", littleEndianValue.toString(16));

I DataView-metoder lagras data i big-endian (byteordning från mest signifikanta till minst signifikanta byte) som standard, men little-endian kan anges som alternativ. Little-endian vänder byteordningen (från minst signifikanta till mest signifikanta byte). Det är viktigt att hantera data-endianness korrekt eftersom olika system och nätverksprotokoll använder olika endianness.

Skillnad från TypedArray

Låt oss se skillnaderna mellan DataView och TypedArray.

 1// Example: TypedArray vs DataView
 2
 3// Create a 8-byte buffer
 4const buffer = new ArrayBuffer(8);
 5
 6// --- Using TypedArray (Int32Array) ---
 7const int32View = new Int32Array(buffer);
 8int32View[0] = 42;
 9int32View[1] = 100;
10
11console.log("TypedArray (Int32Array):");
12console.log(int32View); // Int32Array [42, 100]
13
14// --- Using DataView ---
15const dataView = new DataView(buffer);
16
17// Write different types of data at arbitrary byte offsets
18dataView.setInt8(0, 65);         // 1 byte
19dataView.setUint16(1, 500, true); // 2 bytes, little-endian
20dataView.setFloat32(3, 3.14, true); // 4 bytes, little-endian
21
22console.log("\nDataView:");
23console.log("Int8 at 0:", dataView.getInt8(0));      // 65
24console.log("Uint16 at 1:", dataView.getUint16(1, true)); // 500
25console.log("Float32 at 3:", dataView.getFloat32(3, true)); // 3.14
26
27/*
28Output:
29TypedArray (Int32Array):
30Int32Array [42, 100]
31
32DataView:
33Int8 at 0: 65
34Uint16 at 1: 500
35Float32 at 3: 3.140000104904175
36*/

TypedArray tillhandahåller också buffertoperationer baserade på ArrayBuffer, men TypedArray är lämplig för att hantera sammanhängande data med fast längd och format för varje datatyp. Å andra sidan kan DataView flexibelt hantera olika datatyper och tillåter även kontroll över endianness. Därför är DataView lämplig för att tolka och konstruera komplex binärdata.

Sammanfattning

DataView är ett kraftfullt API för att hantera binär data i JavaScript. Du kan direkt komma åt ArrayBuffer för att läsa och skriva data med hänsyn till heltal, flyttal och skillnader i endianness. Det är användbart i situationer som nätverkskommunikation och filformatparsing, och är oumbärligt när byte-nivåkontroll krävs. Genom att använda det tillsammans med TypedArray kan du utföra mer effektiv binär datamanipulation.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video