Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

В финальной статье этого раздела, мы познакомимся с массивами — лаконичным способом хранения списка элементов под одним именем. Мы поймем, чем они полезны, затем узнаем, как создать массив, получить, добавить и удалить элементы, хранящиеся в массиве.

Необходимые навыки: Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание о том, что такое JavaScript.
Цель: Понять, что такое массивы и как использовать их в JavaScript.

Что такое массив?

Массивы обычно описываются как «объекты, подобные спискам»; они представляют собой в основном отдельные объекты, которые содержат несколько значений, хранящихся в списке. Объекты массива могут храниться в переменных и обрабатываться во многом так же, как и любой другой тип значения, причем разница заключается в том, что мы можем получить доступ к каждому значению внутри списка отдельно и делать супер полезные и эффективные вещи со списком, а также делать то же самое для каждого из значений. Представим, что у нас есть список продуктов и их цены, хранящиеся в массиве, и мы хотим их просмотреть и распечатать на счете-фактуре, общая сумма всех цен и распечатка общей цены внизу.

Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займет намного больше времени, сам код будет менее эффективным и подверженным  ошибкам. Если бы у нас было 10 элементов для добавления в счет-фактуру, это еще куда ни шло, но как насчет 100 предметов? Или 1000? Мы вернемся к этому примеру позже в статье.

Как и в предыдущих статьях, давайте узнаем о реальных основах массивов, введя некоторые примеры в консоль JavaScript. Мы предоставили один ниже (вы также можете open this console в отдельном окне, или использовать browser developer console, если вам угодно).

Создание массива

Массиваы создаются из квадратных скобок , которые содержат список элементов, разделённых запятыми.

  1. Допустим, мы бы хотели хранить список покупок в массиве — мы бы сделали что-то вроде этого. Введите следующие строчки в вашу консоль:
    var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
    shopping;
  2. В таком случае, каждый элемент в массиве — это строка , но имейте в виду, что вы можете хранить любой элемент в массиве — строку, чило, объект, другую переменную, даже другой массив. Вы также можете перемешивать типы элементов — они не должны все быть числами, строками, и так далее. Попробуйте это:
    var sequence = [1, 1, 2, 3, 5, 8, 13];
    var random = ['tree', 795, [0, 1, 2]];
  3. Попробуйте сами создать несколько массивов, перед тем как двигаться дальше.

Получение и изменение элементов массива

Вы можете после этого получать доступ к отдельным элементам в массиве, используя квадратные скобки, таким же способом каким вы получаете доступ к буквам в строке.

  1. Введите следующее в вашу консоль:
    shopping[0];
    // возвращает "bread"
  2. Вы также можете изменять элемент в массиве, просто дав отдельному элементу массива новое значение. Попробуйте это:
    shopping[0] = 'tahini';
    shopping;
    // shopping теперь возвратит [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    Заметка: Мы говорили это прежде, но просто как напоминание — компьютеры начинают считать с нуля!
  3. Заметьте, что массив внутри массива называется многомерным массивом. Вы можете получить доступ к элементу внутри массива, который сам находится внутри другого массива, объединив два набора квадратных скобок. Например, для доступа к одному из элементов внутри массива, который является третьим элементом внутри массива random (см. Предыдущий раздел), мы могли бы сделать что-то вроде этого:
    random[2][2];
  4. Попробуйте внести некоторые дополнительные изменения в свои примеры массивов, прежде чем двигаться дальше.

Нахождение длины массива

Вы можете найти длину массива (количество элементов в нём) точно таким же способом, как вы находите длину строки (в символах) — используя свойство length. Попробуйте следующее:

sequence.length;
// должно возвратить 7

Это свойство имеет и другие применения, но чаще всего используется, чтобы сказать, что цикл продолжается, пока он не зациклится на всех элементах массива. Так, например:

var sequence = [1, 1, 2, 3, 5, 8, 13];
for (var i = 0; i < sequence.length; i++) {
  console.log(sequence[i]);
}

В будущих статьях вы узнаете о циклах, но вкратце этот код говорит:

  1. Начать цикл с номера позиции 0 в массиве.
  2. Остановить цикл на номере элемента, равном длине массива. Это будет работать для массива любой длины, но в этом случае он остановит цикл на элементе номер 7 (это хорошо, поскольку последний элемент, который мы хотим, чтобы цикл был закрыт, равен 6).
  3. Для каждого элемента вернуть его значение в консоли браузера с помощью console.log().

Некоторые полезные методы массивов

В этом разделе мы рассмотрим некоторые полезные методы, связанные с массивом, которые позволяют нам разбивать строки на элементы массива и наоборот и добавлять новые элементы в массивы.

Преобразование между строками и массивами

Часто вам будут представлены некоторые необработанные данные, содержащиеся в большой длинной строке, и вы можете захотеть отделить полезные пункты до более полезной формы, а затем сделать что-то для них, например отобразить их в таблице данных. Для этого мы можем использовать метод split (). В его простейшей форме он принимает единственный параметр, символ, который вы хотите отделить в строке, и возвращает подстроки между разделителем как элементы в массиве.

Заметка: Хорошо, технически это строковый метод, не метод массива, но мы поместили его в массивы, так как он хорошо подходит для них.

  1. Поиграем с этим, посмотрим как это работает. Сначала, создадим строку в вашей консоли:
    var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
  2. Теперь разделим ee каждой запятой:
    var myArray = myData.split(',');
    myArray;
  3. Наконец, попробуйте найти длину вашего нового массива и извлечь из него некоторые элементы:
    myArray.length;
    myArray[0]; // первый элемент в массиве
    myArray[1]; // второй элемент в массиве
    myArray[myArray.length-1]; // последний элемент в массиве
  4. Вы можете сделать обратное используя методjoin() . Попробуйте следующее:
    var myNewString = myArray.join(',');
    myNewString;
  5.  Другой способ преобразования массива в строку - использовать метод toString() . toString() ,возможно, проще,чем join() поскольку он не принимает параметр, но это ограничивает его. С join()вы можете указать разные разделители (попробуйте выполнить шаг 4 с другим символом, кроме запятой).
    var dogNames = ["Rocket","Flash","Bella","Slugger"];
    dogNames.toString(); //Rocket,Flash,Bella,Slugger

Добавление и удаление элементов массива

Мы еще не рассмотрели добавление и удаление элементов массива - давайте посмотрим на это сейчас. Мы будем использовать массив myArray , с которым мы столкнулись в последнем разделе. Если вы еще не выполнили этот раздел, сначала создайте массив в консоли:

var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];

Прежде всего, чтобы добавить или удалить элемент с конца массива, мы можем использовать push() и pop() соответственно.

  1. Давайте используем push() сначала — заметьте, что вам нужно включить один или более элемнтов, которые вы хотите добавить в конец своего массива. Попробуйте это:
    myArray.push('Cardiff');
    myArray;
    myArray.push('Bradford', 'Brighton');
    myArray;
    
  2. При завершении вызова метода возвращается новая длина массива. Если бы вы хотели сохранить новую длину массива в переменной, вы бы могли сделать что-то вроде этого:
    var newLength = myArray.push('Bristol');
    myArray;
    newLength;
  3. Удаление последнего элемента массива можно совершить с помощью вызова метода pop(). Попробуйте это:
    myArray.pop();
  4. Когда вызов метода завершается, возвращается удалённый элемент. Вы бы могли также сделать такое:
    var removedItem = myArray.pop();
    myArray;
    removedItem;

unshift() и shift() работают точно таким же способом, за исключением того что они работают в начале массива, не в конце.

  1. Во-первых unshift() — попробуйте следующие команды:
    myArray.unshift('Edinburgh');
    myArray;
  2. Теперь shift(); попробуйте эти!
    var removedItem = myArray.shift();
    myArray;
    removedItem;

