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

מה זה בעצם מערך - Array?

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

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

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

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

ידע מוקדם:	הבנה בסיסית של מחשב, הבנה בסיסית של HTML, CSS ו - JavaScript.
Objective:	הבנה של מערכים וביצוע פעולות שונות עליהם

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

יצירת מערכים

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

גישה לאיברי המערך ושינוי שלהם

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

מציאת האורך של מערך

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

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

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

מס׳ מתודות שימושיות של מערכים

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

המרה בין מחרוזות ומערכים

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

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

הוספה והסרה של איברים במערך

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

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

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

תרגול עצמאי : הדפסת המוצרים

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

Playable code

<h2>Live output</h2>

<div class="output" style="min-height: 150px;">

<ul>

</ul>

<p></p>

</div>

<h2>Editable code</h2>

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

<textarea id="code" class="playable-code" style="height: 410px;width: 95%">
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 <= 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);
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

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 < 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();
};

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;
}

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

למידה עצמאית: 5 החיפושים האחרונים

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

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

Playable code 2

<h2>Live output</h2>
<div class="output" style="min-height: 150px;">

<input type="text"><button>Search</button>

<ul>

</ul>

</div>

<h2>Editable code</h2>

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


<textarea id="code" class="playable-code" style="height: 370px; width: 95%">
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 < 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 >= 5) {
      // number 2

    }

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

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

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;
}

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 < 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 >= 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();
};

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

לסיכום

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

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

ראו גם

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