Методы массивов JavaScript. Массивы
В JavaScript так же как и в других языках программирования для работы с массивами применяются разные методы.
Методы упрощают построение логики и её реализации в скрипте.
Ниже приведены базовые методы для работы с массивами в JS.
pushМетод push() добавляет значение в конец массива.
Let arr = ; arr.push(312); console.log(arr); // →
popМетод pop() удаляет последний элемент из массива или возвращает его значение.
Let arr = ; arr.pop(); console.log(arr); // →
Используя возможность получить значение последнего элемента массива, как пример, мы можем получить формат изображения:
Let img = "https://example.com/img/name.png"; let format = img.split(".").pop(); console.log(format); // → png console.log(img.split(".")); // → ["https://example", "com/img/name", "png"]
unshiftМетод unshift() добавляет элемент в начало массива.
Let arr = ; arr.unshift(312); console.log(arr); // →
shiftМетод shift() удаляет первый элемент из массива.
Let arr = ; arr.shift(); console.log(arr); // → ;
Нужно понимать, что при применении методов shift и unshift у каждого элемента массива изменяется его индекс. Это может замедлять выполнение программы если массив имеет большую длину. splitМетод split() применяется для трансформации строки в массив. Split разделяет строку (string) по указаному параметру.
Let str = "Аня, Маша, Саша, Даша"; // это строка let arr = str.split(", "); console.log(arr); // → ["Аня", "Маша", "Саша", "Даша"] - это массив
joinМетод join() объединяет элементы массива в строку, через указанный в параметре разделитель.
Let arr = ["Notpad++", "Sublime", "VSCode"]; // это массив let str = arr.join(", "); console.log("Редакторы для кода: " + str); // → "Редакторы для кода: Notpad++, Sublime, VSCode"
sliceМетод slice() создаёт новый массив, в который копирует элементы из источника начиная с элемента c индексом первого параметра переданного в метод, до элемента с индексом второго параметра.
Например: slice(3, 7) вернёт элементы с индексами 3, 4, 5, 6. Элемент с индексом 7 не войдёт в массив.
Если в slice() передан параметр с отрицательным значением, то он возвращает новый массив с количеством элементов указанных в параметре, но уже взятых с конца исходного массива.
Метод slice не изменяет исходный массив.
Вот несколько примеров работы метода slice():
Let arr = ["A", "B", "C", "D", "E", "F", "G"]; // Вернёт массив в котором будут элементы с индексами от 2 до 5 console.log(arr.slice(2, 5)); // → ["C", "D", "E"] // Вернёт новый массив в котором будут элементы с индексами от 3 до arr.length console.log(arr.slice(3)); // → ["D", "E", "F", "G"] // Вернёт копию исходного массива console.log(arr.slice()); // → ["A", "B", "C", "D", "E", "F", "G"] // Вернёт новый массив состоящий из последних трёх элементов исходного console.log(arr.slice(-3)); // → ["E", "F", "G"]
spliceМетод splice() изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.
Синтаксис:
Array.splice(start, deleteCount[, item1[, item2[, ...]]])
Параметры:
- start - Индекс, по которому начинать изменять массив. Если больше длины массива, реальный индекс будет установлен на длину массива. Если отрицателен, указывает индекс элемента с конца.
- deleteCount - Целое число, показывающее количество старых удаляемых из массива элементов. Если deleteCount равен 0, элементы не удаляются. В этом случае вы должны указать как минимум один новый элемент. Если deleteCount больше количества элементов, оставшихся в массиве, начиная с индекса start, то будут удалены все элементы до конца массива.
- itemN - Необязательные параметры. Добавляемые к массиву элементы. Если вы не укажете никакого элемента, splice() просто удалит элементы из массива.
Если количество указанных вставляемых элементов будет отличным от количества удаляемых элементов, массив изменит длину после вызова.
Let arr = ["Барса", "Шахтёр", "МЮ", "Милан", "Реал", "Аякс", "Ювентус"]; let nax = arr.splice(2, 3); arr.splice(2, 3); console.log(nax); // → ["МЮ", "Милан", "Реал"] console.log(arr); // → ["Барса", "Шахтёр"] arr.splice(1, 0, "Зенит", "ЦСКА", "Спартак"); console.log(arr); // → ["Барса", "Зенит", "ЦСКА", "Спартак", "Шахтёр"]
reverseМетод reverse() меняет порядок элементов массива на обратный. В результате первый элемент массива становится последним, а последний элемент - первым.
Let arr = ; console.log(arr.reverce()); // → console.log(["Алиса", "БГ", "ГО", "ДДТ"].reverce()); // → ["ДДТ", "ГО", "БГ", "Алиса"]
mapМетод map() проходит по элементам массива производя с ними заданные действия и возвращает копию массива с изменёнными элементами.
В примере ниже к каждому элементу массива прибавим значение индекса этого элемента (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4):
Let arr = ; let testMap = arr.map((element, index) => element + index); console.log(testMap); //
или каждое значение массива умножим к примеру на 12
Let arr = ; let testMap = arr.map(a => a * 12); console.log(testMap); // →
filterМетод filter() используется для фильтрации массивов. Он проходит по массиву, возвращая только те элементы, которые проходят заданное условие.
Например отфильтруем значения массива из чисел оставив только те, которые больше 21
Let arr = ; let testFilter = arr.filter(element => element > 21); console.log(testFilter); // →
Обратите внимание, что 21 не вошло в результат массива, так как условие было вернуть то что больше 21. Чтобы и 21 вошло в массив, то условие ставим как больше или равно: element >= 21
reduceМетод reduce() последовательно идёт по элементам массива, аккумулируя при этом промежуточный результат согласно заданного в условии действия функции. В конечном результате он возвращает всего одно значение.
Часто этот метод применяют для того, чтобы найти сумму всех чисел в массиве. Пример:
Let arr = ; let summa = arr.reduce((acc, element) => acc + element); console.log(summa); // → 370
sortМетод sort() применяется для сортировки элементов массива согласно заданным параметрам.
Пример - возьмём массив чисел о отсортируем их по порядку возврастания:
Let arr = ; let testSortArr = arr.sort((a, b) => a - b); console.log(testSortArr); // →
includesМетод includes() определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого true или false .
Пример использования includes() .
Вот такое логическое выражение:
Let animal = "dog"; if (animal == "cat" || animal == "dog" || animal == "lion" || animal == "horse") { // ........ }
используя метод includes можно записать вот так:
Let animal = "dog"; const animals = ["cat", "dog", "lion", "horse"]; if (animals.includes(animal)) { // ........... }
На этом уроке мы познакомимся с массивами, научимся их создавать, выполнять операции над их элементами, а также рассмотрим основные методы и свойства, доступные при работе с ними.
Понятие массиваМассив – это упорядоченный набор данных, который имеет имя и является экземпляром объекта Array. Он состоит из элементов, доступ к которым осуществляется с помощью их порядкового номера (индекса). Нумерация элементов в массиве начинается не с 1, а с 0.
На следующем рисунке приведён числовой массив, состоящий из 7 элементов. Элементы данного массива содержат следующие данные: 1 элемент (0 индекс) - число 123, 2 элемент (1 индекс) - число 214, 3 элемент (2 индекс) - число 315 и т.д.
//элемент в который будем выводить массив
//создание числового массива
var numberArray = new Array(123,214,315,312,124,206,218);
//вывести массив в элемент, имеющий id="myP"
document.getElementById("myP").innerHTML =
"1 Элемент массива: " + numberArray +
"
" +
"2 Элемент массива: " + numberArray +
"
" +
"3 Элемент массива: " + numberArray +
"
" +
"4 Элемент массива: " + numberArray +
"
" +
"5 Элемент массива: " + numberArray +
"
" +
"6 Элемент массива: " + numberArray +
"
" +
"7 Элемент массива: " + numberArray;
Создание массива на языке JavaScript осуществляется с помощью оператора new и функции-конструктора Array . В круглых скобках функции-конструктора Array можно указать одно из следующих значений:
- Число. В этом случае данная функция создаст массив, состоящий из указанного числа элементов. Все эти элементы будут иметь значения undefined .
- Несколько значений через запятую. В данном случае функция-конструктор Array создаст массив, состоящий из указанного количества элементов, и присвоит им соответствующие значения.
- Ничего. В этом случае данная функция создаст пустой массив.
В отличие от многих других языков программирования массивы в JavaScript автоматически меняют свой размер, т.е. они изначально являются динамическими. Таким массивам не надо задавать какие-либо размеры. Ещё одной отличительной чертой массивов JavaScript является то, что в разных элементах одного и того же массива могут содержаться различные типы данных.
Работа с элементами массиваДля того чтобы обратиться к определённому элементу массива, необходимо указать имя этого массива и в квадратных скобках его индекс. Данная операция ещё называется операцией индексации.
Например, создадим пустой массив и добавим в него 4 текстовых элемента:
//создание пустого массива smartphoneColors var smartphoneColors = new Array(); //присваиваем 1 элементу массива (индекс 0) значение "Black" smartphoneColors = "Black"; //присваиваем 2 элементу массива (индекс 1) значение "White" smartphoneColors = "White"; //присваиваем 3 элементу массива (индекс 2) значение "Grey" smartphoneColors = "Grey"; //присваиваем 4 элементу массива (индекс 3) значение "Blue" smartphoneColors = "Blue";
Например, выведем в консоль браузера (F12) значения 2 и 4 элемента массива smartphoneColors:
Console.log("2 элемент = " + smartphoneColors); console.log("4 элемент = " + smartphoneColors);
Определение количества элементов в массиве осуществляется с помощью свойства length .
//создадим массив путём перечисления значений элементов в функции Array var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //переменной lengthArray присвоим длину массива volumeHDDs var lengthArray = volumeHDDs.length;
Как получить первый элемент массиваПолучение значения первого элемента массива осуществляется с помощью указания в квадратных скобках этого массива числа 0:
//создание массива, состоящего из 3 элементов var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //получение значения первого элемента массива var firstValue = volumeHDDs;
Как получить последний элемент массиваПолучение значения последнего элемента массива осуществляется с помощью указания в квадратных скобках этого массива выражения имя_массива.length-1:
//создание массива, состоящего из 3 элементов var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //получение значения последнего элемента массива var lastValue = volumeHDDs;
Перебор массиваПеребор элементов массива осуществляется с помощью цикла for .
Например, переберём все элементы массива и выведем их значения в консоль браузера (F12):
//создание массива nameStudents, состоящего из 4 элементов
var nameStudents = new Array("Петя","Вася","Коля","Максим");
//перебор элементов массива от 0 до длины массива-1
for (var i=0; i
