אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » ECMAScript 6 » מתודות חדשות ב-ECMAScript 6

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

רן בר-זיק ינואר 15, 2017 7:07 am תגובה אחת

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

המאמר הקודםECMAScript 6 – שימוש בארגומנטים
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

חוץ מכל הפיצ'רים המגניבים שיש ב-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.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
למדריך המלא של ECMAScript 6
ECMAScript 6

תגובה אחת

  1. david הגב ינואר 15, 2017 בשעה 11:00 am

    "כמו הסיכוי של אייל גולן לצאת בלי כתב אישום פלילי מבת מצווה. אפשרי, אבל קלוש מאוד."
    :):)))

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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