Typed Arrays trong JavaScript: Vũ khí tối thượng để xử lý dữ liệu khổng lồ

Khi mới học JavaScript, tất cả chúng ta đều làm quen với mảng thông thường: const arr = [1, "hello", { id: 1 }]. Nó vô cùng tiện lợi, nhét bất cứ thứ gì vào cũng được, và kích thước có thể tự động phình to rụt lại tùy ý.

Nhưng sự tiện lợi đó phải đánh đổi bằng một cái giá rất đắt về mặt Hiệu năng (Performance).

Sự thật trần trụi là: Mảng [] trong JS không phải là mảng thực sự (theo khái niệm của Khoa học máy tính). Dưới mui xe của V8 Engine, nó hoạt động giống như một Hash Map động (Dynamic Dictionary). Việc cấp phát bộ nhớ lộn xộn, cộng thêm việc phải lưu trữ metadata cho từng phần tử khác kiểu nhau khiến RAM bị ngốn nghiêm trọng, đồng thời vắt kiệt sức lực của bộ thu gom rác (Garbage Collector).

Nếu bạn muốn build các ứng dụng Web siêu mượt, xử lý dữ liệu khổng lồ (như Game, xử lý ảnh, WebGL) mà không bị giật lag, đã đến lúc bạn phải cất mảng [] đi và làm quen với Typed Arrays.

1. Bản chất của Typed Arrays là gì?

Để hiểu Typed Arrays, bạn đừng vội gõ code. Hãy hiểu kiến trúc 2 lớp bên dưới của nó. Typed Arrays không phải là một object đơn lẻ, nó là sự kết hợp của 2 thành phần:

• 1. ArrayBuffer (Vùng nhớ thô): Đây là một cục RAM nguyên thủy (Raw binary data). Nó chỉ là một chuỗi các Byte liên tiếp nhau, tĩnh và không có ý nghĩa gì cả. Bạn không thể đọc hoặc ghi dữ liệu trực tiếp lên ArrayBuffer.

• 2. Views (Lăng kính biên dịch): Chính là các Typed Arrays (như Int32Array, Uint8Array). Khối ArrayBuffer thô kệch kia cần một "chiếc kính lúp" ốp lên để hệ thống biết cách đọc hiểu nó. Nếu bạn dùng kính Int32Array, nó sẽ gom cứ 4 bytes (32 bits) thành một con số nguyên. Nếu dùng Uint8Array, nó sẽ đọc từng byte một.

Nhờ kiến trúc cấp phát bộ nhớ tuyến tính liên tục (Linear Memory) này, CPU có thể đọc và xử lý dữ liệu với tốc độ bàn thờ, y hệt như ngôn ngữ C hay C++.

2. Điểm mặt "Gia phả" nhà Typed Arrays

JavaScript cung cấp rất nhiều "chiếc kính lúp" khác nhau, nhưng trong thực chiến, bạn sẽ thường xuyên đụng độ 3 gương mặt cộm cán sau:

• Uint8Array (8-bit Unsigned Integer): Trùm xử lý Media và File. Các con số chỉ dao động từ 0 đến 255. Thường được dùng để thao tác với điểm ảnh (Pixels), mã hóa chuỗi, hoặc stream video/audio.

• Int32Array (32-bit Integer): Chuyên trị tối ưu thuật toán và cấu trúc dữ liệu. Chứa được số nguyên âm/dương lớn. Rất hữu dụng để giải quyết các bài toán về Time/Space Complexity (như thuật toán tìm kiếm, đếm tần suất, mảng băm).

• Float32Array / Float64Array: Bạn của dân làm đồ họa 3D. Các engine như Three.js hoặc WebGL bắt buộc phải dùng mảng này để lưu trữ hàng triệu tọa độ đỉnh (Vertex) của các vật thể 3D.

3. Khi nào vác Typed Arrays ra xài? (Use Cases Thực Chiến)

Đừng lôi Typed Arrays ra dùng chỉ để... cho ngầu. Dưới đây là những bài toán mà nếu không dùng nó, hệ thống của bạn sẽ sụp đổ:

• Xử lý Media/File trên trình duyệt: Bạn cần làm một tính năng crop ảnh, áp filter màu cho ảnh bằng Canvas API, hoặc đọc một file nhị phân nặng hàng trăm MB từ FileReader. Mảng Uint8Array là lựa chọn duy nhất để thao tác từng pixel mà không làm treo trình duyệt.

• Cầu nối WebAssembly (Wasm): Khi bạn muốn chạy code C/C++ hoặc Rust trên trình duyệt để lấy hiệu năng tối đa. Các ngôn ngữ bậc thấp này không hiểu mảng [] hay Object của JS là gì. Chúng chỉ nói chuyện với JS thông qua một vùng nhớ dùng chung (Shared Memory), và Typed Arrays chính là phiên dịch viên cho vùng nhớ đó.

