Методы массивов JavaScript. Использование функции delete для удаления элемента массива

23.06.2020 Photoshop

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place .

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax let arrDeletedItems = array .splice(start [, deleteCount [, item1 [, item2 [, ...]]]]) Parameters start The index at which to start changing the array. If greater than the length of the array, start will be set to the length of the array. If negative, it will begin that many elements from the end of the array. (In this case, the origin -1 , meaning - n is the index of the n th last element, and is therefore equivalent to the index of array .length - n .) If array .length + start is less than 0 , it will begin from index 0 . deleteCount Optional An integer indicating the number of elements in the array to remove from start . If deleteCount is omitted, or if its value is equal to or larger than array .length - start (that is, if it is equal to or greater than the number of elements left in the array, starting at start), then all the elements from start to the end of the array will be deleted.

Note: In IE8, it won"t delete all when deleteCount is omitted.

If deleteCount is 0 or negative, no elements are removed. In this case, you should specify at least one new element (see below). item1 , item2 , ... Optional The elements to add to the array, beginning from start . If you do not specify any elements, splice() will only remove elements from the array.

Return value

An array containing the deleted elements.

If only one element is removed, an array of one element is returned.

If no elements are removed, an empty array is returned.

Description

If the specified number of elements to insert differs from the number of elements being removed, the array"s length will be different at the end of the call.

Examples Remove 0 (zero) elements from index 2, and insert "drum" let myFish = ["angel", "clown", "mandarin", "sturgeon"] let removed = myFish.splice(2, 0, "drum") // myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] // removed is , no elements removed Remove 0 (zero) elements from index 2, and insert "drum" and "guitar" let myFish = ["angel", "clown", "mandarin", "sturgeon"] let removed = myFish.splice(2, 0, "drum", "guitar") // myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] // removed is , no elements removed Remove 1 element from index 3 let myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"] let removed = myFish.splice(3, 1) // removed is ["mandarin"] // myFish is ["angel", "clown", "drum", "sturgeon"] Remove 1 element from index 2, and insert "trumpet" let myFish = ["angel", "clown", "drum", "sturgeon"] let removed = myFish.splice(2, 1, "trumpet") // myFish is ["angel", "clown", "trumpet", "sturgeon"] // removed is ["drum"] Remove 2 elements from index 0, and insert "parrot", "anemone" and "blue" let myFish = ["angel", "clown", "trumpet", "sturgeon"] let removed = myFish.splice(0, 2, "parrot", "anemone", "blue") // myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] // removed is ["angel", "clown"] Remove 2 elements from index 2 let myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"] let removed = myFish.splice(2, 2) // myFish is ["parrot", "anemone", "sturgeon"] // removed is ["blue", "trumpet"] Remove 1 element from index -2 let myFish = ["angel", "clown", "mandarin", "sturgeon"] let removed = myFish.splice(-2, 1) // myFish is ["angel", "clown", "sturgeon"] // removed is ["mandarin"] Remove all elements after index 2 (incl.) let myFish = ["angel", "clown", "mandarin", "sturgeon"] let removed = myFish.splice(2) // myFish is ["angel", "clown"] // removed is ["mandarin", "sturgeon"] Specifications Specification Status Comment
ECMAScript Latest Draft (ECMA-262)
Draft
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of "Array.prototype.splice" in that specification.
Standard
ECMAScript 5.1 (ECMA-262)
The definition of "Array.prototype.splice" in that specification.
Standard
ECMAScript 3rd Edition (ECMA-262) Standard Initial definition. Implemented in JavaScript 1.2.
Browser compatibility

The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Server Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js splice
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 5.5

Notes

Full support 5.5

Notes

Notes From Internet Explorer 5.5 through 8, all elements of the array will not be deleted if deleteCount is omitted. This behavior was fixed in Internet Explorer 9.
Opera Full support Yes Safari Full support 1 WebView Android Full support Yes Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support 1 Samsung Internet Android Full support Yes nodejs Full support Yes
Legend Full support Full support See implementation notes. See implementation notes.

В 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

