קודקודייל
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
קודקודייל
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
ראשי ♦ Javascript ♦ loadash – מי אתה ולמה כולם משתמשים בך?

loadash – מי אתה ולמה כולם משתמשים בך?

וינר יאיר 27 במאי 2022 אין תגובות

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

שימושים נפוצים עם loadash

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

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

להלן דוגמאות נפוצות

let users = [{ firstName: 'Codcodile', lastName: 'Code'}];

const someArrayList = ['Bread', 'Milk', 'Tea', 'Coffee', 'Sparkling drinks', 'Juices', 'Energy drink', 'Mocktails', 'Milkshakes', 'Milk', 'Tea', 'Coffee', 'Sparkling drinks',]


const chunkArr = _.chunk(someArrayList, 3);
console.log(chunkArr)
// תחלק את המערך לתת מערכים בגודל 3 ואת השארית מבערך גם בתת מערך


const joinArrStr = _.join(someArrayList, '|');
console.log(joinArrStr)
// מחזירה סטינג של כל המערך . דומה מאד ל ג'ויין שאנחנו מכירים כבר . ישנם הרבה שכתובים שעשו לפונקציות קיימם ב
// JS

const withoutArr = _.without(someArrayList, 'Sparkling drinks','Energy drink');
console.log(withoutArr)
// מחזירה מערך ללא סטרינגים שנבחרו

const diffArr = _.difference(someArrayList, ['Sparkling drinks','Energy drink','Mocktails', 'Milkshakes']);
console.log(diffArr)
// הפונקציה בודקת בין המערכים ומחזירה מעך חדש עם האייטמים שאינם זהים בין המערכים


let items = [16, 15, 18, 16, 19, 15, 15, 5, 16];
items = _.uniq(items);
console.log(items);
// מחזירה מערך כך שאין אייטמים כפולים במערך המקורי



_.forEach(users, function(user, index) {
    user.fullName = user.firstName + ' ' + user.lastName;
});
// משנה את האובייקט שלנו במקרה הזה מוסיפה אליו שם מלא. מאד דומה לפור איץ' הרגיל שאנחנו מכירים 

console.log(users);

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

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

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

const user = {
    name: 'codcodile',
      lastname: 'code',
      language: {code: 'js'}
    }
    
    const user2 = {
    name: 'codcodile2',
      lastname: 'code2',
      language: null
    }
    
    let language = _.get(user, 'language.code',user.language)
    console.log(language);
     language = _.get(user2, 'language.code',user2.language)

    console.log(language);

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

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

בהצלחה 🐊😎❤

פוסטים קשורים:

מדריך nodeJS Express – חלק 2 – controllers תמונת אווירה של עוגיות במחשבעוגיות (Cookies) ליצור ולבדוק ב-JS מדריך webpackמה זה webpack ואיך משתמשים בזה? לימודי javascript - for loop offor loop of | איטרציה למערכים ב javascript. עם אינדקס
javascript loadash לימוד js ספריות שימושיות javascript

אודות המחבר

יאיר וינר להציג את כל הפוסטים של וינר יאיר


« פוסט קודם
פוסט הבא »

השארת תגובה

ביטול

חיפוש באתר
בחירת העורכים
29 בדצמבר 2023 עידן יצחקי

שדה טקסט עשיר עם תמונות

אתם הולכים להיות מופתעים עד כמה HTML יכול להיות חכם ולבצע משהו כל כך מורכב, שאם אנחנו היינו רוצים ליצור

1 באוקטובר 2021 עידן יצחקי

איך למשוך דינמית favicon של אתרים אחרים ב-JS

בפוסט זה נראה איך אפשר על פי לינקים בדף למשוך את ה-favicon מהדומיין שלהם באופן דינמי, בדיקה של תקינות התמונה

פופולרי
Javascript functions – היכרות עם סוגי פונקציות
Javascript
21 בדצמבר 2024 אין תגובות
Nested routing in angular standalone component
Typescript
15 בנובמבר 2024 אין תגובות
בחרו לפי תגיות
angular blockchain css ethers express front-end fullstack GQL html javascript next js nextjs nodejs react hooks reactjs solidity webgl אנגולר בלוקציין וורדפרס לימודי אנגולר לימודי וורדפרס לימוד ריאקט מדריך front-end מדריך GQL מדריך אנגולר מדריך וורדפרס מדריך חינם react מדריך ריאקט מפתח בלוק מפתח בלוקציין מתכנת front-end מתכנת בלוקציין מתכנת פרונט סולידיטי קורס front end קורס fullstack קורס nextjs קורס אנגולר קורס בלוקציין קורס בלוקציין בחינם קורס סולידיטי קורס ריאקט קורס תכנות קורס תכנות בחינם
סינון על פי קטגוריות
CSS fullstack HTML IIS Javascript nodeJs SEO Typescript אנגולר בלוקציין בניית אתרים וורדפרס חיפוש עבודה כלים נוספים כללי נגישות קורסים ריאקט תלת מימד תקלות ופתרונות
צור קשר
כל הזכויות שמורות לקודקודייל
ליצירת קשר: @ קודקודייל
גלילה לראש העמוד
דילוג לתוכן
פתח סרגל נגישות כלי נגישות

כלי נגישות

  • הגדל טקסטהגדל טקסט
  • הקטן טקסטהקטן טקסט
  • גווני אפורגווני אפור
  • ניגודיות גבוההניגודיות גבוהה
  • ניגודיות הפוכהניגודיות הפוכה
  • רקע בהיררקע בהיר
  • הדגשת קישוריםהדגשת קישורים
  • פונט קריאפונט קריא
  • איפוס איפוס