По той или иной причине иногда возникает необходимость удалить элементы из массива JavaScript. Существует очень много вариантов, но если вариантов много, значит, много и возможностей для ошибок. Именно поэтому вы находитесь здесь.
Как и любой другой язык программирования, JavaScript позволяет программисту играть с объектом массива, да, объектом. Причина, по которой делается акцент на массиве как объекте, заключается в том, что массив JavaScript - это фактическая ссылка на адрес в памяти. Таким образом, любое изменение, которое вы сделаете в этом массиве, будет сохраняться на протяжении всей вашей работы с ним.
Что ж, после такого простого введения, следующим шагом будет представление средств, которые мы будем использовать в этом материале. Мы будем использовать встроенные и общие подходы для выполнения работы. Итак, без лишних слов, давайте начнем!
Кроме того, оговорюсь, что порядок, приведенный ниже, является случайным и не основан на каких-либо предпочтениях. Более того, каждый метод будет помечен как "на месте" или "не на месте".
1. Встроенный array.filter()
Режим: out-of-place.
Этот метод, по сути, получает список элементов, а затем использует решающую функцию, чтобы решить, что останется, а что выйдет из массива.
Затем он создает новый массив (таким образом, новый адрес объекта JavaScript array), который вы можете затем присвоить вашему массиву, который вы фильтруете.
Таким образом, фильтр массивов JavaScript дает вам возможность получить результаты в новый массив JavaScript или присвоить их исходному массиву, к которому была применена операция, чтобы удалить то, что вам не нужно.
Сначала мы создадим простой список чисел от одного до десяти. Затем мы получаем требование, что нам нужно показать только четные числа из приведенного выше списка.
Мы знаем, что четные числа делятся на 2 без напоминания, поэтому используем для этого оператор modulo.
Теперь, когда мы выполним лог, у нас должны остаться только четные числа, так как мы переназначили новый массив из результата фильтра массивов JavaScript в исходный массив, к которому мы применили фильтр.
Хорошо, вопрос для вас. Как вы думаете, что бы произошло, если бы мы не переназначили результат в массив numbersOneToTen? Ну, я дам вам подсказку: "на месте" против "вне места".
Ладно, переходим к следующему.
2. Встроенный array.slice(optionalStart, optionalEnd)
Режим: out-of-place
Это встроенный метод, который, как вы можете видеть, принимает optionalStart и optionalEnd, которые он использует для возврата части массива.
NB: Индексация optionalStart и optionalEnd основана на нулях, то есть начинается с 0.
Снова создадим гипотетический массив чисел.
Здесь мы указали начало как 3, а конец как 8. Итак, ВАЖНО отметить, что опциональное начало и опциональное окончание slice - это то, что результирующий массив будет включать элемент в начале и исключать элемент в конце.
Таким образом, наш массив JavaScript будет содержать элемент с индексом 3 и элемент непосредственно перед индексом 8.
Как вы можете видеть, наш список начинается с 4 и заканчивается 8. Потому что 4 находится в индексе 3 (начиная с 0), а 8 - в индексе 7 (начиная с 0).
В качестве подсказки: срез массива JavaScript устанавливает границу того, что должно быть включено.
Итак, переходим к следующему!
3. Встроенный array.splice(requiredStart, optionalDeleteCount)
Режим: in-place
Это первый метод, который, как мы видим, имеет метод модификации in-place. Хорошо, что это значит? Это значит, что нам не нужно присваивать результат операции сращивания массива JavaScript, потому что:
Метод возвращает то, что было удалено, а не то, что должно остаться в массиве.
Модификация производится непосредственно в массиве JavaScript.
Учитывая это, будьте очень осторожны при использовании этого метода для удаления из массива JavaScript.
Как вы можете видеть, он также принимает несколько параметров. Первый из них - requiredStart, обязательный индекс, основанный на нуле, с которого должно начинаться сращивание.
Он также имеет необязательный параметрDeleteCount, который представляет собой числовое значение количества элементов для удаления. Это не нулевое значение, а фактическая единица измерения. Например, если вы зададите значение 1, то будет удален 1 элемент и так далее.
Как обычно, мы объявляем наш массив.
Теперь мы решаем удалить все, что выше индекса 5. Заметьте, мы не передаем deleteCount, и это означает, что все, что находится за индексом requiredStart, будет удалено.
Хорошо, теперь время для вопросов, их у нас будет два:
Как вы думаете, что будет выведено на экран, если результату сращивания массива JavaScript присвоить номераOneToTen? Попробуйте сделать это.
Что будет отображаться, если попробовать разные deleteCounts? Ну, попробуйте!
Путешествие продолжается!
4. Встроенная функция array.pop()
Режим: in-place
Это еще один вариант удаления из массива JavaScript. JavaScript array pop делает то, что он удаляет последний элемент из массива и возвращает этот элемент. Это означает, что:
Нет необходимости присваивать массив результату метода pop().
Возвращаемое значение будет элементом, а не массивом.
Еще раз объявляем наш массив JavaScript.
Затем мы вызываем метод pop() для нашего массива.
Итак, чтобы не забыть, нам не нужен никакой аргумент, передаваемый в метод pop().
Что ж, пришло время для простого вопроса:
Что произойдет, если вы попытаетесь вызвать pop() на пустом массиве JavaScript?
Что вы увидите, если присвоите номерOneToTen результату pop()?
Ну, а теперь перейдем к последнему вопросу.
5. Старая школа переназначения для пустого массива
Способ: не по месту
Этот метод просто присваивает массив новому массиву. Поскольку мы не вызываем на нем методов напрямую, то, на мой взгляд, это метод out-of-place, так как мы даем ему новую ссылку на объект массива JavaScript (пустой).
Таким образом, этот метод полностью удалит все из вашего массива. Поэтому при таком поведении используйте его осторожно!
Как обычно, мы объявляем наш массив.
Затем мы присваиваем его.
Теперь время вопросов:
Как вы думаете, что бы произошло, если бы у нас было const numbersOneToTen вместо let numbersOneToTen?
Заключение
Как видите, удалить элемент из массива JavaScript очень просто. Все, что вам нужно, это понять, что именно вам нужно, а затем выбрать правильный подход.
ПРАКТИКА: Видите ли, в приведенных выше примерах мы использовали let numbersOneToTen, почему бы вам не попробовать использовать const numbersOneToTen вместо этого. Дайте мне знать, как это работает для вас.
На этом спасибо, что прочитали, и до новых встреч!
Счастливого кодинга!