path: root/files/he/learn/javascript/first_steps/arrays/index.html

---
title: Arrays - מערכים
slug: Learn/JavaScript/First_steps/Arrays
translation_of: Learn/JavaScript/First_steps/Arrays
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div>

<p class="summary">במאמר האחרון במודול זה, אנחנו נדע במערכים - דרך מסודרת וקלה לאחסן רשימה פריטי מידע תחת משתנה אחד. אנחנו נבין מדוע שמוש במערך הוא שימושי כל כך ונבין כיצד ליצור מערך, לשנות את האיברים שלו, למחוק או להוסיף לו איברים ועוד.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">ידע מוקדם:</th>
   <td>הבנה בסיסית של מחשב, הבנה בסיסית של HTML, CSS ו - JavaScript.</td>
  </tr>
  <tr>
   <th scope="row">Objective:</th>
   <td>הבנה של מערכים וביצוע פעולות שונות עליהם</td>
  </tr>
 </tbody>
</table>

<h2 id="מה_זה_בעצם_מערך_-_Array">מה זה בעצם מערך - Array?</h2>

<p>מערכים לרוב מתוארים כאובייקט של מעין רשימה (״list-like objects״). בעיקרון, אלו אובייקטים המכילים מספר ערכים שמאוחסנים יחד.</p>

<p>אובייקטים מסוג מערך יכולים להיות מאוחסנים בתוך משתנה ונוכל לטפל בהם בדיוק כמו שאנחנו מטפלים במשתנים אחרים.</p>

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

<p>אם לא היו לנו מערכים, היינו צריכים לשמור כל פריט במשתנה אחר, ואז לכתוב קוד שידפיס את המחיר בנפרד עבור כל משתנה. זה היה הופך את הקוד שלנו להרבה יותר מורכב וארוך ופחות יעיל. אם היו לנו 10 פריטי להדפיס לחשבונית זה עוד נשמע הגיוני, אך מה נעשה במצב שיש לנו 100 פריטים או 1,000 פריטים? נחזור לדוגמא זו בהמשך המאמר על מנת להבין כיצד ניתן לעשות זאת.</p>

<p>כמו במאמרים קודמים, אנחנו נלמד על הבסיס של מערכים באמצעות שימוש ב<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה</a>.</p>

<h3 id="יצירת_מערכים">יצירת מערכים</h3>

<p>מערכים כוללים סוגריים מרובעות <code>[]</code> וכל איבר (אלמנט) במערך מופרד מאיבר אחר על ידי פסיק <code>,</code>.</p>

<ol>
 <li>נניח ואנחנו רוצים לאחסן רשימת פריטים בתוך מערך. הכניסו את הקוד הבא לקונסולה:
  <pre class="brush: js">let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
shopping;</pre>
 </li>
 <li>בדוגמא למעלה, כל איבר הוא מחרוזת, אך ניתן לאחסן כל מיני סוגי ערכים בתוך מערכים - מחרוזות, מספרים, אובייקטים ואפילו מערכים נוספים. לדוגמא:
  <pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13];
let random = ['tree', 795, [0, 1, 2]];</pre>
 </li>
 <li>לפני שתמשיכו, נסו ליצור מספר מערכים וחקרו את האפשרויות השונות.</li>
</ol>

<h3 id="גישה_לאיברי_המערך_ושינוי_שלהם">גישה לאיברי המערך ושינוי שלהם</h3>

<p>אנחנו יכולים לגשת לכל איבר במערך על ידי שימוש בסוגריים המרובעות <code>[]</code> בדיוק כפי שאנו <a href="/he/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">ניגשים לתווים במחרוזת</a>.</p>

<ol>
 <li>הכניסו את הקוד הבא לקונסולה:
  <pre class="brush: js">shopping[0];
// returns "bread"</pre>
 </li>
 <li>אנחנו גם יכולים לשנות איבר במערך באמצעות מתן ערך חדש לאותו איבר במערך. ראו לדוגמא:
  <pre class="brush: js">shopping[0] = 'tahini';
