הכנס JavaScript למערך - כיצד להוסיף למערך באמצעות פונקציות הדחיפה, ההרמה והרכיבה

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

עם זאת, ככל שיש לך יותר אפשרויות מבלבל יותר יכול להיות להחליט באיזה מהאפשר להשתמש.

במאמר זה ברצוני לדון בכמה דרכים נפוצות להוספת אלמנט למערך JavaScript.

שיטת הדחיפה

השיטה הראשונה וכנראה הנפוצה ביותר ממערך JavaScript שתיתקל בו היא push () . שיטת הדחיפה () משמשת להוספת אלמנט לסוף המערך.

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

בואו נסתכל על הדוגמה בצורה קוד:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

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

נניח שרצינו להוסיף שניים או שלושה פריטים בכל פעם לרשימה שלנו, מה היינו עושים אז? כפי שמתברר, דחיפה () יכולה לקבל מספר אלמנטים שיתווספו בבת אחת.

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

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

למרבה המזל, לדחיפה () יש ערך החזר עם אורך המערך לאחר הוספת האלמנטים שלנו.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

שיטת Unshift

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

הגיע הזמן להציג את חברנו unshift () המאפשר לנו להוסיף פריטים לתחילת המערך שלנו.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

יתכן שתבחין בדוגמה שלמעלה, שכמו שיטת push () , unshift () מחזיר לנו את אורך המערך החדש. זה גם נותן לנו את היכולת להוסיף יותר מאלמנט אחד בכל פעם.

שיטת הקונקאט

קיצור של שרשור (לקישור יחד), שיטת concat () משמשת לחיבור שני מערכים (או יותר).

אם אתה זוכר מלמעלה, השיטות unshift () וה- push () מחזירות את אורך המערך החדש. concat () , לעומת זאת,יחזיר מערך חדש לחלוטין.

זו הבחנה חשובה מאוד והופכת את concat () לשימושי ביותר כאשר אתה מתמודד עם מערכים שאינך רוצה לשנות (כמו מערכים המאוחסנים במצב React).

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

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

נניח שיש לך מספר מערכים שתרצה להצטרף יחד. אין דאגות, concat () יש כדי להציל את היום!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

שיבוט עם קונקאט

זוכר איך אמרתי ש- concat () יכול להיות שימושי כשאתה לא רוצה לשנות את המערך הקיים שלך? בואו נסתכל כיצד אנו יכולים למנף מושג זה להעתקת תוכן מערך אחד למערך חדש.

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

מדהים! אנו יכולים למעשה "לשכפל" מערך באמצעות concat () .

אבל יש 'gotcha' קטן בתהליך השיבוט הזה. המערך החדש הוא "עותק רדוד" של המערך המועתק. המשמעות היא שכל אובייקט מועתק על ידי הפניה ולא האובייקט בפועל.

בואו נסתכל על דוגמה כדי להסביר את הרעיון הזה בצורה ברורה יותר.

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

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

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

TL; DR

כשתרצה להוסיף אלמנט בסוף המערך שלך, השתמש ב- push (). אם אתה צריך להוסיף אלמנט לתחילת המערך שלך, נסה לבטל את ההחלפה (). ואתה יכולהוסף מערכים יחד באמצעות concat ().

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

אל תהסס לפנות אלי בטוויטר ולהודיע ​​לי על שיטת המערך המועדפת עליך להוספת אלמנטים למערך.