Active learning: Printing those products!

Вернемся к описанному выше примеру - распечатываем названия продуктов и цены на счет-фактуру, затем суммируем цены и печатаем их внизу. В приведенном ниже примере редактирования есть комментарии, содержащие числа - каждая из этих отметок является местом, где вы должны добавить что-то в код. Они заключаются в следующем:

  1. Ниже комментария // number 1  имеется ряд строк, каждая из которых содержит название продукта и цену, разделенные двоеточием. Мы хотим, чтобы вы превратили это в массив и сохранили его в массиве, называемом  products.
  2. В той же строке, что и комментарий // number 2  начало цикла for.В этой строке мы в настоящее время имеем i <= 0, что является условием , которое заставляет цикл for останавливаться немедленно, потому что оно говорит «останавливаться, когда i не меньше или равен 0», а i начинается с 0. Мы хотели бы, чтобы вы заменили это условным тестом, который останавливает цикл, когда i уже не меньше длины массива products .
  3. Как раз под комментарием // number 3 мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива(name:price) на два отдельных элемента: один содержит только имя и одно, содержащее только цену. Если вы не знаете, как это сделать, обратитесь за помощью к статье Полезные строковые методы  или, что еще лучше, посмотрите раздел Преобразование между строками и массивами этой статьи.
  4. Как часть вышеприведенной строки кода, вы также захотите преобразовать цену из строки в число. Если вы не можете вспомнить, как это сделать, ознакомьтесь с первой статьей строк.
  5.  

    Существует переменная с именем total , которая создается и задается значение 0 в верхней части кода. Внутри цикла (ниже// number 4)мы хотим, чтобы вы добавили строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так что в конце кода в счете будет напечатано правильное общее количество. Для этого вам может понадобится оператор присваивания.
  6. Мы хотим, чтобы вы изменили строку чуть ниже // number 5 , чтобы переменная itemText была равна «текущему имени элемента - цене текущего товара»,  например"Shoes — $23.99" в каждом случае правильная информация для каждого элемента напечатана в счете-фактуре. Это просто простая конкатенация строк, которая должна быть вам знакома.

Active learning: Top 5 searches

A good use for array methods like push() and pop() is when you are maintaining a record of currently active items in a web app. In an animated scene for example, you might have an array of objects representing the background graphics currently displayed, and you might only want 50 displayed at once, for performance or clutter reasons. As new objects are created and added to the array, older ones can be deleted from the array to maintain the desired number.

In this example we're going to show a much simpler use — here we're giving you a fake search site, with a search box. The idea is that when terms are entered in the search box, the top 5 previous search terms are displayed in the list. When the number of terms goes over 5, the last term starts being deleted each time a new term is added to the top, so the 5 previous terms are always displayed.

Note: In a real search app, you'd probably be able to click the previous search terms to return to previous searches, and it would display actual search results! We are just keeping it simple for now.

To complete the app, we need you to:

  1. Add a line below the // number 1 comment that adds the current value entered into the search input to the start of the array. This can be retrieved using searchInput.value.
  2. Add a line below the // number 2 comment that removes the value currently at the end of the array.

Заключение

After reading through this article, we are sure you will agree that arrays seem pretty darn useful; you'll see them crop up everywhere in JavaScript, often in association with loops in order to do the same thing to every item in an array. We'll be teaching you all the useful basics there are to know about loops in the next module, but for now you should give yourself a clap and take a well-deserved break; you've worked through all the articles in this module!

The only thing left to do is work through this module's assessment, which will test your understanding of the articles that came before it.

Посмотрите также

  • Indexed collections — an advanced level guide to arrays and their cousins, typed arrays.
  • Array — the Array object reference page — for a detailed reference guide to the features discussed in this page, and many more.

 

В этом разделе

 

Метки документа и участники

Внесли вклад в эту страницу: 10486, samofand, ArtyomIv
Обновлялась последний раз: 10486,