shopping;
// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]</pre>

  <div class="note"><strong>להזכירכם</strong>: מחשבים מתחילים לספור מ-0 ולא מ-1. בדיוק כמו במחרוזות, כך גם במערכים.</div>
 </li>
 <li>שימו לב שמערך בתוך מערך נקרא <strong>מערך רב מימדי</strong>. אנחנו יכולים לגשת לאיבר שנמצא בתוך מערך מסויים, כאשר המערך הזה נמצא בתוך מערך באמצעות <strong>שרשור</strong> של שתי סוגריים מרובעות ביחד. לדוגמא, על מנת לגשת לאיבר במערך שהוא האיבר השלישי במערך המשורשר והמערך המשורשר הוא האיבר השלישי במערך הראשי בשם <code>random</code>, אנו נצטרך לרשום זאת בצורה הבאה:
  <pre class="brush: js">random[2][2];</pre>
 </li>
 <li>נסו לעשות כמה פעולות ושינויים בעצמכם על מנת להבין את הדרך שבה אנו ניגשים לאיברים במערך.</li>
</ol>

<h3 id="מציאת_האורך_של_מערך">מציאת האורך של מערך</h3>

<p>מציאת האורך של מערך - כלומר כמה איברים יש לו - מתבצעת בדיוק באותה דרך שבה אנחנו מוצאים את מספר התווים במחרוזת - באמצעות המאפיין {{jsxref("Array.prototype.length","length")}}.</p>

<p>נסו להזין את הקוד הבא:</p>

<pre class="brush: js">sequence.length;
// should return 7</pre>

<p>מאפיין <code>length</code>  גם ישמש אותנו לצורך מעבר על איברי המערך באמצעות לולאת <code>for</code> וביצוע פעולות כלשהן שנבחר על כל איבר ואיבר, כך שהלולאה תעבור על כל איברי המערך. לדוגמא:</p>

<pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13];
for (let i = 0; i &lt; sequence.length; i++) {
  console.log(sequence[i]);
}</pre>

<p>אנחנו נלמד יותר לעומק על לולאות במאמרים הבאים, אך בהסבר פשוט, הקוד הנוכחי אומר את הדברים הבאים:</p>

<ol>
 <li>הרצת הקוד שנמצא בין הסוגריים המסולסלות <code>{}</code> על כל איבר במערך החל מהאיבר הראשון במערך (אשר נמצא במיקום 0 כמובן). את מספר המיקום של האיבר במערך אותו אנו מייצגים באמצעות המשתנה <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">i</span></font>.</li>
 <li>הרצת הלולאה מסוג <code>for</code> כל עוד מיקומו של האיבר במערך (שכאמור מיוצג בכל ריצה על ידי המשתנה <code>i</code>) קטן מסך כל האיברים במערך. כלומר, במקרה זה הקוד בתוך הסוגריים המסולסלות <code>{}</code> לא ירוץ כאשר המשתנה <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">i</span></font> יהיה שווה ל-7. (להזכירכם - אמנם יש שבעה איברים במערך, אך הספירה שלהם מתחילה ב-0, ולכן האיבר השביעי במערך, יהיה במיקום/אינדקס השישי וזו הסיבה שהשתמשנו בסימן קטן מאורך המערך (<code>&gt;</code>) ולא שווה לאורך המערך (<code>=</code>) שכן אז היינו מקבלים במיקום השביעי את הערך undefiened.</li>
 <li>בתוך הסוגריים המסולסלות, רשמנו את הקוד שאנחנו רוצים שיבוצע במסגרת כל ריצה של הלולאה. במקרה הזה, הדפסנו לקונסולה את הערך הנוכחי של האיבר שעליו רצה הלולאה באותה ריצה. לצורך הדפסה לקונסולה עשינו שימוש ב-<code><a href="/en-US/docs/Web/API/Console/log">()console.log</a></code>.</li>
</ol>

<h2 id="מס׳_מתודות_שימושיות_של_מערכים">מס׳ מתודות שימושיות של מערכים</h2>

