Hướng dẫn入门 JavaScript DataView

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các đối tượng DataView. Đừng lo lắng nếu bạn chưa từng nghe đến chúng trước đây - vào cuối bài hướng dẫn này, bạn sẽ xử lý dữ liệu nhị phân như một chuyên gia!

DataView là gì?

Trước khi chúng ta đi vào chi tiết, hãy bắt đầu với những điều cơ bản. Hãy tưởng tượng bạn là một thám tử, và bạn vừa nhận được một gói bí ẩn đầy dữ liệu nhị phân. Bạn sẽ làm thế nào để hiểu được nó? Đó là lúc DataView ra vào cuộc giải cứu!

Một đối tượng DataView cho phép bạn đọc và ghi nhiều loại số khác nhau trong một ArrayBuffer, bất kể máy tính của bạn sử dụng endianness nào (đừng lo lắng, chúng ta sẽ giải thích sau). Nó giống như một bộ dịch universal cho dữ liệu nhị phân!

Cú pháp

Hãy cùng nhìn vào cách chúng ta tạo một đối tượng DataView:

new DataView(buffer [, byteOffset [, byteLength]])

Đừng để điều này làm bạn hoảng sợ! Nó đơn giản hơn bạn nghĩ. Hãy phân tích nó:

• buffer: Đây là ArrayBuffer của chúng ta, là容器 chứa dữ liệu nhị phân của chúng ta.
• byteOffset (tùy chọn): Vị trí trong bộ nhớ buffer mà bạn muốn bắt đầu đọc.
• byteLength (tùy chọn): Số byte bạn muốn bao gồm trong view của mình.

Ví dụ: Tạo một đối tượng DataView

Hãy撸 áo lên và tạo đối tượng DataView đầu tiên của chúng ta:

// Đầu tiên, chúng ta tạo một ArrayBuffer 16 byte
const buffer = new ArrayBuffer(16);

// Bây giờ, hãy tạo một DataView của toàn bộ buffer
const view1 = new DataView(buffer);

// Hãy tạo một DataView khác, bắt đầu từ byte 12, với độ dài 4 byte
const view2 = new DataView(buffer, 12, 4);

console.log(view1.byteLength); // Output: 16
console.log(view2.byteLength); // Output: 4

Trong ví dụ này, chúng ta đầu tiên tạo một ArrayBuffer của 16 byte. Hãy tưởng tượng nó như một canvas trắng 16 pixel. Sau đó, chúng ta tạo hai đối tượng DataView:

1. view1 bao phủ toàn bộ buffer.
2. view2 bắt đầu từ byte 12 và bao gồm 4 byte cuối cùng.

Nó giống như có hai kính lúp khác nhau để nhìn vào dữ liệu của chúng ta!

Các thuộc tính của JavaScript DataView

DataView có một số thuộc tính hữu ích. Hãy cùng nhìn vào:

Thuộc tính	Mô tả
buffer	Trả về ArrayBuffer được tham chiếu bởi DataView
byteLength	Trả về độ dài (theo byte) của DataView
byteOffset	Trả về offset (theo byte) của DataView từ đầu của ArrayBuffer của nó

Dưới đây là cách chúng ta có thể sử dụng các thuộc tính này:

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer, 2, 12);

console.log(view.buffer);       // ArrayBuffer(16)
console.log(view.byteLength);   // 12
console.log(view.byteOffset);   // 2

Trong ví dụ này, chúng ta tạo một DataView bắt đầu từ byte 2 của buffer và có độ dài 12 byte. Các thuộc tính giúp chúng ta xác nhận chi tiết này.

Các phương thức của JavaScript DataView

Bây giờ, hãy đến phần thú vị - các phương thức! DataView cung cấp các phương thức để đọc và ghi các loại số khác nhau. Dưới đây là bảng các phương thức thường được sử dụng:

