Диапазон чисел, которые вы можете использовать в качестве значений индекса, на одно меньше, чем длина самого массива. Причина в том, что индексы начинаются с 0. Если в массиве есть пять элементов, то попытка отобразить grocery[6] или grocery[5] приведет к появлению сообщения undefined.
Идем дальше. В большинстве реальных сценариев вам понадобится программно перебирать весь массив вместо обращения к каждому элементу отдельно.
Для осуществления этого вы можете использовать цикл for:
for (let i = 0; i < groceries.length; i++) {
let item = groceries[i];
}
Помните, что диапазон цикла начинается с 0 и заканчивается на одно значение раньше полной длины массива (возвращаемой как свойство length). Все работает именно так по уже описанной мной причине — значения индекса начинаются с 0 и заканчиваются на одно значение раньше, чем возвращаемая длина массива. При этом свойство length возвращает точное число элементов.
Добавление элементов
Ваши массивы будут редко сохранять свое изначальное состояние, так как вы, скорее всего, будете добавлять в них элементы. Для этого используется метод push:
groceries.push("Cookies");
Метод push вызывается непосредственно для массива, при этом в него передаются добавляемые данные. В итоге вновь добавленные элементы всегда оказываются в конце массива.
Например, если выполнить этот код для изначального массива, вы увидите, что элемент Cookies (печенье) добавлен в его конец (рис. 13.3).
Рис. 13.3. Теперь массив расширен добавленным в конец элементом Cookies
Если же вы хотите добавить данные в начало, используйте метод unshift:
groceries.unshift("Bananas");
При добавлении данных в начало массива значение индекса каждого из существующих в нем элементов увеличивается с учетом вновь появившихся данных (рис. 13.4).
Рис. 13.4. Только что добавленный элемент вставлен в начало
Причина в том, что первый элемент массива всегда будет иметь значение индекса 0. Поэтому элемент, изначально занимающий позицию значения 0, вынужденно смещается, смещая и все следующие за ним элементы, освобождая тем самым место для добавляемых данных.
При использовании методы push и unshift помимо добавления элементов также возвращают новую длину массива:
console.log(groceries.push("Cookies")); // возвращает 6
Я не уверен, полезно ли это, но на всякий случай имейте это в виду.
Удаление элементов
Для удаления можно использовать методы pop и shift. Pop удаляет последний элемент и возвращает его:
let lastItem = groceries.pop();
Метод shift делает то же самое, но с обратной стороны массива, то есть вместо удаления и возвращения последнего элемента он проделывает это с первым:
let firstItem = groceries.shift();
При удалении элемента из начала массива позиции индексов остальных уменьшаются на 1, заполняя тем самым появившийся пропуск (рис. 13.5).
Рис. 13.5. Что происходит при удалении элементов из массива
Обратите внимание, что при добавлении элементов с помощью unshift или push значение, возвращаемое при вызове этих методов, является новой длиной массива. Но при использовании методов pop или shift происходит не то же самое. В данном случае при удалении элементов значение, возвращаемое при вызове метода, является самим удаляемым элементом.
Поиск элементов в массиве
Для поиска элементов внутри массива существует несколько методов: indexOf, lastIndexOf, includes, find, findIndex и filter. Во избежание усложнения мы пока что сконцентрируемся на indexOf и lastIndexOf. Работа этих двух индексов заключается в сканировании массива и возвращении индекса совпадающего элемента.
Метод indexOf возвращает первый найденный индекс искомого элемента:
let groceries =["Milk", "Eggs", "Frosted Flakes", "Salami", "Juice"];
let resultIndex = groceries.indexOf("Eggs",0);
console.log(resultIndex); // 1
Обратите внимание, что переменная resultIndex содержит результат вызова indexOf для массива groceries. Для использования indexOf я передаю ему искомый элемент вместе с индексом, с которого следует начать:
groceries.indexOf("Eggs", 0);
В данном случае indexOf вернет значение 1.
Метод lastIndexOf похож на indexOf в использовании, но отличается тем, что возвращает при обнаружении элемента. Если indexOf находит первый индекс искомого элемента, то lastIndexOf находит и возвращает последний индекс этого элемента.
Если же искомый элемент в массиве отсутствует, оба этих метода возвращают -1.