<p>בחלק זה אנחנו נסתכל על מתודות שימושיות של מערכים או מתודות שימושיות הקשורות למערכים, המאפשרות לנו להפוך מחרוזת למערך ומערך למחרוזת ונלמד כיצד להכניס איברים נוספים לתוך מערכים או להסיר איברים ממערך. </p>

<h3 id="המרה_בין_מחרוזות_ומערכים">המרה בין מחרוזות ומערכים</h3>

<p>הרבה פעמים אנחנו נקבל מידע גולמי אשר נמצא במחרוזת ארוכה ונרצה להפריד אותו לפריטי מידע אשר עמם נוכל לעשות שימוש באמצעות המרתה של המחרוזת למבנה אחר.</p>

<p>על מנת לעשות זאת, אנחנו נעשה שימוש במתודה {{jsxref("String.prototype.split()","split()")}}. מתודה זו ממירה מחרוזת למערך ומקבלת פרמטר אחד - התו שהמתודה תחפש בתוך המחרוזת שנרצה להמיר למערך וכאשר היא תמצא את אותו תו בכל פעם, היא תפריד בין החלק במחרוזת שנמצא לפני תו זה לבין החלק במחרוזת שנמצא אחריו, וכך היא בעצם מחלקת את המחרוזת לאיברים במערך. התוצאה של מתודה זו מערך שהאיברים שלו הם המחרוזות משנה שהופרדו.</p>

<div class="note">
<p><strong>לתשומת לב</strong>: מבחינה טכנית זוהי מתודה של מחרוזות ולא מתודה של מערכים.</p>
</div>

<ol>
 <li>בואו ננסה להבין כיצד מתודה הזו עובדת: צרו מחרוזת בקונסולה כגון זו:
  <pre class="brush: js">let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre>
 </li>
 <li>עכשיו הפרידו בין התווים במחרוזת באמצעות המתודה {{jsxref("String.prototype.split()","split()")}} כך שכל פעם שיופיע התו <code>,</code> תבוצע העברה של התווים שלפניו לאיבר חדש במערך שנקרא <code>myArray</code>:
  <pre class="brush: js">let myArray = myData.split(',');
myArray;</pre>
 </li>
 <li>נסו למצוא את האורך של המערך החדש וכן לקבל את הערך של חלק מהאיברים שלו:
  <pre class="brush: js">myArray.length;
myArray[0]; // the first item in the array
myArray[1]; // the second item in the array
myArray[myArray.length-1]; // the last item in the array</pre>
 </li>
 <li>ניתן כמובן גם <strong>להמיר מערך למחרוזת</strong> באמצעות שימוש במתודה {{jsxref("Array.prototype.join()","join()")}}. נסו את הקוד הבא:
  <pre class="brush: js">let myNewString = myArray.join(',');
myNewString;</pre>
 </li>
 <li>דרך נוספת של <strong>המרת</strong> <strong>מערך למחרוזת</strong> נוכל לעשות באמצעות שימוש במתודה {{jsxref("Array.prototype.toString()","toString()")}}.</li>
 <li>המתודה <code>()toString</code> הרבה יותר פשוטה מאשר <code>()join</code> שכן היא לא מקבלת שום פרמטר/ארגומנט, אך יש לה מספר הגבלות. עם המתודה <code>()join</code> אנחנו יכולים להגדיר איזה תו אנחנו נרצה שיפריד בין התווים במחרוזת. נסו לדוגמא להריץ שוב את שורה מספר 4, אך עם תו מפריד אחד כמו <code>/</code> או <code>-</code>.
  <pre class="brush: js">let dogNames = ['Rocket','Flash','Bella','Slugger'];
dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre>
 </li>
</ol>

<h3 id="הוספה_והסרה_של_איברים_במערך">הוספה והסרה של איברים במערך</h3>

<p>בחלק זה נלמד כיצד להוסיף ולהסיר איברים במערך. אנו נעשה שימוש במערך <code>myArray</code> שהוגדר למעלה. לנוחיותכם, הנה הוא שוב:</p>

