`DataView` JavaScript'te

Bu makale, JavaScript'teki DataView'i açıklar.

DataView'in temel kullanımını ve belirli kullanım örneklerini detaylı bir şekilde açıklayacağız.

YouTube Video

DataView JavaScript'te

JavaScript'in DataView'i, bir buffer içinde (ArrayBuffer) saklanan verileri çeşitli formatlarda işlemek için kullanışlı bir API'dir. Bu, ikili verilerin esnek ve verimli bir şekilde okunmasını ve yazılmasını sağlar, ağ iletişimi, dosya işleme ve WebAssembly ile entegrasyonda önemli bir rol oynar.

DataView Nedir?

DataView, bir ArrayBuffer nesnesi üzerinde bir görünüm katmanı sağlar ve herhangi bir bayt ofsetinden farklı veri türlerini (tamsayılar, kayan nokta sayılar ve karakterler gibi) okumanıza ve yazmanıza olanak tanır. DataView, TypedArray ile benzerdir, ancak endianness (bayt sıralaması) belirtilmesine ve bayt seviyesinde ayrıntılı işlemler yapılmasına olanak tanımasıyla karakterizedir.

DataView'in Temel Sözdizimi

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

DataView, bir ArrayBuffer'ı argüman olarak alan bir yapıcıya sahiptir. Bu örnekte, 16 baytlık bir buffer oluşturulur ve DataView bu buffer'a erişmek için kullanılır. DataView kullanarak, bir buffer içinde saklanan veriyi okurken veya yazarken farklı bayt boyutlarını ve endianness'i (big-endian veya little-endian) belirtebilirsiniz.

DataView'in Temel Yöntemleri

DataView, çeşitli veri türlerindeki değerleri okumak ve yazmak için yöntemler sağlar. Bunlar ağırlıklı olarak veri okuma için get yöntemlerine ve veri yazma için set yöntemlerine ayrılır.

Ana yöntemler aşağıda gösterilmiştir.

Değerleri Okuma Yöntemleri

• getInt8(byteOffset): Belirtilen ofset'te 1 baytlık işaretli bir tamsayı okur.
• getUint8(byteOffset): Belirtilen ofset'te 1 baytlık işaretsiz bir tamsayı okur.
• getInt16(byteOffset, littleEndian): 2 baytlık işaretli bir tamsayı okur.
• getUint16(byteOffset, littleEndian): 2 baytlık işaretsiz bir tamsayı okur.
• getInt32(byteOffset, littleEndian): 4 baytlık işaretli bir tamsayı okur.
• getUint32(byteOffset, littleEndian): 4 baytlık işaretsiz bir tamsayı okur.
• getFloat32(byteOffset, littleEndian): 4 baytlık IEEE 754 kayan nokta sayısı okur.
• getFloat64(byteOffset, littleEndian): 8 baytlık bir IEEE 754 kayan nokta sayısını okur.

Değerleri Yazma Yöntemleri

• setInt8(byteOffset, value): 1 baytlık işaretli bir tam sayı yazar.
• setUint8(byteOffset, value): 1 baytlık işaretsiz bir tam sayı yazar.
• setInt16(byteOffset, value, littleEndian): 2 baytlık işaretli bir tam sayı yazar.
• setUint16(byteOffset, value, littleEndian): 2 baytlık işaretsiz bir tam sayı yazar.
• setInt32(byteOffset, value, littleEndian): 4 baytlık işaretli bir tam sayı yazar.
• setUint32(byteOffset, value, littleEndian): 4 baytlık işaretsiz bir tam sayı yazar.
• setFloat32(byteOffset, value, littleEndian): 4 baytlık bir IEEE 754 kayan nokta sayısı yazar.
• setFloat64(byteOffset, value, littleEndian): 8 baytlık bir IEEE 754 kayan nokta sayısı yazar.

Bu yöntemleri kullanarak, ArrayBuffer içinde depolanan verileri esnek bir şekilde okuyabilir ve yazabilirsiniz.

DataView kullanımı örneği

İkili verileri DataView kullanarak nasıl işleyebileceğimize dair bir örneğe bakalım.

Örnek 1: 16 bitlik bir tam sayının yazılması ve okunması

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

• Bu örnekte, setInt16 yöntemi kullanılarak küçük endian formatında 16 bitlik işaretli bir tam sayı yazılır ve getInt16 yöntemi ile aynı formatta okunur.

Örnek 2: Kayan nokta sayısının yazılması ve okunması

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

• Bu örnekte, setFloat64 yöntemi kullanılarak büyük endian formatında 64 bitlik kayan nokta sayısı yazılır ve getFloat64 yöntemi ile okunur.

Endianness Hakkında

DataView kullanarak hem big-endian hem de little-endian formatlarında değerlerin nasıl okunup yazılacağına dair bir örnek görelim.

 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));

DataView yöntemlerinde veriler varsayılan olarak büyük endian (en anlamlı bayttan en önemsiz bayta doğru byte sıralaması) formatında depolanır, ancak isteğe bağlı olarak küçük endian formatı belirtilebilir. Küçük endian byte sırasını tersine çevirir (en önemsiz bayttan en anlamlı bayta doğru). Veri endianlığının doğru şekilde işlenmesi önemlidir çünkü farklı sistemler ve ağ protokolleri farklı endianlıklar kullanır.

TypedArray ile Farkları

DataView ve TypedArray arasındaki farklara bakalım.

 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 de ArrayBuffer tabanlı buffer işlemleri sağlar, ancak TypedArray, her veri tipi için sabit uzunluk ve formata sahip bitişik veriler üzerinde çalışmaya uygundur. Öte yandan, DataView farklı veri tipleri üzerinde esnek bir şekilde çalışabilir ve endianness kontrolünü sağlar. Bu nedenle, DataView karmaşık ikili verileri ayrıştırmak ve oluşturmak için uygundur.

Özet

DataView, JavaScript'te ikili verileri işlemek için güçlü bir API'dir. Tam sayı, kayan noktalı sayılar ve endianlık farklılıklarını göz önünde bulundurarak ArrayBuffera doğrudan erişebilir ve veri okuyup yazabilirsiniz. Ağ iletişimi ve dosya formatı ayrıştırma gibi durumlarda kullanışlıdır ve bayt düzeyinde kontrol gerektiğinde vazgeçilmezdir. TypedArray ile birlikte kullanarak, ikili veri işlemlerini daha verimli bir şekilde gerçekleştirebilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video