TypedArray ב-JavaScript

מאמר זה מסביר את השימוש ב-TypedArray ב-JavaScript.

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

YouTube Video

TypedArray ב-JavaScript

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

המבנה הבסיסי של TypedArray

המרכיבים העיקריים של TypedArray הם ArrayBuffer ו-TypedArray עצמו.

• ArrayBuffer: מאגר (buffer) בגודל קבוע שמקצה נתונים בינאריים בזיכרון. מאגר זה הוא אזור נתונים בלבד ואינו נגיש לקריאה או כתיבה ישירה.
• TypedArray: אובייקט עטיפה שמחיל סוג נתונים ספציפי על המאגר, ומאפשר גישה ועיבוד נתונים.

דוגמה בסיסית לשימוש

להלן דוגמה ליצירת ArrayBuffer ולאחר מכן יצירת TypedArray המבוסס עליו.

 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

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

סוגי TypedArray

ישנם סוגים שונים של TypedArray עבור כל סוג מידע. העיקריים שבהם הם כדלקמן.

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

טיפול במופעי TypedArray

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

הגדרת ערכים

ב-TypedArray ניתן להקצות מספר ערכים בו זמנית בעזרת השיטה 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

• הקוד הזה משתמש בשיטה set כדי להקצות ערכים מרובים בבת אחת ל-Int16Array, ומציג כל איבר במסוף.

קבלת תת-מערך

כדי לקבל חלק ממופע ה-TypedArray כתת-מערך, השתמשו בשיטה subarray. תת-מערך זה מתייחס לאותו ה-buffer של מופע ה-TypedArray המקורי.

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]

• הקוד הזה מאחזר טווח מסוים של איברים מתוך Int16Array באמצעות השיטה subarray ומציג את תת-המערך במסוף.

העתקת buffers

ניתן להעתיק את ה-buffer של מופע TypedArray אחד למופע TypedArray אחר. באמצעות השיטה set, ניתן להעתיק מעמדה מסוימת.

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]

• הקוד הזה מעתיק את התוכן של Uint8Array למערך אחר באמצעות השיטה set, ומציג את המערך המועתק במסוף.

שימוש ב-DataView

בעוד ש-TypedArray מטפל ב-buffers עם סוג נתונים קבוע, DataView הוא ממשק שמאפשר טיפול גמיש בנתונים בינאריים עם מיקומים וסוגי נתונים משתנים. כך ניתן לערבב סוגי נתונים שונים בתוך אותו buffer.

 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

• הקוד הזה משתמש ב-DataView כדי לכתוב סוגי נתונים שונים—מספרים שלמים בגודל 32 ביט ומספרים עשרוניים צפים בגודל 32 ביט—על אותו buffer ובודק את התוצאות.

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

שימושים אפשריים ב-TypedArray

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

עיבוד תמונה

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

 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}

• הקוד הזה יוצר נתוני תמונה ברוחב של 100 ובגובה של 100 בפורמט RGBA באמצעות Uint8Array, ומגדיר את כל הפיקסלים לאדום.

אינטגרציה עם WebAssembly

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

עיבוד נתוני אודיו ווידאו

TypedArray ממלא תפקיד חשוב בעיבוד אודיו ווידאו. ניתן לאחסן גלי נתוני אודיו ב-Float32Array לצורך השמעה ועיבוד.

סיום

TypedArray הוא כלי עוצמתי לטיפול יעיל בכמויות גדולות של נתונים בינאריים. הוא שימושי במיוחד ביישומים קריטיים לביצועים כמו עיבוד תמונה, WebAssembly ועיבוד נתוני אודיו/וידאו. TypedArray כולל API שדומה למערכים רגילים, אך ישנם מגבלות לגבי שימוש בזיכרון וסוגי נתונים, ולכן נדרשת הבחנה נכונה בשימוש.

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

YouTube Video