לאחרונה הבנתי שבפוסטים רבים אני מקשרת להרבה מאמרים שעוסקים בפונקציות שעוסקות במערכים (במיוחד ב-map, filter ו-reduce, אבל גם עוד אחרות). אבל מאחר שהקישורים האלה מפוזרים בשלל פוסטים, החלטתי לאחד אותם לפוסט אחד. לכן איגדתי כאן הן את הקישורים שכבר קיימים בבלוג, והוספתי גם קישורים חדשים. בהמשך, אעדכן את הפוסט הזה כל אימת שאפגוש עוד מאמרים מעניינים בנושא זה.
קישורי מפוסטים קימיים
- ג’יימס סינקלר מראה את הלוגיקה ב-map, reduce ו-filter בכך שהם מצמצמים את הצורך בלולאות. הוזכר לראשונה בפוסט כשמילה שמורה חוזרת על עצמה, פונקציות חץ, דברים שנלמדים באופן בלתי צפוי, ועוד ממתקי פרונט אנד.
- שלוש הפונקציות העוברות על מערך ב-JavaScript – שהן map, reduce ו-filter – מוסברות מאוד יפה ולא באריכות בארבעה פוסטים (המאמר הרביעי הוא על שרשור שלהן – chaining): מסבירים את הפרמטרים שלהם, משווים אותן ללואת for, ובחלק מהמקרים מדברים על הגרסה שלהן ב-ES6. והכי חשוב – נותנים דוגמאות. הוזכר לראשונה בפוסט עריכת קוד בממשק הניהול של וורדפרס, למה לנטוש את לולאת ה-for ב-JavaScript, וקצת מישחוק בלימוד ושינון.
- פונקציית ה-reduce עשויה להיות מאתגרת להבנה, והפוסט הזה של שרה דרזנר הוא אחלה בהסברים. בסופו יש קישורים לעוד 3 מקומות שמסבירים יפה את reduce (אחד מהם הוא סרטון יוטיוב של רבע שעה, למי שמעדיף להקשיב על פני לקרוא). הוזכר לראשונה בפוסט סימן שאתה מתכנת בכיר, אנלוגיה בין דיאטה לפונקציה, והתמודדות עם לקוח לחוץ.
- אנלוגיה של דיאטה להסבר פונקציית ה-reduce. מובן ולא ארוך. הוזכר לראשונה בפוסט סימן שאתה מתכנת בכיר, אנלוגיה בין דיאטה לפונקציה, והתמודדות עם לקוח לחוץ.
- 15 מקרים שמתאים בהם להשתמש ב-
map(),reduce()ו-filter(). הוזכר לראשונה בפוסט מודולים באיורים, קורות ה-JS באיורים, ולמה לפעמים אוטובוסים לא מגיעים. - תצוגת עץ מהירה ביותר עם JavaScript. הסוד הוא שלמרות המבנה המאוד היררכי של העץ – הרבה תתי רמות – הנתונים נשמרים בצורה שטוחה בתוך מערך, ונשלפים באמצעות המתודות filter, map ו-some. הוזכר לראשונה בפוסט גיטהאב עזבו את jQuery, חשיבות תאריכים בפוסטים על טכנולוגיה, ועוד קישורי JavaScript.
- כולנו ודאי מכירים את הפונקציות הרצות על Array, כגון foreach ו- map. הקישור החמישי הוא לאיש אחד שהחליט שהביצועים של הפונקציות הללו אינם טובים מספיק, והחליט ליישמן בעצמו. הוא יצר ספריה בשם PowerArray עם יישום מאוד פשוט ויעיל של הפונקציות הנ”ל, והוסיף להן עוד פונקציות כגון
binarySearch,numericSortו-addhAndSort. הוזכר לראשונה בפוסט switch ב-JS ועוד מטעמים. - מאמר על השוואה בין map לבין foreach, והקדמה של גליון 230 של Web Tools Weekly, שם הוא מסביר את ההבדלים בין for…in ל-for…of. הוזכר לראשונה בפוסט קפצ’ה, אינפוגרפיקה, פריצוֹת וכל השאר.
ולחדשים בפוסט זה:
- פוסט יפה שסוקר הבדלים בין foreach לסוגים שונים של for. הוא עובר על מאפיינים כמו ה-syntax, איך הם מתמודדים עם מאפיינים לא מספריים, עם אלמנטים ריקים, עם המילה השמורה this, ועם א-סינכרוניות.
- מה שעליכם לדעת בעניין מערכים ב-JS. המאמר מסביר את כל הפונקציות על מערכים, בעזרת אנלוגיות ודוגמאות קוד. זה הופך את ההסברים לברורים מאוד. המאמר מתחיל מ-
mapו-reduce, ואופרטור הפיזור (Spread operator, החל מ-ES2015) – אלה הדברים הבסיסיים מבחינתו. הוא ממשיך עם פונקציות שטוב לדעת:includes(ES2016),concat,forEach,indexOf,find,findIndex,slice,some,every,flat(ES2019),flatMap(ES2019),join,fromו-isArray. הוא מונה בנפרד פונקציות שטוב לדעת אותן אבל הן משנות את המערך המקורי, כלומר הן mutating. ואלה הן:sort,fill,reverseו-pop. הוא מסיים בפונקציות שאפשר למצוא להן תחליף:push(אפשר להשתמש ב-mapבמקום),splice(אפשר להחליף ב-filterאוslice),shiftו-unshift(אפשר להשתמש ב-spread/rest). - פוסט שעוסק במחיקת אברים כפולים במערך. לכאורה מה יש לכתוב על זה. למעשה, הוא משווה שתי שיטות שבהן אפשר להשתמש: אחת היא שימוש ב-SET (סוג מבנה חדש ב-ES6) והשניה היא שימוש במזהה של אוביקט. אמנם יש בפוסט הזה תחביר של TypeScript, אבל אפשר להתעלם ממנו ולקרוא את רק ה-JavaScript. גם הפוסט הזה מסביר על מחיקת איברים כופלים באמצעות Set.
- פוסט של אונה קרבץ ב-CSS-Tricks: מדריך מאויר על הפונקציות המופלאות map. filter ו-reduce. בסוף הפוסט יש שיר שאנה העלתה ליוטיוב שמסכם מתי להשתמש בכל אחת מהפונקציות. חמוד מאוד!
- פוסט שחוקר את הפוטנציאל החבוי במערכים של JavaScript. הפוסט מחלק את הפונקציות לקטגוריות (מזכיר טיפה את הפוסט שהוזכר לעיל “מה שעליכם לדעת בעניין מערכים ב-JS“): פונקציות שמשנות את המערך – כלומר, מחזירות מערך שונה ממה שהתחלנו איתו, בלי לגעת במערך המקורי (למשל
filter,mapועוד); כאלה שיוצרות אינטראקציה עם המערך – כלומר ממש משנות את המערך המקורי (למשלreverse); כאלה שיוצרות איטרציה על המערך – למעשה יש רק אחת כזאת: .forEach; וקטגוריית “כל מיני” – אלה פונקציות פחות ידועות, כגוןentries,keys,valuesועוד. - פוסט של דיוויד וואלש עם 7 טריקים ב-JavaScript שכולל גם פעולות על מערכים. למשל הידעתם שאפשר להעביר לפונקציה
filterאת המשתנהBooleanוהיא תעיף את כל האיברים מסוגfalse(כגון0,null,undefinedוכד’)? ולמשל, האם אתם מכירים את השימוש ב-… כדי לאחד מערכים? קראו ותהנו! Array.fromיכול לקבל פרמטר נוסף – פונקציית callback. בפוסט הזה יש דוגמה חמודה לשימוש בזה.- פוסט על 8 טריקים ב-JS, כשארבעת הראשונים הם בענייני מערכים: מילוי התחלתי של מערך, הצגת ערכים ייחודיים (unique) של מערך, ועוד.
- Codepen קצר עם דוגמאות פשוטות ל-map. filter ו-reduce, עם שימוש באיקונים בתור אברי המערכים.
- חמישה יישומים מועילים ל-
Array.from()– להמיר אובייקט למערך, לשכפל מערך, למלט מערך באיברים, ועוד. - הסברים על הפונקציות
some()ו-find(). - Desctrutering ב-JS הוא סטנדרט חדש מ-ES2015. הפוסט הזה מסביר אותו מחדש, מראה איך הוא מועיל לנו בחיים ומתי כדאי להשתמש בו.
- 5 דרכים מעניינות (ואחת משעממת) להשתמש ב-Array.reduce. ואחרי שנה, קריס חוזר ועובר על הדרכים האלה
- פוסט של דור בן זקן על דרכים לאיחוד מערכים ב-JavaScript ועל ההבדלים ביניהן.
- נכון, לא מדובר על מערכים, אבל הם קרובים מספיק שרציתי לשים את הפוסט עליהם פה ולא בפוסט כללי על JS. המאפיינים של, וההבדלים בין, map ו-set.
- הסבר על אופן הפעולה של לולאת for in במערכים, אובייקטים, ובשילוב שגעוני עם Promise-ים.
- איך לשטח מערך עם
Array.flat(). אמנם לא נתמך ב-IE, אבל יש פוליפיל שתומך עד IE9. - דרכים להפיכת אוביקט למערך.
- Best practices באיטרציה על מערכים
- מתי להשתמש באיזו פונקציית מערכים
- הדגמת כל הפקודות שאפשר להשתמש בהן עם מערכים
- איך לשטח מערך עם
flat()– לקבוע עד איזה עומק לשטח אותו, ולהתאים לדפדפנים שלא תומכים בפקודה הזו. - איך לשנות מיקומי איברים במערך באמצעות
splice(). - מחיקת איברים חוזרים במערך – 3 שיטות
- איך לבדוק אם ערך מסוים הוא מערך באמצעות Vanila JS
- 8 דרכים למצוא איבר במערך
- פונקציית מערך חדשה:
()array.atשניתנת ליישום באמצעות pollyfill - ועוד פונקציה חדשה:
<a rel="noreferrer noopener" href="https://gomakethings.com/the-array.isarray-method-in-vanilla-js/" target="_blank">Array.isArray()</a> - איך ליצור מערך של מספרים עוקבים עם הפונקציות
Array.keys()ו-Array.from() - איך למצוא את האינדקס בלולאת for…in ב-JS ונילה
- להבין את reduce ושאר הפונקציות – הפוסט הזה מסביר איך עובדת הפונקציה
reduce()וגם מראה איך להפעיל אותה בשילוב עם()mapו-filter(). - על immutability במערכים ובאוביקטים – immutable פירושו בלתי משתנה, שלא משנה את ערכו. הפוסט הזה מסביר איך ליצור מערכים ואוביקטים שאי אפשר לשנות את ערכם. ופוסט המשך שמדבר על immutablity במערכים ואוביקטים רב-מימדיים.
- הפונקציה
Array.from()מאפשרת גם לעדכן ערכים – פוסט ב-Go Make Things - הרפתקאות עם
map() - איך להסיר ערכים כפולים ממערך
- 3 דרכים לאחד מערכים ב-JS
- פוסט שמתאר 3 דרכים להסרת האיבר האחרון במערך
נהניתם? משתמשים? יש לכם חוויות, המלצות העדפות? אשמח לשמוע!
נהדר לאה!
(בהמשך לשיחתנו הפרטית, אפרופו לסגור טאבים פתוחים… גיליתי שאחד מהם היה זה :))
תודה אלרון!
נו, אמרתי לך שכדאי לך להעיף את הטאבים המיותרים! 😉