М етод 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);

Вывод После добавления 1: orange,melon,water,milk,sugar,coffee удален: После добавления 1: orange,melon,water,sugar,coffee удален: milk

В JavaScript удалить элемент массива можно несколькими методами. К ним относятся методы pop и shift . Метод pop удаляет первый элемент из заданного массива. Метод shift удаляет последний элемент из заданного массива.

Можно задать длину массива 0, если требуется удалить все элементы из данного массива. Но что, вам нужно удалить определенный элемент?

Например:

Array_name.splice (index);

Array_name.delete

Можно использовать метод splice . Он возвращает новый массив удаленных элементов. А первоначальный массив содержит оставшиеся элементы.

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

Демонстрация удаления конкретного элемента с использованием метода splice

В этой демо-версии создается массив чисел. Первоначально в массив добавляются пять элементов. После этого используется метод splice для удаления третьего элемента. Таким же образом в JavaScript можно удалить первый элемент массива.

Элементы числового массива отображаются до и после использования метода JavaScript splice следующим образом:

Код JavaScript с методом splice :


"; for (i=0; i < Arr_Numbers.length; i++){ the_arr_before_after += Arr_Numbers[i] + "
"; } document.getElementById("p1").innerHTML = the_arr_before_after; Arrretrun = Arr_Numbers.splice(2,1); var the_arr_before_after = "Array elements after splice method:
"; for (i=0; i < Arr_Numbers.length; i++){ the_arr_before_after += Arr_Numbers[i] + "

Вы заметили, что я использовал для JavaScript удаления элемента массива два параметра. Первый указывает индекс элемента, который нужно удалить. Второй – сколько элементов нужно удалить после указанного ключа.

В следующей демо-версии показан случай, когда мы используем второй параметр.

Что делать, если второй параметр не указан в JavaScript-методе splice?

Использование того же кода, но без второго параметра в методе splice :

Arr_Numbers.splice(2);

Код и результат:

Посмотреть онлайн демо-версию и код

Как видите, здесь были удалены и все элементы перед указанным номером индекса. Кроме этого метод splice возвращает массив удаленных элементов.

Код JavaScript :

var Arr_Numbers = ; var i; var the_arr_before_after = "The original array:
"; for (i=0; i < Arr_Numbers.length; i++){ the_arr_before_after += Arr_Numbers[i] + "
"; } document.getElementById("p1").innerHTML = the_arr_before_after; Arrretrun = Arr_Numbers.splice(2); var the_arr_before_after = "Array elements after splice method:
"; for (i=0; i < Arr_Numbers.length; i++){ the_arr_before_after += Arr_Numbers[i] + "
"; } document.getElementById("p2").innerHTML = the_arr_before_after; //Удаленные элементы массива в возвращаемом массиве var the_arr_before_after = "The removed array elements:
"; for (i=0; i < Arrretrun.length; i++){ the_arr_before_after += Arrretrun[i] + "
"; } document.getElementById("p3").innerHTML = the_arr_before_after;

Использование функции delete для удаления элемента массива

Также, чтобы в JavaScript удалить элемент массива, можно использовать функцию delete . Но она сохраняет пустое место, и если вы вернете этот массив после использования функции, то удаленный элемент будет отображен как undefined .

Рассмотрим демо-версию, в которой используется функция delete :

Посмотреть онлайн демо-версию и код

Код JavaScript :

var Arr_Strings = ["The","JavaScript","Array","Totorial"]; var i; var the_arr_before_after = "The original string array elements:

"; for (i=0; i < Arr_Strings.length; i++){ the_arr_before_after += Arr_Strings[i] + "
"; } document.getElementById("p1").innerHTML = the_arr_before_after; //Использование функции delete delete Arr_Strings; var the_arr_before_after = "Array elements after splice method:

"; for (i=0; i < Arr_Strings.length; i++){ the_arr_before_after += Arr_Strings[i] + "
"; } document.getElementById("p2").innerHTML = the_arr_before_after;

Вы видите, что для третьего элемента отображается undefined после его удаления с помощью функции delete .