עבודה עם מידע בינארי ב JavaScript

פוסט זה כולל טיפ קצר בנושא פיתוח Front End. אם אתם רוצים ללמוד יותר לעומק על פיתוח Front End מהבסיס ועד הנושאים המתקדמים תשמחו לשמוע שבניתי קורס וידאו מקיף בנושא זה הכולל מעל 50 שיעורי וידאו והמון תרגול מעשי.
למידע נוסף והצטרפות לקורס בקרו בדף קורס Front End באתר.
 

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

1. מערכים ב JavaScript

התקן של JavaScript מגדיר שני מבנים שחשוב להכיר. הראשון הוא Buffer שזה אוסף של ביטים בזיכרון, והשני הוא Typed Array, שזה ממשק שעוטף את ה Buffer ומאפשר לנו לגשת לביטים כשאנחנו מתיחסים אליהם בתור מספרים. חוצץ יש רק אחד אבל Typed Arrays יש הרבה לפי סוגי המידע שיכולים להיות שמורים בחוצץ:

הרבה ממשקים של Deno ו Node יחזירו לכם Buffer ואתם תצטרכו לבנות מערך של בתים סביבו כדי לגשת אליו. אפשר גם ליצור Buffer בצורה ידנית כדי לראות איך המערכים השונים ניגשים לאותו מידע. בואו ננסה את זה, אפשר בחלון Console של דפדפן או ב REPL של דינו:

> const buffer = new ArrayBuffer(16);
> buffer.byteLength
16

// create arrays around the buffer
> const a = new Uint8Array(buffer)

// or around just part of the buffer
> const b = new Uint8Array(buffer, 0, 4)
> const c = new Uint16Array(buffer)
> const d = new Float32Array(buffer)

// look at the sizes
a.length === 16
b.length === 4
c.length === 8
d.length === 4

עכשיו יש לי 4 מערכים שמסתכלים על אותו מידע אבל בצורות שונות. אם אני משנה את המידע ממערך אחד כל ה-4 יראו את השינוי, אבל בדרך אחרת:

d[0] = 2.5

// a is:
0, 0, 32, 64, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0

// b is:
0, 0, 32, 64

// c is:
0, 16416, 0, 0, 0, 0, 0, 0

// d is:
2.5, 0, 0, 0

הסיבה היא שאותם הביטים שמייצגים את המספר 2.5 במערך של Float מייצגים מספרים אחרים במערך של Int-ים. בדרך כלל אנחנו ניצור רק מערך אחד מסביב ל Buffer לפי צורת העבודה שהכי מתאימה לקוד שנכתוב.

2. בניית מערך של בתים

ראינו איך לבנות מערך של בתים מתוך Buffer אבל האמת שאפשר לבנות את שני הדברים ביחד עם הבנאי של המערך. הקוד הבא בונה מערך של 10 בתים וחוצץ באותו גודל:

const a = new Uint8Array(10)

אני יכול להגיע לחוצץ עם a.buffer, לראות את הגודל עם a.length וכמובן לשנות בתים בתוך החוצץ באמצעות שינוי התאים.

3. קריאה וכתיבה למערך

ראינו כבר שאפשר לכתוב מספרים לחוצץ דרך המערך עם:

a[0] = 1
a[1] = 2

עוד כמה פונקציות ששווה להכיר:

  1. fill - מקבל ערך ומכניס אותו לכל התאים במערך.

  2. at - מחזיר איבר מהמערך ותומך באינדקסים שליליים כדי לקבל איברים מהסוף

  3. slice - מחזיר מערך חדש שמכיל רק חלק מסוים מהמערך

  4. with - מחזיר מערך עם עדכון לתא בודד באינדקס שבחרנו

דוגמה לשימוש בפוקנציות אלה:

> const a = new Uint8Array(8)
undefined
> a.fill(4)
Uint8Array(8) [
  4, 4, 4, 4,
  4, 4, 4, 4
]

> const b = a.slice(0, 4)
undefined
> a[0] = 10
10
> b
Uint8Array(4) [ 4, 4, 4, 4 ]

const c = a.with(0, 99);

> a
Uint8Array(8) [
  10, 4, 4, 4,
   4, 4, 4, 4
]
> b
Uint8Array(4) [ 4, 4, 4, 4 ]
> c
Uint8Array(8) [
  99, 4, 4, 4,
   4, 4, 4, 4
]