<pre class="brush: js">let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre>

<p>על מנת להוסיף איבר לסוף של מערך אנחנו משתמשים במתודות {{jsxref("Array.prototype.push()","push()")}} ובמתודה {{jsxref("Array.prototype.pop()","pop()")}} להסיר איבר מסוף המערך.</p>

<ol>
 <li>ננסה תחילה את המתודה <code>()push</code> — שימו לב שאנחנו צריכים לכלול איבר אחד או יותר כארגומנט/פרמטר למתודה זו, אשר אותו נרצה להכניס לסוף המערך:

  <pre class="brush: js">myArray.push('Cardiff');
myArray;
myArray.push('Bradford', 'Brighton');
myArray;
</pre>
 </li>
 <li>כשאנו מבצעים את המתודה הזו, אנו מקבלים כערך מוחזר את ה-<code>length</code> החדש של המערך, לאחר ההוספה. אם נרצה לשמור את ה-<code>length</code> החדש, אנחנו נצטרך לשמור אותו במשתנה חדש:
  <pre class="brush: js">let newLength = myArray.push('Bristol');
myArray;
newLength;</pre>
 </li>
 <li>הסרה של האיבר האחרון במערך מתבצע באמצעות המתודה <code>()pop</code> על המערך. נסו את הקוד הבא:
  <pre class="brush: js">myArray.pop();</pre>
 </li>
 <li>האיבר האחרון במערך הוסר, ו<strong>הערך המוחזר של המתודה זו היא האיבר האחרון שהוסר</strong>. על מנת לשמור את האיבר הזה במשתנה חדש, ניתן לרשום את הקוד הבא:
  <pre class="brush: js">let removedItem = myArray.pop();
myArray;
removedItem;</pre>
 </li>
</ol>

<p>{{jsxref("Array.prototype.unshift()","unshift()")}} וכן {{jsxref("Array.prototype.shift()","shift()")}} עובדות בדיוק אותו הדבר כמו ש-<code>()push</code> ו- <code>()pop</code>, בהתאמה, למעט העבודה שהן מוסיפות/מסירות איברים מ<strong>תחילת המערך ולא מסופו</strong>.</p>

<div class="note">
<p><strong>לתשומת לב</strong>:{{jsxref("Array.prototype.push()","push()")}} ו- {{jsxref("Array.prototype.pop()","pop()")}} המתודות <strong>משנות</strong> את מערך המקור.</p>
</div>

<ol>
 <li>מתודת <code>()unshift</code> — הזינו את הקוד הבא לקונסולה:

  <pre class="brush: js">myArray.unshift('Edinburgh');
myArray;</pre>
 </li>
 <li>מתודת <code>()shift</code>— הזינו את הקוד הבא לקונסולה:
  <pre class="brush: js">let removedItem = myArray.shift();
myArray;
removedItem;</pre>
 </li>
</ol>

<h2 id="תרגול_עצמאי_הדפסת_המוצרים">תרגול עצמאי : הדפסת המוצרים</h2>

<p>נחזור לדוגמא שנתנו בתחילת המאמר - הדפסת שמות המוצרים והמחירים שלהם על חשבונית, וכן חישוב של המחירים שלהם בתחתית החשבונית. בדוגמא הבאה יש שורות עם הערות המכילות מספרים (לדוגמא: <code>number 1</code>). כל שורה שכזו נועדה לציין בפניכם את המיקום שבו תצטרכו להוסיף קוד לקוד הקיים:</p>

