Hung Nguyen 🧠🌳

Search

SearchSearch

JS ArrayBuffer

Apr 20, 20245 min read

ArrayBuffer

Đối tượng ArrayBuffer được sử dụng để đại diện cho một bộ đệm dữ liệu nhị phân nguyên thủy có độ dài cố định.

ArrayBuffer không thể được truy cập trực tiếp, mà phải thông qua các đối tượng TypedArray hoặc DataView để thao tác với dữ liệu trong bộ đệm. Các đối tượng này sẽ đại diện cho dữ liệu trong bộ đệm dưới dạng các định dạng cụ thể và cho phép đọc và ghi nội dung của bộ đệm.

  • Đọc:
    • Chuyển đổi tệp thành dữ liệu ArrayBuffer bằng FileReader
  • Ghi:
    • Thao tác thông qua đối tượng TypedArray
    • Thao tác thông qua đối tượng DataView

Mảng trong JavaScript, vì có nhiều chức năng và không giới hạn kiểu dữ liệu, hoặc nó cũng có thể là một mảng thưa thớt. Tuy nhiên, nếu bạn đọc một chuỗi dữ liệu nhị phân từ XHR, FileAPI, Canvas, v.v., nếu sử dụng mảng JavaScript để lưu trữ, nó không chỉ lãng phí không gian mà còn không hiệu quả. Vì vậy, để tương thích với các API mới này và nâng cao khả năng xử lý nhị phân của JavaScript, ArrayBuffer đã được tạo ra.

ArrayBuffer và Array có sự khác biệt lớn:

  • ArrayBuffer có kích thước cố định sau khi khởi tạo, trong khi mảng có thể tăng hoặc giảm kích thước tự do.
  • Mảng được lưu trữ trong heap, trong khi ArrayBuffer lưu trữ dữ liệu trong stack.
  • ArrayBuffer không có các phương thức như push và pop của mảng.
  • ArrayBuffer chỉ có thể đọc, không thể ghi trực tiếp, việc ghi phải thông qua TypedArray hoặc DataView.

Một cách đơn giản, ArrayBuffer là một vùng nhớ, nhưng bạn không thể (hoặc không thuận tiện) truy cập trực tiếp các byte trong nó. Để truy cập ArrayBuffer, bạn cần sử dụng một tham chiếu kiểu TypedArray. (Có thể hiểu ArrayBuffer như một mảng nhanh có kiểu hoặc một mảng có kiểu)

Các trường hợp sử dụng:

  • Đọc và hiển thị hình ảnh được tải lên
  • Chuyển đổi và tải xuống hình ảnh từ Canvas
  • WebGL

Cú pháp

new ArrayBuffer(length);
Tham sốKiểu dữ liệuMô tả
lengthNumberKích thước của ArrayBuffer, tính bằng byte.

Một đối tượng ArrayBuffer với kích thước xác định, nội dung được khởi tạo thành 0.

Mô tả

Hàm tạo ArrayBuffer được sử dụng để tạo một đối tượng ArrayBuffer với độ dài được chỉ định trong byte.

Lấy ArrayBuffer từ dữ liệu hiện có

Thuộc tính và phương thức tĩnh

Thuộc tính

Thuộc tínhMô tả
ArrayBuffer.lengthThuộc tính length của hàm tạo ArrayBuffer, có giá trị là 1.
get ArrayBuffer[@@species]Trả về hàm tạo ArrayBuffer.
ArrayBuffer.prototypeĐối tượng nguyên mẫu của ArrayBuffer, cho phép thêm thuộc tính cho nó.

Phương thức

Phương thứcMô tả
ArrayBuffer.isView(arg)Trả về true nếu đối số là một phiên bản xem ArrayBuffer, ví dụ như một đối tượng mảng kiểu hoặc đối tượng DataView; ngược lại trả về false.
ArrayBuffer.transfer(oldBuffer [, newByteLength]);Trả về một đối tượng ArrayBuffer mới, nội dung được lấy từ dữ liệu trong oldBuffer và cắt hoặc bổ sung 0 dựa trên newByteLength.
ArrayBuffer.slice()Tương tự như ArrayBuffer.prototype.slice().

Thuộc tính và phương thức của ArrayBuffer

Thuộc tính

Thuộc tínhMô tả
ArrayBuffer.prototype.constructorChỉ định hàm tạo ra một nguyên mẫu đối tượng. Giá trị ban đầu là hàm tạo sẵn có của ArrayBuffer.
ArrayBuffer.prototype.byteLengthKích thước của mảng tính bằng byte. Được xác định khi mảng được tạo và không thể thay đổi. Chỉ đọc.

Phương thức

Phương thứcMô tả
ArrayBuffer.prototype.slice()Trả về một ArrayBuffer mới, chứa một bản sao byte của ArrayBuffer ban đầu, từ vị trí begin (bao gồm) đến vị trí end (không bao gồm). Nếu begin hoặc end là số âm, nó sẽ đại diện cho vị trí từ cuối mảng, chứ không phải từ đầu mảng.

Ví dụ

Ví dụ mã

Dưới đây là một ví dụ tạo một bộ nhớ đệm 8 byte và sử dụng một Int32Array để tham chiếu đến nó:

const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);

Tạo các view

ArrayBuffer được sử dụng để lưu trữ nhiều loại dữ liệu khác nhau. Mỗi loại dữ liệu có cách lưu trữ riêng, được gọi là view.

Hiện tại, JavaScript cung cấp các loại view sau:

  • Int8Array: Số nguyên có dấu 8 bit, chiều dài 1 byte.
  • Uint8Array: Số nguyên không dấu 8 bit, chiều dài 1 byte.
  • Int16Array: Số nguyên có dấu 16 bit, chiều dài 2 byte.
  • Uint16Array: Số nguyên không dấu 16 bit, chiều dài 2 byte.
  • Int32Array: Số nguyên có dấu 32 bit, chiều dài 4 byte.
  • Uint32Array: Số nguyên không dấu 32 bit, chiều dài 4 byte.
  • Float32Array: Số thực 32 bit, chiều dài 4 byte.
  • Float64Array: Số thực 64 bit, chiều dài 8 byte.

Mỗi loại view đều có một hằng số BYTES_PER_ELEMENT, biểu thị số byte mà kiểu dữ liệu này chiếm.

Int8Array.BYTES_PER_ELEMENT;
// 1
Uint8Array.BYTES_PER_ELEMENT;
// 1
//...

Mỗi loại view đều là một hàm tạo, có nhiều phương thức để tạo ra chúng.

// Kết quả trên trình duyệt:
> Int32Array
> function Int32Array() { [native code] }

Thực hiện ghi vào ArrayBuffer bằng TypeArray

const typedArray1 = new Int8Array(8);
typeArray1[0] = 32;
 
const typedArray2 = new Int8Array(typedArray1);
typedArray2[1] = 42;
 
console.log(typedArray1);
// Int8Array [32, 0, 0, 0, 0, 0, 0, 0]
 
console.log(typedArray2);
// Int8Array [32, 42, 0, 0, 0, 0, 0, 0]

Thực hiện ghi vào ArrayBuffer bằng DataView

const buffer = new ArrayBuffer(16);
const viwe = new DataView(buffer);
 
view.setInt8(2, 42);
console.log(view.getInt8(2));
// 42

Graph View

Backlinks