Articles
Giới thiệu về JavaScript
`ArrayBuffer` trong JavaScript

`ArrayBuffer` trong JavaScript

Bài viết này giải thích về ArrayBuffer trong JavaScript.

Chúng tôi sẽ giải thích mọi thứ về ArrayBuffer, từ những kiến thức cơ bản đến cách sử dụng, các loại liên quan và các ứng dụng thực tế.

YouTube Video

ArrayBuffer trong JavaScript

ArrayBuffer của JavaScript là một đối tượng để xử lý dữ liệu nhị phân ở cấp thấp và đặc biệt hữu ích cho việc thao tác với dữ liệu nhị phân trong WebAPIs, các thao tác tệp, và giao tiếp mạng.

ArrayBuffer là gì

ArrayBuffer là một cấu trúc dữ liệu để xử lý dữ liệu nhị phân có độ dài cố định. ArrayBuffer cho phép xử lý dữ liệu nhị phân thô mà các mảng hoặc đối tượng thông thường trong JavaScript không thể xử lý được.

Chính bản thân ArrayBuffer không thể trực tiếp thao tác dữ liệu. Thay vào đó, dữ liệu được đọc và ghi bằng cách sử dụng TypedArray hoặc DataView dựa trên ArrayBuffer.

ArrayBuffer đặc biệt hữu ích trong các trường hợp sau.

  • Khi xử lý dữ liệu nhị phân nhận từ mạng
  • Khi yêu cầu chia sẻ dữ liệu hiệu quả trong Web Worker.
  • Khi thực hiện xử lý hình ảnh hoặc kết xuất 3D bằng Canvas hoặc WebGL.
  • Khi thao tác với tệp (đặc biệt là các tệp nhị phân).

Tạo một ArrayBuffer

Đầu tiên, hãy bắt đầu với cách tạo một instance của ArrayBuffer. ArrayBuffer cấp phát bộ nhớ theo đơn vị byte, vì vậy bạn cần chỉ định kích thước của nó khi tạo.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16
  • Trong ví dụ này, một bộ đệm 16 byte được cấp phát. Bộ đệm này chưa chứa bất kỳ dữ liệu nào.

Thao tác dữ liệu với TypedArray

Bạn không thể truy cập trực tiếp ArrayBuffer, vì vậy bạn sử dụng TypedArray để đọc và ghi dữ liệu. TypedArray cung cấp các loại view khác nhau như Int8Array và Float32Array, cho phép truy cập dữ liệu nhị phân hiệu quả.

Ví dụ sử dụng Int8Array 

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42
  • Int8Array có thể lưu trữ dữ liệu trong mỗi byte, cho phép bộ đệm chứa 8 phần tử. Bằng cách này, bằng cách sử dụng các loại view khác nhau, bạn có thể xử lý dữ liệu một cách hiệu quả.

Các ví dụ khác về TypedArray

JavaScript có nhiều loại TypedArray khác nhau. Ví dụ, nếu bạn muốn xử lý số nguyên không dấu 32-bit, bạn sử dụng Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456
  • Uint32Array có thể lưu trữ dữ liệu theo đơn vị 4 byte, vì vậy bộ đệm có thể chứa bốn phần tử. Điều quan trọng là phải chọn đúng loại TypedArray dựa trên loại dữ liệu bạn đang xử lý.

Xử lý dữ liệu linh hoạt bằng cách sử dụng DataView

TypedArray chỉ có thể xử lý dữ liệu thuộc một loại cố định, nhưng với DataView, bạn có thể ghi dữ liệu bất kỳ loại nào vào bất kỳ vị trí nào. Điều này đặc biệt hữu ích khi xử lý buffer chứa nhiều loại dữ liệu hỗn hợp.

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

Bằng cách sử dụng DataView, bạn có thể chỉ định độ lệch byte và đọc hoặc ghi dữ liệu thuộc nhiều loại khác nhau. Điều này rất hữu ích khi xử lý các cấu trúc nhị phân phức tạp như giao thức mạng hoặc định dạng tệp.

Cân nhắc về Endianness

Khi sử dụng DataView, bạn cũng cần chú ý đến endianness (thứ tự byte). Tùy thuộc vào kiến trúc máy tính, thứ tự mà dữ liệu được lưu trữ trong bộ nhớ có thể khác nhau. Các phương thức của DataView có các tùy chọn để xác định endianness.

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

Nếu bạn không xác định đúng endianness, dữ liệu có thể không được hiểu chính xác trong các môi trường khác nhau, vì vậy việc chú ý đặc biệt trong giao tiếp mạng hoặc thao tác với tệp là rất quan trọng.

Ứng dụng của ArrayBuffer

ArrayBuffer là một công cụ mạnh mẽ thường được sử dụng trong phát triển web và các API của trình duyệt. Hãy cùng xem một số ví dụ về ứng dụng.

Nhận và xử lý dữ liệu nhị phân

Ví dụ, bạn có thể lấy dữ liệu nhị phân từ máy chủ bằng cách sử dụng XMLHttpRequest hoặc API fetch và xử lý chúng dưới dạng ArrayBuffer.

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });
  • Trong ví dụ này, dữ liệu hình ảnh được lấy từ máy chủ và được xử lý như một Uint8Array. Bằng cách này, bạn có thể xử lý dữ liệu nhận từ máy chủ bằng ArrayBuffer.

Sử dụng trong WebGL

Trong WebGL, ArrayBuffer được sử dụng để xử lý hiệu quả dữ liệu nhị phân như dữ liệu đỉnh và dữ liệu màu sắc.

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  • Trong ví dụ này, Float32Array được sử dụng để định nghĩa các tọa độ đỉnh của hình chữ nhật và gửi chúng đến một buffer WebGL.

Quản lý bộ nhớ và ArrayBuffer

ArrayBuffer quản lý bộ nhớ ở cấp độ byte, giúp nó rất hiệu quả, nhưng bạn cũng cần cẩn thận với việc quản lý bộ nhớ. Khi xử lý dữ liệu nhị phân lớn, điều quan trọng là giải phóng đúng cách các ArrayBuffer không sử dụng. Mặc dù JavaScript tự động thực hiện việc thu gom rác, nếu một ArrayBuffer tiếp tục được tham chiếu, nó có thể gây rò rỉ bộ nhớ.

Tóm tắt

ArrayBuffer cung cấp nền tảng cho việc xử lý dữ liệu nhị phân trong JavaScript. Bằng cách kết hợp TypedArray và DataView, có thể xử lý dữ liệu nhị phân một cách hiệu quả và linh hoạt. Chúng là những công cụ không thể thiếu trong phát triển web, đặc biệt trong nhiều tình huống đòi hỏi xử lý dữ liệu nhị phân như giao tiếp mạng và WebGL. Bằng cách hiểu đúng và sử dụng chúng một cách phù hợp, bạn có thể cải thiện hiệu suất và hiệu quả.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

JavaScript và StorageManagerTypedArray trong JavaScript