<ol>
 <li>מתחת להערה <code>number 1 //</code> יש מספר של מחרוזות, כאשר כל אחת כוללת שם של מוצר והמחיר שלו, מופרדים על ידי הסימן <code>;</code>. אנו נרצה שתהפכו את המחרוזות הללו למערך ותאחסנו אותו במשתנה שנקרא <code>products</code>.</li>
 <li>בשורה שבה נמצאת העקב <code>number 2 //</code> נמצאת לולאת ה-for שלנו. בשורה זו יש כרגע <code>i &lt;= 0</code>, שזהו מבחן תנאי אשר גורם ל-<a href="/he/Learn/JavaScript/First_steps/A_first_splash#Loops">for loop</a> לרוץ רק פעם אחת, מכיוון שבפועל הוא ״תפסיק לרוץ כאשר <code>i</code> לא קטן יותר או שווה ל-0״, ו-<code>i</code> מתחיל ב-0. אנו נרצה שתחליפו את התנאי זה בקוד אחר כך שהלולאה תפסיק לרוץ כאשר <code>i</code> לא יהיה קטן יותר מהאורך של <code>products</code>.</li>
 <li>מתחת להערה <code>number 3 //</code> אנו רוצים שתכתבו קוד שמפצל את האיבר הנוכחי במערך (<code>name:price</code>) ל-2 איברים נפרדים - אחד כולל את שם הפריט ואחד הכולל את מחירו. אם אתם לא בטוחים איך לבצע זאת, ראו <a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות של מחרוזות</a> והעמיקו בחלק {{anch("המרה בין מחרוזות ומערכים")}} של מאמר זה.</li>
 <li>כחלק מהקוד למעלה, אולי גם נרצה להמיר את המחירים ממחרוזת למספר. אם אתם לא זוכרים כיצד לבצע זאת, קיראו את המאמר הבא, בחלק של <a href="/he/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">״מספרים מול מחרוזות״</a>.</li>
 <li>בראשית הקוד הנוכחי קיים משתנה שנקרא <code>total</code> אשר הוצהר והושם לו ערך של 0. בתוך הלולאה (מתחת <code>number 4 //</code>) אנו נרצה שתוסיפו שורת קוד שמוסיפה את האיבר שמייצג את המחיר הנוכחי למשתנה <code>total</code> בכל ריצה של הלולאה, כך שבסוף, המחיר הכולל (<code>total</code>)יודפס לחשבונית. אולי תרצו לחזור ולעיין ב-<a href="/he/Learn/JavaScript/First_steps/Math#Assignment_operators">אופרטורים להשמה</a> על מנת לעשות זאת.</li>
 <li>בנוסף, נרצה שתשנו את השורה שמתחת להערה <code>// number 5</code><code>//</code> כך שהמשתנה <code>itemText</code> יהיה בצורת כתיבה הזו לכל איבר ל-"<em>current item name — $current item price</em>", לדוגמא: "Shoes — $23.99" , כך שהמידע יוצג בתצורה הזו על גבי החשבונית. שימו לב שמדובר באיחוד של מחרוזות, לא משהו מורכב מדי שלא למדנו כבר.</li>
</ol>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;

&lt;div class="output" style="min-height: 150px;"&gt;

&lt;ul&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;/p&gt;

&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;

&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;

&lt;textarea id="code" class="playable-code" style="height: 410px;width: 95%"&gt;
var list = document.querySelector('.output ul');
var totalBox = document.querySelector('.output p');
var total = 0;
list.innerHTML = '';
totalBox.textContent = '';
// number 1
                'Underpants:6.99'
                'Socks:5.99'
                'T-shirt:14.99'
                'Trousers:31.99'
                'Shoes:23.99';

for (var i = 0; i &lt;= 0; i++) { // number 2
  // number 3

  // number 4

  // number 5
  itemText = 0;

  var listItem = document.createElement('li');
  listItem.textContent = itemText;
  list.appendChild(listItem);
}

totalBox.textContent = 'Total: $' + total.toFixed(2);
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;
</pre>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i &lt; products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
var solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }


  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>

<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background-color: #f5f9fa;
}</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="למידה_עצמאית_5_החיפושים_האחרונים">למידה עצמאית: 5 החיפושים האחרונים</h2>

