12 טריקים של JavaScript שרוב ההדרכות מפספסים

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

במאמר זה, אני אראה לך 12 דרכים נהדרות לשפר ולהאיץ את קוד ה-JavaScript שלך. ברוב המקרים הם אוניברסליים.

אנו מזכירים: לכל קוראי Habr - הנחה של 10 רובל בעת הרשמה לכל קורס Skillbox באמצעות קוד ההטבה של Habr.

Skillbox ממליצה: קורס מעשי "Mobile Developer PRO".

סינון ערכים ייחודיים

מערכים

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

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

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

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

אורך מערך המטמון במחזורים

מחזורים

כאשר אתה לומד עבור לולאות, אתה פועל לפי הנוהל הסטנדרטי:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

עם זאת, עם תחביר זה, לולאת for בודקת שוב ושוב את אורך המערך בכל איטרציה.

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

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

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

דירוג קצר חשמלי (דירוג מקארתי)

מפעילים מותנים

האופרטור השלישוני הוא דרך מהירה ויעילה לכתוב הצהרות מותניות פשוטות (ולפעמים לא כל כך פשוטות):

x> 100? "יותר מ-100": "פחות מ-100";
x> 100? (x>200? "יותר מ-200": "בין 100-200"): "פחות מ-100";

אבל לפעמים אפילו האופרטור השלישוני מסובך יותר מהנדרש. אנחנו יכולים להשתמש ב-'and' && ו-'או' במקום || אופרטורים בוליאניים להערכת ביטויים מסוימים בצורה תמציתית עוד יותר. זה נקרא לעתים קרובות "קצר חשמלי" או "דירוג קצר חשמלי".

אֵיך מַפעִילִים אֶת זֶה

נניח שאנו רוצים להחזיר רק אחד משני תנאים או יותר.

שימוש ב-&& יחזיר את הערך השקרי הראשון. אם כל אופרנד מוערך כ-true, אז הביטוי האחרון שהוערך יוחזר.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

באמצעות || יחזיר את הערך האמיתי הראשון. אם כל אופרנד מוערך ל-false, אז הערך המוערך האחרון יוחזר.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

דוגמא 1

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

במקרה זה, אתה יכול להשתמש ב-if/else כדי לבדוק ש-foo הוא הסוג הנכון, אבל שיטה זו עשויה להיות ארוכה מדי. לכן, עדיף לקחת את ה"קצר חשמלי" שלנו.

return (foo || []).length;

אם ל-foo המשתנה יש אורך מתאים, אז זה יוחזר. אחרת נקבל 0.

דוגמא 2

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

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

בהתאם למקום שבו אנו משתמשים בו, קריאת this.state.data עשויה למנוע את הפעלת האפליקציה. כדי לפתור את הבעיה, נוכל לעטוף את זה בביטוי מותנה:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

אפשרות טובה יותר תהיה להשתמש באופרטור "או".

return (this.state.data || 'Fetching Data');

אנחנו לא יכולים לשנות את הקוד שלמעלה כדי להשתמש ב-&&. המפעיל 'משחזר נתונים' && this.state.data יחזיר את this.state.data ללא קשר אם הם לא מוגדרים או לא.

שרשרת אופציונלית

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

לדוגמה, נוכל לשנות את הדוגמה שלמעלה כדי לקבל this.state.data?..(). כלומר, הנתונים מוחזרים רק אם הערך אינו null.

לחלופין, אם זה משנה אם המדינה מוגדרת או לא, נוכל להחזיר את this.state?.data.

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

המרת סוג

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

עד שיצוין אחרת, כל הערכים ב-JavaScript הם אמת, למעט 0, "", null, undefined, NaN וכמובן שקר. האחרונים מזויפים.

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

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

המר למחרוזת

המרת סוג

המרה מהירה ממספר שלם למחרוזת יכולה להתבצע באופן הבא.

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

המר למספר שלם

המרת סוג

אנו מבצעים את הטרנספורמציה ההפוכה כך.

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

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

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

ייתכנו מצבים שבהם + יתפרש כאופרטור שרשור ולא כאופרטור חיבור. כדי להימנע מכך, עליך להשתמש בטילדות: ~~. אופרטור זה שווה ערך ל-n-1. לדוגמה, ~15 שווה ל-16.

שימוש בשתי טילדות בשורה שולל את הפעולה מכיוון ש- (- - n - 1) - 1 = n + 1 - 1 = n. במילים אחרות, ~-16 שווה ל-15.

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

פעולות

החל מ-ES7, אתה יכול להשתמש באופרטור האקספונציה ** כקיצור של עצמות. זה הרבה יותר מהיר משימוש ב- Math.pow(2, 3). זה נראה פשוט, אבל נקודה זו כלולה ברשימת הטכניקות, מכיוון שהיא לא מוזכרת בכל מקום.

console.log(2 ** 3); // Result: 8

אין לבלבל אותו עם הסמל ^, המשמש בדרך כלל להגדלה. אבל ב-JavaScript זה האופרטור XOR.

לפני ES7, קיצור הדרך ** יכול לשמש רק עבור החזקה של בסיס 2 באמצעות אופרטור המשמרת שמאלה בכיוון סיביות <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

לדוגמה, 2 << 3 = 16 שווה ערך ל-2 ** 4 = 16.

צף למספר שלם

פעולות / המרת סוג

אם אתה צריך להמיר צף למספר שלם, אתה יכול להשתמש ב- Math.floor(), Math.ceil() או Math.round(). אבל יש דרך מהירה יותר, לשם כך אנו משתמשים ב- |, כלומר באופרטור OR.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

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

n | 0 מסיר את כל מה שאחרי המפריד העשרוני, וקוצר את הצף למספר שלם.

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

הסרת מספרים נגררים

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

let str = "1553";
Number(str.substring(0, str.length - 1));

במקום זאת אנו פשוט כותבים:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

קישור אוטומטי

שיעורים

ניתן להשתמש בסימוני חצים ES6 בשיטות מחלקות, והכריכה משתמעת. זה אומר שאתה יכול להיפרד מביטויים שחוזרים על עצמם כמו this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
 
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

חיתוך מערך

מערכים

אם אתה צריך להסיר ערכים ממערך, יש שיטות מהירות יותר מאשר splice().

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

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

אבל יש שיטה אחרת, ומהירה יותר. אם המהירות היא מה שחשוב לך, הנה הבחירות שלנו:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Result: [0, 1, 2, 3]

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

מערכים
טכניקה זו דורשת שימוש בשיטת slice() .

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

עיצוב קוד JSON

JSON

ייתכן שכבר השתמשת ב-JSON.stringify. האם ידעת שזה עוזר לעצב את ה-JSON שלך?

שיטת stringify() לוקחת שני פרמטרים אופציונליים: פונקציית תחליף, שבה ניתן להשתמש כדי לסנן את ה-JSON המוצג, וערך רווח.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

זה הכל, אני מקווה שכל הטכניקות הללו היו שימושיות. איזה טריקים אתה מכיר? כתבו אותם בתגובות.

Skillbox ממליצה:

• קורס מעשי שנתיים "אני מפתח אתרים PRO".
• קורס מקוון "מפתח C# מ-0".
• קורס מעשי בן שנה "מפתח PHP מ-0 ל-PRO".

מקור: www.habr.com