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

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