<p>שימוש נפוץ שאנחנו עושים במתודות של מערכים כמו {{jsxref("Array.prototype.push()","push()")}} ו- {{jsxref("Array.prototype.pop()","pop()")}} הוא כאשר אנחנו שומרים רישום של מספר פריטים מסויימים כגון עשרת החיפושים האחרונים שביצע המשתמש או כאשר אנחנו משתמשים באנימציה המציגה כמות מסויימת של פריטים המוצגים על גבי המסך המתחלפים ביניהם, כך שכל פעם יהיה רק מספר מסויים של פריטים. בדוגמאות אלו אובייקטים חדשים נוצרים ומתווספים למערך ואילו ישנים נמחקים על מנת לשמור על המספר שרצינו.</p>

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

<div class="note">
<p><strong>לתשומת לב</strong>: ביישום חיפוש אמיתי, יתאפשר לנו רוב הסיכויים ללחוץ על החיפושים הקודמים ולחזור לאותם חיפושים. בדוגמא הבא נרצה להשאיר את הנושא פשוט.</p>
</div>

<p>על מנת להשלים את המשימה, הנכם נדרשים:</p>

<ol>
 <li>להוסיף שורת מתחת להערה <code>number 1//</code> שמוסיפה את הערך הנוכחי שהוזן לתיבת החיפוש לתוך תחילת המערך. ניתן למצוא את הערך שהוזן לתיבת החיפוש באמצעות <code>searchInput.value</code>.</li>
 <li>הוסיפו מתחת להערה <code>number 2</code><code>//</code> שורת קוד שמסירה את הערך שנמצא כרגע בסוף המערך.</li>
</ol>

<div class="hidden">
<h6 id="Playable_code_2">Playable code 2</h6>

<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
&lt;div class="output" style="min-height: 150px;"&gt;

&lt;input type="text"&gt;&lt;button&gt;Search&lt;/button&gt;

&lt;ul&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;

&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;


&lt;textarea id="code" class="playable-code" style="height: 370px; width: 95%"&gt;
var list = document.querySelector('.output ul');
var searchInput = document.querySelector('.output input');
var searchBtn = document.querySelector('.output button');

list.innerHTML = '';

var myHistory = [];

searchBtn.onclick = function() {
  // we will only allow a term to be entered if the search input isn't empty
  if (searchInput.value !== '') {
    // number 1

    // empty the list so that we don't display duplicate entries
    // the display is regenerated every time a search term is entered.
    list.innerHTML = '';

    // loop through the array, and display all the search terms in the list
    for (var i = 0; i &lt; myHistory.length; i++) {
      itemText = myHistory[i];
      var listItem = document.createElement('li');
      listItem.textContent = itemText;
      list.appendChild(listItem);
    }

    // If the array length is 5 or more, remove the oldest search term
    if (myHistory.length &gt;= 5) {
      // number 2

    }

    // empty the search input and focus it, ready for the next term to be entered
    searchInput.value = '';
    searchInput.focus();
  }
}
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i &lt; myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length &gt;= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
var solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="לסיכום">לסיכום</h2>

<p>לאחר קריאה של מאמר זה, אתם ככל הנראה מבינים כמה מערכים הם שימושים עבורנו. אנחנו נראה אותם לאורך כל הדרך, בדרך כלל בצירוף לולאת <code>for</code> על מנת לבצע פעולה כלשהו על כל איבר במערך. אנחנו נלמד במודול הבא את הדברים השימושיים והבסיסיים שניתן לבצע עם לולאות מסוגים שונים, וביניהן לולאות <code>for</code>.</p>

<p>כעת, בצעו את התרגול הנמצא במאמר הבא, המרכז את מרבית הנושאים שלמדנו במודול זה.</p>

<h2 id="ראו_גם">ראו גם</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> — מדריך מתקדם למערכים ודומיהם - כמו מערכים (typed arrays).</li>
 <li>{{jsxref("Array")}} — דף ההסבר המורחב באתר זה בנושא <code>Array</code> — להעמקה נוספת ולהסברים נוספים בנושא המאפיינים של מערכים.</li>
</ul>

<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p>

<h2 id="במודול_זה">במודול זה</h2>

<ul>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-  JavaScript — מספרים ואופרטורים</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
</ul>