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

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

Необходимые навыки: Базовая компьютерная грамотность, базовое понимание 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;

Практика: Печать продуктов!

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

  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" в каждом случае правильная информация для каждого элемента напечатана в счете-фактуре. Это просто простая конкатенация строк, которая должна быть вам знакома.

Практика: Топ 5 поисовых запросов

Хорошо использовать методы массива, такие как push () и pop () - это когда вы ведете запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.

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

Примечание: В реальном приложении для поиска вы, вероятно, сможете щелкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.

Чтобы завершить приложение, вам необходимо:

  1. Добавьте строку под комментарием // number 1, который добавляет текущее значение, введенное в ввод поиска, к началу массива. Это можно получить с помощью searchInput.value.
  2. Добавьте строку под комментарием // number 2, который удаляет значение, находящееся в конце массива.

Заключение

Прочитав эту статью, мы уверены, что вы согласитесь, что массивы кажутся довольно полезными; вы увидите, что они появляются повсюду в JavaScript, часто в сочетании с циклами, чтобы делать то же самое для каждого элемента массива. Мы научим вас всем полезным основам, которые нужно знать о циклах в следующем модуле, но пока вы должны дать себе хлопать и воспользоваться заслуженным перерывом; вы проработали все статьи в этом модуле!

Осталось только проработать оценку этого модуля, которая проверит ваше понимание статей, которые были до него.

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

  • 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.

 

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

 

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

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