מתודות חדשות ב-ECMAScript 6

חוץ מכל הפיצ'רים המגניבים שיש ב-ES6, יש גם כמה הרחבות או מתודות חדשות שמקילות לנו על החיים. אלו מכם שהשתמשו בספריות עזר כגון lodash ירגישו ממש בבית כי חלק גדול מההרחבות האלו הגיעו בעצם מ-lodash. מה שכן, זה ממש מגניב שיש אותן והן פותרות בעיות משמעותיות. אז בואו ונתחיל:

Object.assign – להכניס תכונות של אובייקט אחד או יותר לתוך אובייקט מטרה

בגדול זה קל, יש לי אובייקט אחד, שהוא אובייקט המטרה שלי, ואני רוצה להכניס אליו את כל התכונות של אובייקט אחר או יותר. עם Object.assign זה ממש קל ללא צורך בשימוש בלולאות אלו ואחרות.

var firstObj = {};
var src = {a: 1, b: 2};
var src2 = {d: 1, e: 2};

Object.assign(firstObj, src, src2);

console.log(firstObj); 
//Object {a: 1,b: 2,d: 1,e: 2}

מה הלך פה? יש לי את firstObj, שהוא אובייקט ריק (הוא לא חייב להיות ריק). אני רוצה שהתכונות a,b של אובייקט src ותכונות d,e של אובייקט src2 ייכנסו אליו. בעבר, הייתי יכול לעשות את זה רק עם לולאה. אבל עכשיו אני יכול לעשות את זה עם Object.assign.

כדאי לשים לב שבדיוק כמו בלולאות, האחרון תמיד ידרוס את הראשון. למשל:

var firstObj = {};
var src = {a: 1, b: 2};
var src2 = {a: 4, e: 2};

Object.assign(firstObj, src, src2);

console.log(firstObj); 
//Object {a: 4,b: 2,e: 2}

כאן גם ל-src וגם ל src2 יש את תכונה a. מה שייכנס לאובייקט המטרה הוא התכונה של src2 כי הוא בא אחרון ברשימת הארגומנטים שהעברנו ל-Object.assign.

חיפוש במערך עם find

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

var inventory = [
    {name: 'apple', quantity: 2},
    {name: 'banana', quantity: 0},
    {name: 'pineapple', quantity: 5},
    {name: 'avocado', quantity: 5},
];

נניח שאני רוצה לחפש משהו בתוכו? למשל שיביא לי את כל האיברים של התפוחים. איך עושים את זה? אפשר להשתמש ב-filter או בשיטות אחרות. אבל השיטה האלגנטית ביותר היא להשתמש במתודת find שקיימת רק למערך. המתודה הזו מקבלת פונקצית חיפוש פשוטה, ממש כמו פילטר. אני יכול להעביר שם של פונקציה, את הפונקציה עצמה או פונקצית arrow – בדוגמה אפשר לראות את כל השיטות:

var inventory = [
    {name: 'apple', quantity: 2},
    {name: 'banana', quantity: 0},
    {name: 'pineapple', quantity: 5},
    {name: 'avocado', quantity: 5},
];

function findApple(el) { 
    return el.name === 'apple';
}

console.log(inventory.find(findApple)); // { name: 'apple', quantity: 2 }
console.log(inventory.find(function(el) {return el.name === 'apple';})); // { name: 'apple', quantity: 2 }
console.log(inventory.find(el => el.name === 'apple'); // { name: 'apple', quantity: 2 }

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

var inventory = [
    {name: 'apple', quantity: 3},
    {name: 'banana', quantity: 0},
    {name: 'pineapple', quantity: 1},
    {name: 'avocado', quantity: 0},
];

function findNotZero(el) { 
    return el.quantity > 0;
}

console.log(inventory.find(findNotZero)); // { name: 'apple', quantity: 3 }
console.log(inventory.find(function(el) {return el.quantity > 0})); // { name: 'apple', quantity: 3 }
console.log(inventory.find(el => el.quantity > 0)); // { name: 'apple', quantity: 3 }

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

חיפוש במחרוזות טקסט

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

var myString = "hello";

console.log(myString.startsWith("he")) // true
console.log(myString.endsWith("llo")) // true
console.log(myString.includes("ell")) // true

תראו איזה יופי, שלוש מתודות חמודות להפליא ומאוד מאוד אינטואטיביות startsWith בודקת אם המחרוזת מתחילה במה שאני מציין, endsWith בודקת אם המחרוזת מסתיימת במה שאני מציין ו-includes בודקת אם יש בטקסט את מה שאני מציין. פשוט מאוד, לא?

אפשר גם להעביר offset למתודות האלו, אבל אין באמת צורך לעשות את זה לפי דעתי. אם אתם צריכים offset, סימן שאתם צריכים להשתמש ב-indexOf.

הכפלה של מחרוזות טקסט

אם יש לכם טקסט ואתם רוצים להכפיל אותו מסיבה כלשהי שנפלאה מבינתי, אפשר להשתמש ב-repeat, מתודה שצמודה למחרוזת טקסט בלבד שתכפיל את הטקסט כרצונכם:

var myString = 'abc';

console.log(myString.repeat(2)); // "abcabc"

console.log(myString.repeat(3)); // "abcabcabc"

כמובן שאם תשימו 0, התוצאה שתקבלו זו מחרוזת טקסט ריקה ואם תשימו משהו שהוא לא מספר תקבלו שגיאה.

בדיקה אם מספר הוא חיובי או שלילי

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

console.log(Math.sign(7))   // 1
console.log(Math.sign(0))   // 0
console.log(Math.sign(-0))  // -0
console.log(Math.sign(-7))  // -1
console.log(Math.sign(NaN)) // NaN

אם המספר הוא שלילי, נקבל 1-, אם הוא חיובי נקבל 1 ואם הוא אפס חיובי אז נקבל אפס ואם זה אפס שלילי אז נקבל מינוס אפס. ואם אתם תוהים מה זה אפס שלילי ומה זה אפס חיובי – זה בגלל הערך ההקסדצימלי של אפס שיכול להיות 0000 ויכול להיות 1000 אבל בפועל אין משמעות ו 0 === 0- לפחות בג'אווהסקריפט.

מציאת המספר אחרי הנקודה

לפעמים, אם יש לנו שבר, אנחנו רוצים למצוא את המספר השלם. למשל אם יש לנו 42.4 אנחנו רוצים את ה-42 ואם יש לנו 1.1- אנחנו רוצים את ה-1. בדרך כלל היינו משתמשים בנוסחה כזו:

function mathTrunc (x) {
    return (x < 0 ? Math.ceil(x) : Math.floor(x));
}
console.log(mathTrunc(42.7)) // 42
console.log(mathTrunc( 0.1)) // 0

עם ES6 אנחנו יכולים להשתמש ב-Math.trunc כדי לעשות את זה:

console.log(Math.trunc(42.7)) // 42
console.log(Math.trunc( 0.1)) // 0

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

עד כאן המדריך ל-ES6, עברנו על כל הפיצ'רים החדשים של ECMAScript 6 בסדרת המאמרים הזו. יש מעט דברים שלא דיברתי עליהם – כמו TypedArray ועוד דברים שקשורים לעיבוד מידע בינארי שאני פשוט לא מבין בהם מספיק כדי להדריך מישהו בהם. מלבד זאת – הכל מכוסה. אני ממליץ להמשיך ללימוד babel ו-typescript.

אהבתם? לא אהבתם? דרגו!

(11 הצבעות, ממוצע: 4.64 מתוך 5)