• Tối ưu Game Engine / UI Frameworks: Khi hệ thống cần theo dõi hàng triệu State hoặc tọa độ. Tư duy ở đây giống hệt như việc áp dụng TailwindCSS trong UI: Bạn map chính xác class nào vào đúng chỗ đó, tĩnh, chặt chẽ, không cấp phát thừa thãi.

4. Show Code: Các thao tác thực chiến với Typed Arrays

Cú pháp sử dụng Typed Arrays rất trực quan. Dù là cấu trúc cấp thấp, nhưng API của nó lại thân thiện và có nhiều điểm tương đồng với mảng thông thường.

4.1. Khởi tạo cơ bản

// Khởi tạo một mảng chứa chính xác 10 số nguyên 32-bit (Tất cả vùng nhớ mặc định gán bằng 0)
const arr = new Int32Array(10); 
arr[0] = 42;
arr[1] = 99;

// Hoặc khởi tạo từ một mảng [] có sẵn
const floatArr = new Float32Array([1.5, 2.5, 3.14]);

4.2. Sử dụng các hàm lặp quen thuộc

Mặc dù bị cấm dùng các hàm làm thay đổi kích thước mảng (như push, pop), bạn vẫn có thể sử dụng các hàm duyệt mảng cực kỳ thoải mái như map, filter, reduce hay forEach.

const numbers = new Uint8Array([10, 20, 30, 40]);

// Nhân đôi các phần tử
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Kết quả: Uint8Array(4) [20, 40, 60, 80]

4.3. Thao tác với vùng nhớ dùng chung (Tính năng ăn tiền nhất)

Như đã giải thích ở kiến trúc 2 lớp, bạn có thể tạo ra nhiều "chiếc kính lúp" (View) khác nhau để soi vào cùng một khối RAM (ArrayBuffer). Đây là cách các Engine Game truyền dữ liệu siêu tốc.

// Cấp phát 1 khối RAM thô có kích thước chính xác 8 bytes
const buffer = new ArrayBuffer(8);

// Kính lúp 1: Đọc dưới dạng 8-bit (Sẽ chứa được 8 phần tử: 8 bytes / 1)
const view8 = new Uint8Array(buffer);

// Kính lúp 2: Đọc dưới dạng 32-bit (Sẽ chứa được 2 phần tử: 8 bytes / 4)
const view32 = new Int32Array(buffer);

// Nếu ta thay đổi dữ liệu qua kính lúp 1...
view8[0] = 255;
view8[1] = 255;

// ...Thì dữ liệu soi qua kính lúp 2 cũng TỰ ĐỘNG thay đổi theo!
// Vì bản chất cả 2 biến này đang trỏ chung vào 1 cục RAM vật lý bên dưới.
console.log(view32[0]); 

5. Những cú lừa, gài bẫy Developer

Khi chuyển từ mảng thường sang Typed Arrays, rất nhiều Dev "gà mờ" sẽ dính chưởng 2 lỗi kinh điển sau:

• 1. Không có push(), pop(), shift(): Typed Arrays là mảng TĨNH. Khi bạn khai báo new Int32Array(10), kích thước của nó vĩnh viễn là 10. Bạn không thể nhét thêm phần tử thứ 11 vào để nó phình to ra được.

• 2. Bẫy tràn bộ nhớ ngầm (Overflow/Underflow): Giả sử bạn dùng Uint8Array (giới hạn từ 0 đến 255). Nếu bạn cố tình gán arr[0] = 300 hoặc arr[0] = -5. JavaScript sẽ KHÔNG báo lỗi (No errors thrown). Thay vào đó, nó tự động chặt bỏ các bit thừa (hoặc quay vòng số) ra một con số hoàn toàn sai lệch (ví dụ 300 sẽ biến thành 44). Lỗi logic này không văng ra console nên cực kỳ khó debug!

6. Chốt sổ

Typed Arrays không phải là viên đạn bạc cho mọi dự án. Nếu bạn chỉ đang làm một Web Form bình thường, fetch vài cái API JSON để render ra danh sách bài viết, hãy cứ dùng mảng [] thông thường. Đừng phức tạp hóa vấn đề.

Nhưng một khi dự án của bạn chạm đến ngưỡng giới hạn của hiệu năng, phải xử lý thao tác với File, Audio, Video, hay đồ họa 3D phức tạp, Typed Arrays chính là vũ khí hủy diệt giúp phân loại giữa một Coder bình thường và một kỹ sư hiểu sâu về hệ thống.