`DataView` ใน JavaScript
บทความนี้อธิบายเกี่ยวกับ DataView ใน JavaScript
เราจะอธิบายในรายละเอียดเกี่ยวกับการใช้งานพื้นฐานของ DataView และยกตัวอย่างการใช้งานเฉพาะ
YouTube Video
DataView ใน JavaScript
DataView ใน JavaScript เป็น API ที่สะดวกสำหรับการจัดการข้อมูลที่เก็บอยู่ในบัฟเฟอร์ (ArrayBuffer) ในรูปแบบต่าง ๆ สิ่งนี้ช่วยให้สามารถอ่านและเขียนข้อมูลไบนารีได้อย่างยืดหยุ่นและมีประสิทธิภาพ มีบทบาทสำคัญในด้านการสื่อสารเครือข่าย การประมวลผลไฟล์ และการเชื่อมต่อกับ WebAssembly
DataView คืออะไร?
DataView ให้เลเยอร์มุมมองครอบคลุมวัตถุ ArrayBuffer ซึ่งช่วยให้คุณสามารถอ่านและเขียนประเภทข้อมูลต่าง ๆ (เช่นจำนวนเต็ม จำนวนทศนิยม และอักขระ) จากจุดออฟเซ็ตใด ๆ ได้ DataView คล้ายกับ TypedArray แต่มีคุณสมบัติพิเศษที่สามารถระบุ endianness และดำเนินการรายละเอียดในระดับไบต์ได้
ไวยากรณ์พื้นฐานของ DataView
1let buffer = new ArrayBuffer(16); // Create a 16-byte ArrayBuffer
2let view = new DataView(buffer); // Manipulate the buffer with a DataView
DataView มีตัวสร้างที่รับ ArrayBuffer เป็นอาร์กิวเมนต์ ในตัวอย่างนี้ ได้สร้างบัฟเฟอร์ขนาด 16 ไบต์ขึ้นมา และใช้ DataView ในการเข้าถึงบัฟเฟอร์นั้น การใช้ DataView คุณสามารถระบุขนาดไบต์และ endianness (big-endian หรือ little-endian) ที่แตกต่างกันเมื่ออ่านหรือเขียนข้อมูลที่เก็บไว้ในบัฟเฟอร์
วิธีการพื้นฐานของ DataView
DataView มีวิธีการสำหรับการอ่านและเขียนค่าของประเภทข้อมูลต่าง ๆ ซึ่งแบ่งออกเป็นวิธีการ get สำหรับการอ่านข้อมูล และวิธีการ set สำหรับการเขียนข้อมูล
วิธีการหลักจะแสดงไว้ด้านล่างนี้
วิธีการสำหรับการอ่านค่า
getInt8(byteOffset): อ่านจำนวนเต็มแบบมีเครื่องหมายขนาด 1 ไบต์ที่ออฟเซ็ตที่กำหนดgetUint8(byteOffset): อ่านจำนวนเต็มแบบไม่มีเครื่องหมายขนาด 1 ไบต์ที่ออฟเซ็ตที่กำหนดgetInt16(byteOffset, littleEndian): อ่านจำนวนเต็มแบบมีเครื่องหมายขนาด 2 ไบต์getUint16(byteOffset, littleEndian): อ่านจำนวนเต็มแบบไม่มีเครื่องหมายขนาด 2 ไบต์getInt32(byteOffset, littleEndian): อ่านจำนวนเต็มแบบมีเครื่องหมายขนาด 4 ไบต์getUint32(byteOffset, littleEndian): อ่านจำนวนเต็มแบบไม่มีเครื่องหมายขนาด 4 ไบต์getFloat32(byteOffset, littleEndian): อ่านจำนวนทศนิยมแบบ IEEE 754 ที่มีความยาว 4 ไบต์getFloat64(byteOffset, littleEndian): อ่านจำนวนทศนิยมแบบ IEEE 754 ที่มีความยาว 8 ไบต์
เมธอดสำหรับเขียนค่า
setInt8(byteOffset, value): เขียนจำนวนเต็มแบบ signed ขนาด 1 ไบต์setUint8(byteOffset, value): เขียนจำนวนเต็มแบบ unsigned ขนาด 1 ไบต์setInt16(byteOffset, value, littleEndian): เขียนจำนวนเต็มแบบ signed ขนาด 2 ไบต์setUint16(byteOffset, value, littleEndian): เขียนจำนวนเต็มแบบ unsigned ขนาด 2 ไบต์setInt32(byteOffset, value, littleEndian): เขียนจำนวนเต็มแบบ signed ขนาด 4 ไบต์setUint32(byteOffset, value, littleEndian): เขียนจำนวนเต็มแบบ unsigned ขนาด 4 ไบต์setFloat32(byteOffset, value, littleEndian): เขียนจำนวนทศนิยมแบบ IEEE 754 ขนาด 4 ไบต์setFloat64(byteOffset, value, littleEndian): เขียนจำนวนทศนิยมแบบ IEEE 754 ขนาด 8 ไบต์
โดยการใช้เมธอดเหล่านี้ คุณสามารถอ่านและเขียนข้อมูลใน ArrayBuffer ได้อย่างยืดหยุ่น
ตัวอย่างการใช้งาน DataView
มาดูตัวอย่างของการจัดการข้อมูลไบนารีโดยใช้ DataView กัน
ตัวอย่างที่ 1: การเขียนและการอ่านจำนวนเต็มแบบ 16 บิต
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
- ในตัวอย่างนี้ใช้เมธอด
setInt16เขียนจำนวนเต็มแบบ signed ขนาด 16 บิตในรูปแบบ little-endian และใช้เมธอดgetInt16อ่านค่าดังกล่าวใน little-endian
ตัวอย่างที่ 2: การเขียนและการอ่านจำนวนทศนิยม
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
- ในตัวอย่างนี้ใช้เมธอด
setFloat64เขียนจำนวนทศนิยมขนาด 64 บิตในรูปแบบ big-endian และอ่านค่าดังกล่าวด้วยgetFloat64
เกี่ยวกับ Endianness
มาดูตัวอย่างการอ่านและเขียนข้อมูลในรูปแบบ big-endian และ little-endian โดยใช้ 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));ในเมธอดของ DataView ข้อมูลจะถูกเก็บในรูปแบบ big-endian (เรียงไบต์จากมากสำคัญไปน้อยสำคัญ) โดยค่าเริ่มต้น แต่สามารถระบุ little-endian ได้หากต้องการ Little-endian สลับเรียงลำดับไบต์ (จากน้อยสำคัญไปมากสำคัญ) การจัดการลำดับไบต์ของข้อมูลอย่างถูกต้องเป็นสิ่งสำคัญ เนื่องจากระบบและโปรโตคอลเครือข่ายต่าง ๆ ใช้ลำดับไบต์ที่แตกต่างกัน
ความแตกต่างจาก TypedArray
มาดูความแตกต่างระหว่าง DataView และ 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 ก็ให้การดำเนินการกับบัฟเฟอร์บนฐาน ArrayBuffer เช่นกัน แต่เหมาะสมสำหรับการจัดการข้อมูลที่ต่อเนื่องและมีความยาวและรูปแบบตายตัวต่อประเภทข้อมูล ในทางกลับกัน DataView สามารถจัดการกับประเภทข้อมูลต่างๆ ได้อย่างยืดหยุ่น และยังสามารถควบคุม endianness ได้ด้วย ดังนั้น DataView จึงเหมาะสำหรับการแยกวิเคราะห์และสร้างข้อมูลไบนารีที่ซับซ้อน
สรุป
DataView เป็น API ที่ทรงพลังสำหรับจัดการข้อมูลไบนารีใน JavaScript คุณสามารถเข้าถึง ArrayBuffer ได้โดยตรงเพื่ออ่านและเขียนข้อมูล โดยพิจารณาถึงจำนวนเต็ม จำนวนทศนิยมแบบจุดลอยตัว และความแตกต่างในรูปแบบของ endianness มันมีประโยชน์ในสถานการณ์เช่นการสื่อสารผ่านเครือข่ายและการแยกวิเคราะห์รูปแบบไฟล์ และเป็นสิ่งจำเป็นเมื่อมีความต้องการควบคุมที่ระดับไบต์ เมื่อใช้ร่วมกับ TypedArray คุณสามารถจัดการข้อมูลไบนารีได้อย่างมีประสิทธิภาพมากขึ้น
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย