`DataView` i JavaScript

Denne artikkelen forklarer DataView i JavaScript.

Vi vil forklare detaljert den grunnleggende bruken av DataView og spesifikke eksempler på hvordan det brukes.

YouTube Video

DataView i JavaScript

DataView i JavaScript er et praktisk API for å manipulere data som er lagret i en buffer (ArrayBuffer) i forskjellige formater. Dette muliggjør fleksibel og effektiv lesing og skriving av binære data, og spiller en viktig rolle i nettverkskommunikasjon, filbehandling og samspill med WebAssembly.

Hva er DataView?

DataView gir et visningslag over et ArrayBuffer-objekt, slik at du kan lese og skrive forskjellige datatyper (som heltall, flyttall og tegn) fra hvilken som helst byteforskyvning. DataView ligner på TypedArray, men kjennetegnes ved muligheten til å spesifisere endianess og utføre detaljerte operasjoner på bytenivå.

Grunnleggende syntaks for 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 konstruktør som tar et ArrayBuffer som et argument. I dette eksemplet opprettes en 16-byte buffer, og DataView brukes til å få tilgang til denne bufferen. Ved å bruke DataView kan du spesifisere forskjellige byte-størrelser og endianess (big-endian eller little-endian) når du leser fra eller skriver til data lagret i en buffer.

Grunnleggende metoder for DataView

DataView tilbyr metoder for å lese og skrive verdier av ulike datatyper. De er hovedsakelig delt i get-metoder for å lese data og set-metoder for å skrive.

Hovedmetodene vises nedenfor.

Metoder for å lese verdier

• getInt8(byteOffset): Leser et 1-byte signert heltall på den angitte offseten.
• getUint8(byteOffset): Leser et 1-byte usignert heltall på den angitte offseten.
• getInt16(byteOffset, littleEndian): Leser et 2-byte signert heltall.
• getUint16(byteOffset, littleEndian): Leser et 2-byte usignert heltall.
• getInt32(byteOffset, littleEndian): Leser et 4-byte signert heltall.
• getUint32(byteOffset, littleEndian): Leser et 4-byte usignert heltall.
• getFloat32(byteOffset, littleEndian): Leser et 4-byte IEEE 754 flyttall.
• getFloat64(byteOffset, littleEndian): Leser et 8-byte IEEE 754 flyttall.

Metoder for å skrive verdier

• setInt8(byteOffset, value): Skriver et 1-byte signert heltall.
• setUint8(byteOffset, value): Skriver et 1-byte usignert heltall.
• setInt16(byteOffset, value, littleEndian): Skriver et 2-byte signert heltall.
• setUint16(byteOffset, value, littleEndian): Skriver et 2-byte usignert heltall.
• setInt32(byteOffset, value, littleEndian): Skriver et 4-byte signert heltall.
• setUint32(byteOffset, value, littleEndian): Skriver et 4-byte usignert heltall.
• setFloat32(byteOffset, value, littleEndian): Skriver et 4-byte IEEE 754 flyttall.
• setFloat64(byteOffset, value, littleEndian): Skriver et 8-byte IEEE 754 flyttall.

Ved å bruke disse metodene kan du fleksibelt lese og skrive data lagret i en ArrayBuffer.

Eksempel på bruk av DataView

La oss se på et eksempel på hvordan man manipulerer binære data ved hjelp av DataView.

Eksempel 1: Skrive og lese et 16-biters heltall

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 dette eksemplet brukes setInt16-metoden til å skrive et 16-biters signert heltall i little-endian-format, og getInt16-metoden leser den verdien i little-endian.

Eksempel 2: Skrive og lese et flyttall

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 dette eksemplet brukes setFloat64-metoden til å skrive et 64-biters flyttall i big-endian format, og den verdien leses med getFloat64.

Om endianness

La oss se et eksempel på hvordan man leser og skriver verdier i både big-endian og little-endian format ved hjelp 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 lagres data som standard i big-endian (byte-rekkefølge fra mest signifikante til minst signifikante byte), men little-endian kan spesifiseres valgfritt. Little-endian snur byte-rekkefølgen (fra minst signifikante til mest signifikante byte). Det er viktig å håndtere data-endianness riktig fordi ulike systemer og nettverksprotokoller bruker forskjellige endianness-formater.

Forskjell fra TypedArray

La oss se på forskjellene mellom DataView og 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 gir også bufferoperasjoner basert på ArrayBuffer, men TypedArray er egnet for å operere på sammenhengende data med fast lengde og format for hver datatype. På den annen side kan DataView fleksibelt operere på forskjellige datatyper og gir også kontroll over endianness. Derfor er DataView egnet for analysering og oppbygging av komplekse binære data.

Sammendrag

DataView er et kraftig API for håndtering av binærdata i JavaScript. Du kan direkte få tilgang til ArrayBuffer for å lese og skrive data, med hensyn til heltall, flyttall og forskjeller i endianness. Det er nyttig i situasjoner som nettverkskommunikasjon og filformatparsing, og er uunnværlig når kontroll på bytenivå er nødvendig. Ved å bruke det sammen med TypedArray, kan du utføre mer effektiv manipulering av binære data.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video