Uint8Array چیست و کاربردهای آن
- علی محمودی
- بدون دیدگاه
Uint8Array: گنجینه داده‌های باینری شما در جاوا اسکریپت
Uint8Array اصلا چیه؟
فرض کنید شما یه سری داده دارید که باید به صورت “خام” یا “بایت به بایت” باهاشون کار کنید. مثلاً وقتی یه عکس رو آپلود می‌کنید، یه فایل صوتی رو پخش می‌کنید، یا حتی اطلاعات رو از شبکه می‌گیرید. این داده‌ها معمولاً به صورت متنی (مثل رشته‌ها) نیستند، بلکه به صورت باینری (صفر و یک) ذخیره شدن.
اینجاست که Uint8Array وارد عمل میشه! Uint8Array در واقع یک نوع آرایه تایپ شده (Typed Array) در جاوا اسکریپته. فرقش با آرایه‌های معمولی چیه؟ آرایه‌های معمولی جاوا اسکریپت می‌تونن هر نوع داده‌ای رو تو خودشون نگه دارن (عدد، رشته، شیء و…). اما Uint8Array فقط می‌تونه اعداد صحیح بدون علامت 8 بیتی رو ذخیره کنه. یعنی هر عنصر داخل این آرایه، یک عدد بین 0 تا 255 (معادل یک بایت) هست.
این محدودیت باعث میشه که Uint8Array برای کار با داده‌های باینری فوق‌العاده کارآمد باشه، چون دقیقاً نحوه ذخیره شدن اطلاعات در حافظه کامپیوتر رو شبیه‌سازی می‌کنه.
چرا باید از Uint8Array استفاده کنیم؟
حالا که فهمیدیم چیه، بریم سراغ اینکه چرا باید ازش استفاده کنیم:
کارایی بالا در کار با داده‌های باینری: وقتی با حجم زیادی از داده‌های باینری سر و کار دارید (مثلاً فایل‌های حجیم)، Uint8Array بهینه‌ترین راه برای مدیریت اون‌هاست. چون مستقیماً با حافظه کار می‌کنه و سربار کمتری نسبت به آرایه‌های معمولی داره.
خوانایی و دقت: با استفاده از Uint8Array، میتونید مطمئن باشید که هر عنصر دقیقاً یک بایت رو نشون میده و همین باعث میشه کدتون خواناتر و قابل پیش‌بینی‌تر باشه.
ارتباط با APIهای سطح پایین: بسیاری از APIهای جدید وب (مثل File API، WebSockets، WebGL و WebRTC) برای تبادل داده‌های باینری از Typed Arrays، و به خصوص Uint8Array استفاده می‌کنن.
انتقال داده‌ها: فرض کنید می‌خواید یه فایل رو از مرورگر به سرور بفرستید. به جای اینکه فایل رو به رشته تبدیل کنید (که ممکنه حجمش رو زیاد کنه و مشکلاتی ایجاد کنه)، میتونید اون رو به صورت Uint8Array بخونید و مستقیماً ارسال کنید.
کاربردهای عملی Uint8Array
بریم چند تا مثال کاربردی ببینیم تا بهتر متوجه بشید:
- خواندن فایل‌ها:
وقتی از FileReader برای خوندن فایل‌ها استفاده می‌کنید، میتونید محتوای فایل رو به صورت ArrayBuffer بگیرید. بعداً میتونید این ArrayBuffer رو به یک Uint8Array تبدیل کنید تا به بایت‌های خام فایل دسترسی داشته باشید.
const reader = new FileReader();
reader.onload = function(event) {
const arrayBuffer = event.target.result;
const uint8Array = new Uint8Array(arrayBuffer);
console.log("بایت‌های فایل:", uint8Array);
// حالا میتونید با این بایت‌ها کار کنید
};
// مثلاً خوندن یک فایل تصویری
// reader.readAsArrayBuffer(fileInput.files[0]);
2. ارسال و دریافت داده‌ها از طریق شبکه (WebSockets):
برای ارسال داده‌های باینری از طریق WebSocket، میتونید یک Uint8Array بسازید و اون رو مستقیماً بفرستید.
const ws = new WebSocket("ws://localhost:8080");
ws.onopen = () => {
const data = new Uint8Array([72, 101, 108, 108, 111]); // 'Hello' در ASCII
ws.send(data);
};
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const receivedData = new Uint8Array(event.data);
console.log("داده‌های باینری دریافت شده:", receivedData);
}
};
3. پردازش تصویر در Canvas:
وقتی با ImageData در Canvas کار می‌کنید، پیکسل‌ها به صورت یک Uint8ClampedArray (که شبیه Uint8Array هست ولی مقادیر رو بین 0 و 255 نگه می‌داره) ذخیره میشن. با دسترسی به این آرایه، میتونید پیکسل به پیکسل یک تصویر رو تغییر بدید.
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// فرض کنید یک تصویر روی canvas کشیده شده
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data; // این یک Uint8ClampedArray هست
// مثلاً برای سیاه و سفید کردن تصویر
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // Red
data[i + 1] = avg; // Green
data[i + 2] = avg; // Blue
// data[i + 3] // Alpha (بدون تغییر)
}
ctx.putImageData(imageData, 0, 0);
4. رمزنگاری و هش کردن داده‌ها:
کتابخانه‌های رمزنگاری اغلب از Uint8Array برای ورودی و خروجی داده‌ها استفاده می‌کنند، چون دقیقاً با بایت‌ها کار می‌کنند.
چطور یک Uint8Array بسازیم؟
چند روش برای ساخت یک Uint8Array وجود داره:
* با طول مشخص:
const myUint8Array = new Uint8Array(5); // یک آرایه 5 عنصری پر از صفر
console.log(myUint8Array); // Uint8Array [0, 0, 0, 0, 0]
* از یک آرایه معمولی یا Iterable:
const data = [10, 20, 30, 40, 50];
const myUint8Array = new Uint8Array(data);
console.log(myUint8Array); // Uint8Array [10, 20, 30, 40, 50]
* از یک ArrayBuffer (که رایج‌ترین حالت برای داده‌های باینری دریافتی هست):
const buffer = new ArrayBuffer(8); // یک بافر 8 بایتی
const uint8ArrayFromBuffer = new Uint8Array(buffer);
console.log(uint8ArrayFromBuffer); // Uint8Array [0, 0, 0, 0, 0, 0, 0, 0]
// میتونید یک قسمتی از بافر رو هم بگیرید
const partOfBuffer = new Uint8Array(buffer, 2, 4); // از بایت 2 تا 4 بایت
console.log(partOfBuffer); // Uint8Array [0, 0, 0, 0]
جمع‌بندی :
این ابزار قدرتمند به شما کمک می‌کنه تا به شکل بهینه‌تر و دقیق‌تری با داده‌های باینری در جاوا اسکریپت کار کنید. اگر دارید روی پروژه‌ای کار می‌کنید که شامل پردازش فایل، ارتباطات شبکه سطح پایین یا گرافیک هست، حتماً از Uint8Array کمک بگیرید.
به یاد داشته باشید، دنیای وب پر از داده‌های باینریه و تسلط بر ابزارهایی مثل Uint8Array به شما کمک می‌کنه تا کارهای خیلی جذاب و پیچیده‌تری رو انجام بدید.
آیا تا به حال با Uint8Array کار کرده بودید؟ چه کاربردهای دیگه‌ای رو برای اون می‌شناسید؟ خوشحال می‌شم تجربیاتتون رو به اشتراک بذارید!
نوشته های مرتبط
