Массивы
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/content/files/en-us/learn/javascript/первые_шаги/создатель_глупых_историй/index.md)
В финальной статье этого раздела, мы познакомимся с массивами — лаконичным способом хранения списка элементов под одним именем. Мы поймём, чем они полезны, затем узнаем, как создать массив, получить, добавить и удалить элементы, хранящиеся в массиве.
Необходимые навыки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание о том, что такое JavaScript. |
---|---|
Цель: | Понять, что такое массивы и как использовать их в JavaScript. |
Что такое массив?
Массивы обычно описываются как «объекты, подобные спискам»; они представляют собой в основном отдельные объекты, которые содержат несколько значений, хранящихся в списке. Объекты массива могут храниться в переменных и обрабатываться во многом так же, как и любой другой тип значения, причём разница заключается в том, что мы можем получить доступ к каждому значению внутри списка отдельно и делать супер полезные и эффективные вещи со списком, а также делать то же самое для каждого из значений. Представим, что у нас есть список продуктов и их цены, хранящиеся в массиве, и мы хотим их просмотреть и распечатать на счёте-фактуре, общая сумма всех цен и распечатка общей цены внизу.
Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займёт намного больше времени, сам код будет менее эффективным и подверженным ошибкам. Если бы у нас было 10 элементов для добавления в счёт-фактуру, это ещё куда ни шло, но как насчёт 100 предметов? Или 1000? Мы вернёмся к этому примеру позже в статье.
Как и в предыдущих статьях, давайте узнаем о реальных основах работы с массивами, введя некоторые примеры в консоль разработчика.
Создание массива
Массивы создаются из квадратных скобок , которые содержат список элементов, разделённых запятыми.
-
Допустим, мы бы хотели хранить список покупок в массиве — мы бы сделали что-то вроде этого. Введите следующие строчки в вашу консоль:
jsvar shopping = ["bread", "milk", "cheese", "hummus", "noodles"]; shopping;
-
В данном случае, каждый элемент в массиве — это строка , но имейте в виду, что вы можете хранить любой элемент в массиве — строку, число, объект, другую переменную, даже другой массив. Вы также можете перемешивать типы элементов — они не должны все быть числами, строками, и так далее. Попробуйте это:
jsvar sequence = [1, 1, 2, 3, 5, 8, 13]; var random = ["tree", 795, [0, 1, 2]];
-
Попробуйте сами создать несколько массивов, перед тем как двигаться дальше.
Получение и изменение элементов массива
Вы можете после этого получать доступ к отдельным элементам в массиве, используя квадратные скобки, таким же способом каким вы получаете доступ к буквам в строке.
-
Введите следующее в вашу консоль:
jsshopping[0]; // возвращает "bread"
-
Вы также можете изменять элемент в массиве, просто дав отдельному элементу массива новое значение. Попробуйте это:
jsshopping[0] = "tahini"; shopping; // shopping теперь возвратит [ "tahini", "milk", "cheese", "hummus", "noodles" ]
Примечание: Мы уже упоминали это прежде, но просто как напоминание — компьютеры начинают считать с нуля!
-
Заметьте, что массив внутри массива называется многомерным массивом. Вы можете получить доступ к элементу внутри массива, который сам находится внутри другого массива, объединив два набора квадратных скобок. Например, для доступа к одному из элементов внутри массива, который является третьим элементом внутри массива
random
(см. предыдущую секцию данной статьи), мы могли бы сделать что-то вроде этого:jsrandom[2][2];
-
Попробуйте внести некоторые дополнительные изменения в свои примеры массивов, прежде чем двигаться дальше.
Нахождение длины массива
Вы можете найти длину массива (количество элементов в нём) точно таким же способом, как вы находите длину строки (в символах) — используя свойство 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]);
}
В будущих статьях вы узнаете о циклах, но вкратце этот код говорит:
- Начать цикл с номера позиции 0 в массиве.
- Остановить цикл на номере элемента, равном длине массива. Это будет работать для массива любой длины, но в этом случае он остановит цикл на элементе номер 7 (это хорошо, поскольку последний элемент, который мы хотим, чтобы цикл был закрыт, равен 6).
- Для каждого элемента вернуть его значение в консоли браузера с помощью
console.log()
.
Некоторые полезные методы массивов
В этом разделе мы рассмотрим некоторые полезные методы, связанные с массивом, которые позволяют нам разбивать строки на элементы массива и наоборот, а также добавлять новые элементы в массивы.
Преобразование между строками и массивами
Часто у вас могут быть некоторые необработанные данные, содержащиеся в большой длинной строке, и вы можете захотеть разделить полезные пункты до более удобной и полезной формы, а затем сделать что-то для них, например отобразить их в таблице данных. Для этого мы можем использовать метод split ()
. В его простейшей форме он принимает единственный параметр, символ, который вы хотите отделить в строке, и возвращает подстроки между разделителем как элементы в массиве.
Примечание: Хорошо, технически это строковый метод, не метод массива, но мы поместили его в массивы, так как он хорошо подходит для них.
-
Поиграем с этим, посмотрим как это работает. Сначала, создадим строку в вашей консоли:
jsvar myData = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle";
-
Теперь разделим ee посредством запятой:
jsvar myArray = myData.split(","); myArray;
-
Наконец, попробуйте найти длину вашего нового массива и извлечь из него некоторые элементы:
jsmyArray.length; myArray[0]; // первый элемент в массиве myArray[1]; // второй элемент в массиве myArray[myArray.length - 1]; // последний элемент в массиве
-
Вы можете сделать обратное используя метод
join()
. Попробуйте следующее:jsvar myNewString = myArray.join(","); myNewString;
-
Другой способ преобразования массива в строку - использовать метод
toString()
.toString()
, возможно, проще,чемjoin()
поскольку он не принимает параметр, но это ограничивает его. Сjoin()
вы можете указать разные разделители (попробуйте выполнить шаг 4 с другим символом, кроме запятой).jsvar dogNames = ["Rocket", "Flash", "Bella", "Slugger"]; dogNames.toString(); //Rocket,Flash,Bella,Slugger
Добавление и удаление элементов массива
Мы ещё не рассмотрели добавление и удаление элементов массива - давайте посмотрим на это сейчас. Мы будем использовать массив myArray
, с которым мы столкнулись в предыдущем разделе. Если вы ещё не прошли этот раздел, сначала создайте массив в консоли:
var myArray = [
"Manchester",
"London",
"Liverpool",
"Birmingham",
"Leeds",
"Carlisle",
];
Прежде всего, чтобы добавить или удалить элемент с конца массива, мы можем использовать push()
и pop()
соответственно.
-
Давайте сначала используем метод
push()
— заметьте, что вам нужно указать один или более элементов, которые вы хотите добавить в конец своего массива. Попробуйте это:jsmyArray.push("Cardiff"); myArray; myArray.push("Bradford", "Brighton"); myArray;
-
При завершении вызова метода возвращается новая длина массива. Если бы вы хотели сохранить новую длину массива в переменной, вы бы могли сделать что-то вроде этого:
jsvar newLength = myArray.push("Bristol"); myArray; newLength;
-
Удаление последнего элемента массива можно совершить с помощью вызова метода
pop()
. Попробуйте это:jsmyArray.pop();
-
Когда вызов метода завершается, возвращается удалённый элемент. Вы бы могли также сделать такое:
jsvar removedItem = myArray.pop(); myArray; removedItem;
unshift()
и shift()
работают точно таким же способом, за исключением того что они работают в начале массива, а не в конце.
-
Сначала, попробуем метод
unshift()
:jsmyArray.unshift("Edinburgh"); myArray;
-
Теперь
shift()
; попробуйте эти!jsvar removedItem = myArray.shift(); myArray; removedItem;
Практика: Печать продуктов!
Вернёмся к описанному выше примеру - распечатываем названия продуктов и цен на счёт-фактуру, затем суммируем цены и печатаем их внизу. В приведённом ниже редактируемом примере есть комментарии, содержащие числа - каждая из этих отметок является местом, где вы должны добавить что-то в код. Они заключаются в следующем:
- Ниже комментария
// number 1
имеется ряд строк, каждая из которых содержит название продукта и цену, разделённые двоеточием. Нужно превратить их в массив и сохранить его под названиемproducts
. - На строке с комментарием
// number 2
начинается цикл for. В строке цикла имеетсяi <= 0
, что является условием , которое заставляет цикл for выполняться только один раз, так как это значение i сообщает циклу: «останавливаться, когдаi
меньше или равен 0», при этомi
начинается с 0. Нужно заменитьi <= 0
условным тестом, который останавливает цикл, когдаi
перестаёт быть меньше длины массиваproducts
. - Под комментарием
// number 3
мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива (name:price
) на два отдельных элемента: один содержит только имя, а другой - содержащее только цену. Если не знаете, как это сделать, ещё раз просмотрите статью Полезные строковые методы, а лучше, посмотрите раздел Преобразование между строками и массивами этой статьи. - В рамках приведённой выше строки нужно преобразовать цену из строки в число. Если не помните, как это сделать, ознакомьтесь со статьёй строки в JavaScript.
- В верхней части кода есть переменная с именем
total
, которая содержит значение0
. Внутри цикла (под комментарием// number 4
) нужно добавить строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так чтобы в конце кода была выведена корректная сумма в счёт-фактуре. Для этого вам может понадобится оператор присваивания. - Под комментарием
// number 5
нужно изменить строку так, чтобы переменнаяitemText
была равна "current item name — $current item price", например "Shoes — $23.99" для каждого случая, чтобы корректная информация для каждого элемента была напечатана в счёте-фактуре. Здесь обычная конкатенация строк, которая должна быть вам знакома.
Практика: Топ 5 поисковых запросов
Хорошим тоном, является использование методов массива, таких как push ()
и pop ()
- это когда вы ведёте запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.
В этом примере мы собираемся показать гораздо более простое использование - ниже мы даём вам поддельный поисковый сайт с полем поиска. Идея заключается в том, что когда в поле поиска вводятся запросы, в списке отображаются 5 предыдущих поисковых запросов. Когда число терминов превышает 5, последний член начинает удаляться каждый раз, когда новый член добавляется в начало, поэтому всегда отображаются 5 предыдущих терминов.
Примечание: В реальном приложении для поиска вы, вероятно, сможете щёлкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.
Чтобы завершить приложение, вам необходимо:
- Добавьте строку под комментарием
// number 1
, которая добавляет текущее значение, введённое в ввод поиска, к началу массива. Его можно получить с помощьюsearchInput.value
. - Добавьте строку под комментарием
// number 2
, которая удаляет значение, находящееся в конце массива.
Заключение
Прочитав эту статью, мы уверены, что вы согласитесь, что массивы кажутся довольно полезными; вы увидите, что они появляются повсюду в JavaScript, часто в сочетании с циклами, чтобы делать то же самое для каждого элемента массива. Мы научим вас всем полезным основам, которые нужно знать о циклах в следующем модуле, но пока вы должны себе похлопать и воспользоваться заслуженным перерывом; вы проработали все статьи в этом модуле!
Осталось только выполнить тестовую задачу, которая проверит ваше понимание статей, которые вы прочли до этого момента. Удачи!
Посмотрите также
- Indexed collections — an advanced level guide to arrays and their cousins, typed arrays.
Array
— theArray
object reference page — for a detailed reference guide to the features discussed in this page, and many more.