Методы массивов 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
Определение и применениеJavaScript метод splice() позволяет изменить содержимое массива за счёт удаления существующих элементов, и/или добавления новых элементов в массив.
Обращаю Ваше внимание, что метод splice() изменяет существующий массив, а не возвращает новый. Удаленные элементы возвращаются как новый объект Array .
Поддержка браузерами| splice() | Да | Да | Да | Да | Да | Да |
| start | Целое число, определяющее индекс массива, с которого будут удалены из массива и/или добавлены в массив элементы. Допускается использование отрицательных значений , в этом случае индекс с которого будет вызван метод будет расчитан по следующей формуле: length (длина массива) + start . Является обязательным значением. |
| deleteCount | Целое число, определяющее количество удаляемых из массива элементов, начииная с индекса указанного в start . Если deleteCount равен 0, то элементы не удаляются. Если значение deleteCount больше количества оставшихся элементов в массиве, то все оставшиеся элементы массива будут удалены. Необязательное значение, отрицательные значения не допускаются . |
| element (-s) | Элемент, или элементы, которые будут добавлены к массиву. Индекс массива по которому будут вставлены новые элементы соответствует параметру start . Необязательное значение . |
Всю пользу встроенных методов JavaScript можно оценить только правильно понимая, как они работают. В этой статье мы разберем три метода: slice () , splice () и split () . Даже опытные разработчики часто их путают: возможно из-за того, что все три названия так похожи.
Студентам и начинающим разработчикам: внимательно прочитайте эту статью-об этих трех методах вас могут спросить на собеседовании.
В конце вы найдете конспект информации о всех трех методах. Давайте начнем.
Массивы в JavaScriptСперва нужно разобраться, как работают массивы JavaScript. Как и в других языках программирования, массивы используются для хранения нескольких единиц данных. Разница в том, что массивы JavaScript могут содержать несколько типов данных одновременно .
Чтобы работать с такими массивами, нам понадобятся JavaScript-методы: например, slice () & splice () . Создать массив можно так:
Let arrayDefinition = ; // Array declaration in JS
Теперь создадим другой массив с данными разного типа:
Let array = ;
В JavaScript можно создавать массивы с разными типами данных: с числами, строками и логическими значениями.
Slice ()Метод slice () копирует заданную часть массива и возвращает эту скопированную часть в виде нового массива. Исходный массив при этом не изменяется .
Array.slice(from, until);
- From: Нарезает массив начиная с этого элемента
- Until: Нарезает массив до этого элемента
Например, я хочу нарезать первые три элемента из упомянутого выше массива. Первый элемент массива всегда обозначается как 0, поэтому в качестве параметра from я указывают 0.
Array --> 1 // included array --> 2 // included array --> 3 // included array --> "hello world" // not included
Здесь можно запутаться! Вот почему я объявил “until” .
Let newArray = array.slice(0, 3); // Return value is also an array
Наконец я создаю новый массив и связываю его с переменной newArray . Посмотрим результат:
Нарезка массива и добавление элементов в новый массив
Переменная newArray становится новым массивом, оригинальный массив остается без изменений.
Важное примечание: метод Slice() можно использовать и в строках.
Splice ()Название этого метода похоже на slice(): в таких похожих названиях разработчики часто путаются. Метод splice() добавляет и удаляет элементы из массива, меняя его. Давайте посмотрим, как добавлять и удалять элементы с помощью метода splice() :
Удаление элементовЧтобы удалить элементы, введите элемент, с которого нужно начать (index) и количество элементов, которые нужно удалить (number of elements) :
Array.splice(index, number of elements);
Параметр Index - это начальная точка удаления элементов. Элементы с порядковым номером меньше заданного параметра Index не будут удалены:
Array.splice(2); // Every element starting from index 2, will be removed
Если не указать второй параметр, все элементы от заданного параметра Index и до конца будут удалены:
В качестве еще одно примера, я указал 1 в качестве второго параметра: таким образом, каждый раз при повторе метода splice () будет удалять по одному элементу, начиная со второго:
Array.splice(2, 1);
Массив до метода splice ()
Splice () применен один раз:
Элемент 3 удален: следовательно, теперь элемент “hello world” имеет порядковый номер 2
Splice () применен два раза:
На этот раз, был удален элемент “hello world”, потому что его порядковый номер 2
Так можно продолжать до тех пор, пока не останется элементов с порядковым номером 2.
Добавление элементовЧтобы добавить элементы с помощью splice () , необходимо ввести их в качестве третьего, четвертого и пятого элемента (в зависимости от того, сколько элементов нужно добавить):
Array.splice(index, number of elements, element, element);
В качестве примера, добавим элементы a и b в самое начало массива:
Array.splice(0, 0, "a", "b");
Элементы a и b добавлены в начало массива
Методы Slice() и splice() используются для массивов. Метод split() используется для строк . Он разделяет строку на подстроки и возвращает их в виде массива. У этого метода 2 параметра, и оба из них не обязательно указывать .
String.split(separator, limit);
- Separator: определяет, как строка будет поделена на подстроки: запятой, знаком и т.д.
- Limit: ограничивает количество подстрок заданным числом
Метод split() не работает напрямую с массивами . Тем не менее, сначала можно преобразовать элементы массива в строки и уже после применить метод split() .
Давайте посмотрим, как это работает.
Сначала преобразуем массив в строку с помощью метода toString() :
Let myString = array.toString();
Затем разделим строку myString запятыми и ограничим количество подстрок до трех. Затем преобразуем строки в массив:
Let newArray = myString.split(",", 3);
В виде массива вернулись первые 3 элемента
Таким образом, элементы массива myString разделены запятыми. Мы поставили ограничение в 3 подстроки, поэтому в качестве массива вернулись первые 3 элемента.
Примечание: Используя команду array.split(""); можно все символы в строке разделить на подстроки.
Все символы разделены на подстроки
- Копирует элементы из массива
- Возвращает их в новый массив
- Не меняет оригинальный массив
- Нарезает массив с помощью параметров from и until: array.slice (from, until)
- Не включает параметр, заданный в “until”
- Используется и в массивах, и в строках
- Добавляет и удаляет элементы из массива
- Возвращает массив удаленных элементов
- Меняет массив
- Добавление элементов: array.splice (index, number of elements, element)
- Удаление элементов: array.splice (index, number of elements)
- Используется только в массивах
- Делит строки на подстроки
- Возвращает их в виде массива
- 2 параметра, и оба из них не обязательно указывать: string.split(separator, limit)
- Не меняет оригинальную строку
- Используется только в строках
В JavaScript есть еще много других встроенных методов работы с массивами и строками. Если вы научитесь их использовать, программировать станет намного проще.
М етод splice() в массивах Javascript изменяет содержимое массива, добавляя новые элементы, удаляя старые.СинтаксисЕго синтаксис выглядит следующим образом:
Array.splice(index, howMany, [, ..., elementN]);
Детали параметров- index – Индекс, с которого начинается изменение массива.
- howMany – Целое число, указывающее количество удаляемых старых элементов массива. Если howMany равно 0, элементы не удаляются.
- element1, …, elementN – Элементы, добавляемые в массив. Если вы не указываете никаких элементов, splice просто удаляет элементы из массива.
Возвращает извлеченный массив на основе переданных параметров.
ПримерПопробуйте следующий пример.
JavaScript - Массивы. Метод splice
var arr = ["orange", "melon", "milk", "sugar", "coffee"];
var removed = arr.splice(2, 0, "water");
document.write("После добавления 1: " + arr);
document.write("
удален: " + removed);
removed = arr.splice(3, 1);
document.write("
После добавления 1: " + arr);
document.write("
удален: " + removed);
