`ArrayBuffer` בג'אווהסקריפט

מאמר זה מסביר את ArrayBuffer בג'אווהסקריפט.

נסביר הכל על ArrayBuffer, מהבסיס ועד לשימושיו, הסוגים הקשורים אליו והשימושים המעשיים.

YouTube Video

ArrayBuffer בג'אווהסקריפט

ArrayBuffer בג'אווהסקריפט הוא אובייקט לטיפול בנתוני בינארי ברמת נמוכה, ושימושי במיוחד לעיבוד נתוני בינארי ב-WebAPIs, פעולות קבצים ותקשורת רשת.

מהו ArrayBuffer

ArrayBuffer הוא מבנה נתונים לטיפול בנתונים בינאריים באורך קבוע. זה מאפשר טיפול בנתונים בינאריים גולמיים שלא ניתן לטפל בהם באמצעות מערכים או אובייקטים רגילים של JavaScript.

ArrayBuffer עצמו אינו יכול לנהל נתונים בצורה ישירה. במקום זאת, הנתונים נקראים ונכתבים באמצעות TypedArray או DataView המבוססים על ArrayBuffer.

ArrayBuffer שימושי במיוחד במצבים הבאים:.

• בעת עיבוד נתונים בינאריים שהתקבלו מהרשת
• כאשר נדרש שיתוף נתונים יעיל ב-Web Worker.
• כאשר מבצעים עיבוד תמונה או רינדור תלת-ממדי עם Canvas או WebGL.
• כאשר מטפלים בקבצים (במיוחד קבצים בינאריים).

יצירת ArrayBuffer

ראשית, נתחיל עם כיצד ליצור מופע של ArrayBuffer. ArrayBuffer מקצה זיכרון ביחידות בית, ולכן יש לציין את גודלו בעת היצירה.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16

• בדוגמה זו מוקצה זיכרון בגודל 16 בתים. מאגר זה אינו מכיל נתונים בשלב זה.

ניהול נתונים באמצעות TypedArray

אי אפשר לגשת ישירות ל-ArrayBuffer, ולכן משתמשים ב-TypedArray לקרוא ולכתוב נתונים. TypedArray מספק מבטים מסוגים שונים כמו Int8Array ו-Float32Array, שמאפשרים גישה יעילה לנתונים בינאריים.

דוגמה לשימוש ב-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 יכול לאחסן נתונים בכל בית, ולאפשר למאגר להכיל 8 אלמנטים. באופן זה, באמצעות שימוש בסוגים שונים של תצוגות, ניתן לנהל נתונים בצורה יעילה.

דוגמאות נוספות ל-TypedArray

JavaScript כוללת סוגים שונים של TypedArray. לדוגמה, אם ברצונך לעבוד עם מספרים שלמים ללא סימן בגודל 32 ביט, תשתמש ב-Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456

• Uint32Array יכול לאחסן נתונים ביחידות של 4 בתים, ולכן המאגר יכול להכיל ארבעה אלמנטים. חשוב לבחור את ה-TypedArray המתאים בהתאם לסוג הנתונים שאיתו אתה עובד.

ניהול נתונים גמיש באמצעות DataView

בעוד ש-TypedArray יכול לעבוד רק עם סוג נתונים קבוע, באמצעות DataView ניתן לכתוב נתונים מכל סוג לכל מיקום. דבר זה יעיל במיוחד כאשר עובדים עם באפרים המכילים סוגי נתונים מעורבים.

 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

באמצעות DataView, ניתן להגדיר היסט בתים ולקרוא או לכתוב נתונים מסוגים שונים. זהו כלי מאוד יעיל כאשר עובדים עם מבני בינארי מורכבים כמו פרוטוקולי רשת או פורמטי קבצים.

שיקולי Endianness (סדר בתים)

כאשר עובדים עם DataView, יש להתייחס גם לשיקולי Endianness (סדר הבתים). בהתאם לארכיטקטורת המחשב, סדר אחסון הנתונים בזיכרון עלול להיות שונה. לשיטות של DataView יש אפשרויות לציין את ה-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

אם לא תציין את ה-Endianness הנכון, ייתכן שהנתונים לא יתפרשו כראוי בסביבות שונות, ולכן חשוב במיוחד להיות זהירים בעת תקשורת רשת או עבודה עם קבצים.

שימושים עבור ArrayBuffer

ArrayBuffer הוא כלי חזק שמשתמשים בו רבות בפיתוח ווב וב-API של דפדפנים. בואו נבחן כמה דוגמאות לשימושים.

קבלת ועיבוד נתונים בינאריים

לדוגמה, ניתן לקבל נתונים בינאריים משרת באמצעות XMLHttpRequest או fetch API ולעבוד איתם כ-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    });

• בדוגמה זו, נתוני תמונה מתקבלים מהשרת ומטופלים כ-Uint8Array. באופן זה, ניתן לעבד נתונים שהתקבלו מהשרת באמצעות ArrayBuffer.

שימוש ב-WebGL

ב-WebGL, משתמשים ב-ArrayBuffer לניהול יעיל של נתונים בינאריים כמו נתוני קודקודים ונתוני צבע.

 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);

• בדוגמה זו, משתמשים ב-Float32Array כדי להגדיר את קואורדינטות הקודקודים של מלבן ולשלוח אותם לבאפר ב-WebGL.

ניהול זיכרון ו-ArrayBuffer

ה-ArrayBuffer מנהל זיכרון ברמת הבתים, מה שהופך אותו ליעיל מאוד, אך יש להיות זהירים עם ניהול הזיכרון. בעת התמודדות עם נתונים בינאריים גדולים, חשוב לשחרר את ה-ArrayBuffer שאינם בשימוש בצורה נכונה. למרות ש-JavaScript מבצעת איסוף זבל באופן אוטומטי, אם מופנות הפניות אל ה-ArrayBuffer, זה עלול לגרום לדליפות זיכרון.

סיכום

ה-ArrayBuffer מספק את הבסיס לעיבוד נתונים בינאריים ב-JavaScript. באמצעות שילוב בין TypedArray ו-DataView, ניתן להתמודד עם נתונים בינאריים בצורה יעילה וגמישה. הכלים הללו הם חיוניים לפיתוח אתרים, במיוחד במצבים רבים הכוללים עיבוד נתונים בינאריים כמו תקשורת רשת ו-WebGL. על ידי הבנה נכונה ושימוש מתאים בהם, ניתן לשפר את הביצועים והיעילות.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video