ECMAScript 6 – פירוק מערך

עבודה עם מערכים ב-ES6 - איך לפרק או לבנות מערך בדרכים חדשות ומעניינות.

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

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


 var obj = {};
    obj.first = 'John';
    obj.last = 'Doe';

אנחנו גם יכולים לחלץ מידע ממערכים או מאובייקטים. למשל:


var f = obj.first; 
    var l = obj.last;

עד כאן אין פה משהו חדש. אז מה בכל זאת החידוש? ב-ECMAScript 6 אנחנו יכולים לחלץ מהמערך או מהאובייקט באמצעות תבנית. כך שהכל הופך להיות קריא יותר. למשל, בדוגמה שלעיל, אם אני מכיר את מבנה האובייקט, אני יכול לחלץ את ה-last ואת ה-first למשתנה l ו-f בקלות רבה. הנה:


var object = {first: 'John', last: 'Doe'};
var {first: f, last: l} = object;
console.log(f); //"John"
console.log(l); //"Doe"

נכון שזה יותר נחמד? אפשר לעשות את זה גם במערכים. ECMAScript 6 מאפשרת לנו לעשות את זה ממש בקלות. הנה:


var iterable = ['a', 'b'];
var [x, y] = iterable;
console.log(x); //a
console.log(y); //b

כמובן שאני לא חייב לקחת את כל המערך או את כל האובייקט אלא רק חלקים מתוכם. פה למשל, אני לוקח רק את התכונה הראשונה מהאובייקט והאיבר הראשון מהמערך:


var object = {first: 'John', last: 'Doe'};
var {first: f} = object;
console.log(f); //"John"

var iterable = ['a', 'b', 'c'];
var [x] = iterable;
console.log(x); //a

אפשר להמשיך ולהתפרע. אני יכול לקחת ערך (או מערך, או אובייקט) אפילו מאובייקט מאוד מאוד מורכב. כל עוד אני מפרט את הערך שלו. למשל:


var complicatedObject = { a: [{ foo: 123, bar: 'abc' }, {}], b: true };
var { a: [{foo: newVarFromComplicatedObject}] } = complicatedObject; 
console.log(newVarFromComplicatedObject); // f = 123

אם כמובן האובייקט לא יכיל a או את foo, אני אקבל undefined. אם אני רוצה ערך דיפולטיבי, אפשר גם אפשר.


var emptyArray = [];
var [myValue = 5] = emptyArray;
console.log(myValue); //5 - because of default. otherwise - undefined

בדוגמה הנוכחית, לקחתי מערך והשתמשתי בפירוק על מנת להכניס את הערך הראשון מתוכו למשתנה myValue. ברם אולם המערך ריק! מה שהיה צריך לקרות זה ש-myValue היה מקבל undefined. אך לא אלמן ישראל, השתמשתי בערך דיפולטיבי (בדיוק כמו בערך דיפולטיבי של פונקציה שעליו עברנו באחד המאמרים הקודמים).

אפשר לעבוד גם עם תבנית, כמו שלמדנו באחד המאמרים הקודמים. איך? ככה:


var someArray = ['a', 'b', 'c'];
var  [x,...y] = someArray; 
console.log(x); //"a"
console.log(y); //["b", "c"]

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

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


var someArray = [1,2,3,4]

function f ([ x, y ]) {
    console.log(x, y);
}

f(someArray); //1,2

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

See the Pen Deconstruction in ES6 by Ran Bar-Zik (@barzik) on CodePen.

פוסטים נוספים שכדאי לקרוא

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

הסבר על הום אסיסטנט, מערכת הקוד הפתוח לבית חכם ואיך לחבר אליה מיקרובקרים.

בינה מלאכותית

להריץ ממשק של open-webui על הרספברי פיי

להפעיל ממשק של צ׳אט ג׳יפיטי שאפשר לגשת אליו מכל מחשב ברשת הביתית על רספברי פיי עם מודל בשם tinydolphin שרץ על רספברי פיי.

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

פתרונות ומאמרים על פיתוח אינטרנט

SSG עם next

אחרי שלמדנו במאמר הקודם מה זה SSR והבנו שלא מדובר בקליע כסף שפותר את כל הבעיות שלנו, נלמד על SSG שיכול להקל על כמה מהבעיות של SSR.

גלילה לראש העמוד