Phương thức	Mô tả
getInt8(byteOffset)	Lấy một số nguyên có dấu 8-bit tại vị trí byte offset xác định
getUint8(byteOffset)	Lấy một số nguyên không dấu 8-bit tại vị trí byte offset xác định
getInt16(byteOffset [, littleEndian])	Lấy một số nguyên có dấu 16-bit tại vị trí byte offset xác định
getUint16(byteOffset [, littleEndian])	Lấy một số nguyên không dấu 16-bit tại vị trí byte offset xác định
getInt32(byteOffset [, littleEndian])	Lấy một số nguyên có dấu 32-bit tại vị trí byte offset xác định
getUint32(byteOffset [, littleEndian])	Lấy một số nguyên không dấu 32-bit tại vị trí byte offset xác định
getFloat32(byteOffset [, littleEndian])	Lấy một số float 32-bit tại vị trí byte offset xác định
getFloat64(byteOffset [, littleEndian])	Lấy một số float 64-bit tại vị trí byte offset xác định

Cũng có các phương thức set tương ứng cho mỗi phương thức get.

Hãy nhìn một số phương thức này trong hành động:

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);

// Hãy ghi một số dữ liệu
view.setInt16(0, 42);
view.setFloat32(2, 3.14);

// Bây giờ, hãy đọc dữ liệu
console.log(view.getInt16(0));   // Output: 42
console.log(view.getFloat32(2)); // Output: 3.140000104904175

Trong ví dụ này, chúng ta đang ghi một số nguyên 16-bit (42) tại byte offset 0, và một số float 32-bit (3.14) tại byte offset 2. Sau đó, chúng ta đọc các giá trị này lại. Lưu ý rằng giá trị float không exactly 3.14 - điều này là do cách số float được lưu trữ trong nhị phân.

Bí ẩn của Endianness

Nhớ lại khi tôi đề cập đến endianness trước đó? Đã đến lúc hé lộ bí ẩn này! Endianness đề cập đến thứ tự mà các byte được sắp xếp thành các giá trị số lớn hơn. Có hai loại:

1. Little-endian: Byte nhỏ nhất đến trước.
2. Big-endian: Byte lớn nhất đến trước.

Hãy tưởng tượng như viết số: 123 là big-endian (số lớn nhất trước), trong khi 321 sẽ là little-endian.

Sự tuyệt vời của DataView là nó cho phép bạn chỉ định endianness khi đọc hoặc ghi các giá trị đa byte. Hãy nhìn một ví dụ:

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);

view.setUint16(0, 0x1234, true);  // true cho little-endian
view.setUint16(2, 0x5678, false); // false (hoặc bỏ qua) cho big-endian

console.log(view.getUint16(0, true));  // 0x1234
console.log(view.getUint16(0, false)); // 0x3412
console.log(view.getUint16(2, true));  // 0x7856
console.log(view.getUint16(2, false)); // 0x5678

Trong ví dụ này, chúng ta đang ghi cùng một giá trị theo cả hai endianness và sau đó đọc chúng theo cả hai endianness. Nó giống như có thể đọc một cuốn sách từ cả hai hướng: từ trái sang phải và từ phải sang trái!

Kết luận

Chúc mừng! Bạn đã vừa bước những bước đầu tiên vào thế giới của DataView. Chúng ta đã cùng nhau tạo đối tượng DataView, sử dụng các thuộc tính của nó và manipulates dữ liệu bằng các phương thức của nó. Chúng ta thậm chí đã giải mã bí ẩn của endianness!

Nhớ rằng, việc làm việc với dữ liệu nhị phân có thể看起来 đáng sợ ban đầu, nhưng với DataView, bạn có một công cụ mạnh mẽ trong tay. Nó giống như một cây kéo đa năng cho dữ liệu nhị phân - linh hoạt, chính xác và vô cùng hữu ích.

Khi bạn tiếp tục hành trình JavaScript của mình, bạn sẽ thấy DataView vô cùng hữu ích khi làm việc với các cấu trúc dữ liệu nhị phân phức tạp, như những gì được sử dụng trong các định dạng tệp hoặc giao thức mạng. Hãy tiếp tục tập luyện, và sớm bạn sẽ manipulates bits và bytes như một thám tử mã hóa thực thụ!

Credits: Image by storyset