TypedArray trong JavaScript

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

Chúng tôi sẽ giải thích chi tiết khái niệm cơ bản về TypedArray, từng kiểu, cách sử dụng chúng và các trường hợp sử dụng cụ thể.

YouTube Video

TypedArray trong JavaScript

TypedArray trong JavaScript là một đối tượng dùng để xử lý dữ liệu nhị phân đã được đệm một cách hiệu quả. TypedArray phân bổ và thao tác bộ nhớ dựa trên các loại dữ liệu cụ thể. Không giống như mảng thông thường, TypedArray chỉ có thể chứa dữ liệu nhị phân kích thước cố định, không phải loại dữ liệu tùy ý.

Cấu trúc cơ bản của TypedArray

Các thành phần chính của TypedArray là ArrayBuffer và chính TypedArray.

• ArrayBuffer: Một bộ đệm kích thước cố định để phân bổ dữ liệu nhị phân trong bộ nhớ. Bộ đệm này chỉ là một khu vực dữ liệu và không thể đọc hoặc ghi trực tiếp.
• TypedArray: Một đối tượng bao để áp dụng loại dữ liệu cụ thể vào bộ đệm, cho phép truy cập và thao tác dữ liệu.

Ví dụ sử dụng cơ bản

Dưới đây là một ví dụ về việc tạo ra một ArrayBuffer và sau đó tạo một TypedArray dựa trên bộ đệm đó.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• Trong ví dụ này, một ArrayBuffer được tạo ra và sau đó một Uint8Array được tạo dựa trên bộ đệm đó. Mỗi phần tử được coi là một số nguyên không dấu 8 bit, chỉ lưu trữ các giá trị trong phạm vi được chỉ định.

Các loại TypedArray

Có các loại TypedArray khác nhau cho từng loại dữ liệu. Các loại chính như sau.

Các TypedArray này đều tiết kiệm bộ nhớ và hiệu quả trong việc xử lý lượng lớn dữ liệu.

Thao tác với TypedArrays

Bạn có thể truy cập dữ liệu trong TypedArray bằng chỉ số, giống như một mảng bình thường, nhưng cũng có một số phương thức đặc biệt được cung cấp.

Gán giá trị

Trong TypedArray, bạn có thể gán nhiều giá trị cùng lúc bằng cách sử dụng phương thức set.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• Đoạn mã này sử dụng phương thức set để gán nhiều giá trị cùng lúc cho một Int16Array, và hiển thị từng phần tử trên bảng điều khiển.

Lấy một mảng con

Để lấy một phần của TypedArray như một mảng con, hãy sử dụng phương thức subarray. Điều này tham chiếu đến cùng một bộ đệm như TypedArray gốc.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• Đoạn mã này lấy một dải phần tử xác định từ Int16Array bằng phương thức subarray và hiển thị mảng phụ đó trên bảng điều khiển.

Sao chép bộ đệm

Bộ đệm của một TypedArray cũng có thể được sao chép sang TypedArray khác. Sử dụng phương thức set, bạn có thể sao chép từ một vị trí chỉ định.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• Đoạn mã này sao chép nội dung của một Uint8Array sang một mảng khác bằng phương thức set, và hiển thị mảng đã sao chép trên bảng điều khiển.

Sử dụng DataView

Trong khi TypedArray xử lý bộ đệm với kiểu dữ liệu cố định, DataView là một giao diện cho phép thao tác linh hoạt với dữ liệu nhị phân với các độ lệch và kiểu dữ liệu tùy ý. Điều này cho phép các kiểu dữ liệu khác nhau được trộn lẫn trong cùng một bộ đệm.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• Đoạn mã này sử dụng DataView để ghi các loại dữ liệu khác nhau—số nguyên 32-bit và số thực dấu phẩy động 32-bit—vào cùng một vùng đệm và kiểm tra kết quả.

• DataView cung cấp sự linh hoạt truy cập dữ liệu lớn hơn so với TypedArray và đặc biệt hữu ích khi làm việc với các tệp định dạng nhị phân hoặc giao thức mạng.

Trường hợp sử dụng của TypedArray

TypedArray chủ yếu được sử dụng để xử lý hiệu quả lượng lớn dữ liệu nhị phân. Những trường hợp sử dụng cụ thể bao gồm các nội dung sau.

Xử lý hình ảnh

TypedArray được sử dụng khi thao tác thông tin điểm ảnh của dữ liệu hình ảnh. Sử dụng Uint8Array, bạn lưu giữ các giá trị RGBA của từng điểm ảnh và thực hiện chỉnh sửa, xử lý hình ảnh.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Đoạn mã này tạo dữ liệu hình ảnh với chiều rộng 100 và chiều cao 100 theo định dạng RGBA bằng Uint8Array, và đặt tất cả các điểm ảnh thành màu đỏ.

Tương tác với WebAssembly

TypedArray được sử dụng để trao đổi dữ liệu nhị phân giữa JavaScript và WebAssembly. Bằng cách chia sẻ không gian bộ nhớ của JavaScript và WebAssembly thông qua ArrayBuffer, có thể trao đổi dữ liệu nhanh chóng.

Xử lý dữ liệu âm thanh và video

TypedArray đóng vai trò quan trọng trong việc xử lý âm thanh và video. Bạn có thể lưu trữ dạng sóng dữ liệu âm thanh trong Float32Array để thực hiện phát lại và xử lý.

Kết luận

TypedArray là một công cụ mạnh mẽ để xử lý hiệu quả lượng lớn dữ liệu nhị phân. Nó đặc biệt hữu ích trong các ứng dụng đòi hỏi hiệu suất như xử lý hình ảnh, WebAssembly và xử lý dữ liệu âm thanh/video. TypedArray có một API giống với mảng thông thường, nhưng có các hạn chế về sử dụng bộ nhớ và kiểu dữ liệu, do đó cần có sự phân biệt phù hợp trong cách sử dụng.

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