Как удалить элемент из массива js по значению
Перейти к содержимому

Как удалить элемент из массива js по значению

  • автор:

Как удалить определенный элемент из массива js

Правильным способом удаления элемента из массива будет использование метода splice() . Этот метод принимает три аргумента, но нам нужны только первые два из них. Это индекс начиная с которого мы хотим удалить элементы. А также количество элементов, которые будут удалены из массива. Взгляните на пример ниже:

const letters = ["a", "b", "c"]; const index = 1; array.splice(index, 2); console.log(letters); // => [ 'a' ] 

18 октября 2022

Часто бывает в задачах, что нам требуется удалить из массива определенный элемент.
Один из способов — это воспользоваться функцией высшего порядка filter:

// К примеру, дан массив из чисел: const numbers = [1, 2, 3, 4, 5]; //необходимо удалить элемент, который равен трём. const numberToDelete = 3; //фильтруем исходный массив. //А для того, чтобы его не мутировать, присвоим его в новую переменную. const filteredNumbers = numbers.filter((number) => number !== numberToDelete); console.log(filteredNumbers); // => [1, 2, 4, 5] //Готово! 

Также есть самый явный способ для удаления элемента массива с помощью ключевого слова delete:

let fruits = ['banana', 'orange', 'apple']; //Допустим, что нам нужно удалить нулевой элемент массива. delete fruits[0]; console.log(fruits); // => [ , 'orange', 'apple' ] 

Обратите внимание, что на месте нулевого элемента осталось пустое место. Как правило, удалять элемент массива таким способом не является хорошей практикой. Данный способ приведен в качестве примера.

Если вам нужно удалить последний элемент массива, для этого есть способ — это метод pop(). Перейдём к примеру:

const fruits = ['banana', 'orange', 'apple']; fruits.pop(); console.log(fruits); // получаем => [ 'banana', 'orange' ] 

Но это еще не всё!
Одним из наиболее удобных методов для удаления элемента массива является метод splice():

const names = ['John', 'Darina', 'Mark', 'Kris']; //допустим, что дан массив имён. // Нам необходимо удалить из массива второй элемент. names.splice(2, 1); // начиная со второго элемента удаляем один элемент console.log(names); // => [ 'John', 'Darina', 'Kris' ] 

Это не все способы удаления элементов из массива, но и среди указанных можно найти метод по душе или же придумать что-то свое.

Документация:
  • Функция высшего порядка filter
  • Метод splice()
  • Метод pop()

JavaScript: как удалить значения из массива

Массивом называется упорядоченный тип данных, хранящий несколько значений. Это означает, что каждый элемент в массиве имеет числовой идентификатор (индекс), который используется для ссылки на его место в строке.

Массивы начинаются с индекса 0 и увеличиваются на 1 для каждого значения. Для обращения к значению в массиве воспользуйтесь соответствующим индексом и заключите его в квадратные скобки [] .

let numbers = [10,20,30,40];// выводит значение с явным указанием индекса 
console.log(numbers[0]); # 10
console.log(numbers[1]); # 20
console.log(numbers[2]); # 30
console.log(numbers[3]); # 40
// другой способ: цикл for
for(let i=0; i console.log(numbers[i]);
>

Но что, если мы захотим удалить значение из нашего массива? Для этого существует четыре способа, каждый из которых имеет свои плюсы и минусы, о которых поговорим ниже.

Примечание: все четыре способа доступны без какого-либо импорта дополнительных библиотек.

Через ключевое слово delete

Если вы не любите сложностей, то воспользуйтесь простейшим методом удаления значений из массива — ключевым словом delete . Вам нужно всего лишь указать имя переменной с индексом, который хотите удалить.

let numbers = [1,2,3,4];delete numbers[1];
console.log(numbers); // [1, undefined, 3, 4]

Но будьте внимательны. Несмотря на кажущуюся простоту данного способа, он часто приводит к лишней головной боли, поскольку теперь в вашем массиве зияет дыра.

Основной вывод: при удалении значения из массива через delete задайте себе вопрос: «Нужно ли мне переиндексировать массив?».

Через метод pop()

Вам нужно удалить самое большое индексное значение из массива? Или же вы хотите переиндексировать массив так, чтобы избавиться от undefined в конце? Тогда метод pop() — это то, что доктор прописал.

let numbers = [1,2,3,4];numbers.pop();
console.log(numbers); // [1,2,3]

Через метод splice()

Если вы хотите удалить определенное значение из массива, а не конкретный индекс, и вы готовы к переиндексации массива, то присмотритесь к методу splice() .

Сплайсинг массива создает новый массив, который удаляет некое количество значений и обрезает массив слева, начиная с определенного индекса.

let numbers = [1,2,3,4];numbers.splice(2);
console.log(numbers); // [1,2]

Если же вы хотите удалить только одно значение, то воспользуйтесь вторым (не обязательным) параметром в методе splice() .

let numbers = [1,2,3,4];numbers.splice(2,1);
console.log(numbers); // [1,2,4]

Обратите внимание, что мы не выводим результат массива сразу. Это потому, что данный метод будет возвращать удаленные значения.

let numbers = [1,2,3,4];console.log(numbers.splice(2,1)); // [3]

Все, конечно, круто и здорово, однако в реальных примерах вам, вряд ли, удастся захардкодить значение индекса. Поэтому давайте воспользуемся методом indexOf() для поиска индекса значения, соответствующего условию.

// удаляет значение 3 из массива let numbers = [1,2,3,4];
i = numbers.indexOf(3);
if(i >= 0) numbers.splice(i,1);
>
console.log(numbers); // [1,2,4]

Условие if в этом коде используется для того, чтобы подтвердить нахождение значения в массиве. Если же значение не найдено, то метод indexOf() вернет -1 . Таким образом, если i больше или равно 0 , то это значение было найдено в массиве.

Через метод filter()

Метод splice() весьма удобен для нахождения и удаления одного значения. Но бывает так, что вам нужно удалить все вхождения значения (или условия) из массива. В таком случае, вашим новым другом станет метод filter() .

Этот метод принимает функцию в качестве аргумента и сохраняет значения, соответствующие true в функции filter . Чтобы отфильтровать определенное значение, необходимо проверить отрицательные индексы.

let numbers = [1,2,3,4];
numbers = numbers.filter((n) => );
console.log(numbers); // [1,2,4]

Обратите внимание, что нам приходится заново присваивать номера индексов. Дело в том, что, в отличие от метода splice() , filter() возвращает новый массив, а не выполняет действия с исходными данными.

Заключение

Это не все способы удаления значений из массива, но и среди указанных можете выбрать метод по душе или же придумать что-то свое.

  • Зачем нужен Strict Mode в JavaScript?
  • Малоизвестные функции JavaScript
  • Условный JavaScript для экспертов

Как удалить элемент массива с определенным значением?

Есть переменная edinica = 1 . Как удалить элементы массива со значением value :’b’ при условии, что переменная edinica = 1 ?

Отслеживать
задан 27 июл 2020 в 19:08
1 1 1 серебряный знак 1 1 бронзовый знак

Посмотрите на метод filter у Array. Вот пример использования developer.mozilla.org/ru/docs/Web/JavaScript/Reference/…

27 июл 2020 в 19:13
Поправил свой ответ, теперь там всё нормально
27 июл 2020 в 20:03

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Можно написать всё самому, вручную

const arr = [ , , , , ]; function cycle(arr) < for (let i = 0; i < arr.length; i++) < // пройтись по все элементам массива if (typeof(arr[i]) === 'object' && arr[i].value === 'b') < // если элемент массива является объектом, и у этого объекта поле value равняется 'b' и является строкой arr.splice(i, 1); // удалить элемент из массива i--; // уменьшить итератор на единицу >> return arr; // вернуть массив как результат выполнения функции > let number = 1; let newArr; if (number === 1) < // если переменная number равняется 1 и является числом, то выполнять код newArr = cycle(arr); // newArr равняется результату выполнения функции cycle console.log(newArr); >

Или можно использовать функцию filer , которая встроена в массивы JavaScript:

const arr = [ , , , , ]; let number = 1; let newArr; if (number === 1) < // если переменная number равняется 1 и является числом, то выполнять код newArr = arr.filter((item) =>typeof(item) === 'object' && item.value !== 'b'); // отфильтровать массив, в котором подходить под условие будут только те объекты у которых поле value не равняется 'b' и не является строкой console.log(newArr); >

Array.prototype.splice()

Метод splice() изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.

Синтаксис

array.splice(start[, deleteCount[, item1[, item2[, . ]]]])

Параметры

Индекс, по которому начинает изменять массив. Если больше длины массива, реальный индекс будет установлен на длину массива. Если отрицателен, указывает индекс элемента с конца.

Целое число, показывающее количество старых удаляемых из массива элементов. Если deleteCount равен 0, элементы не удаляются. В этом случае вы должны указать как минимум один новый элемент. Если deleteCount больше количества элементов, оставшихся в массиве, начиная с индекса start , то будут удалены все элементы до конца массива.

Необязательные параметры. Добавляемые к массиву элементы. Если вы не укажете никакого элемента, splice() просто удалит элементы из массива.

Возвращаемое значение

Массив, содержащий удалённые элементы. Если будет удалён только один элемент, вернётся массив из одного элемента. Если никакие элементы не будут удалены, вернётся пустой массив.

Описание

Если количество указанных вставляемых элементов будет отличным от количества удаляемых элементов, массив изменит длину после вызова.

Примеры

Удаляет 0 элементов по индексу 2 и вставляет «drum»

var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(2, 0, "drum"); // myFish равен ["angel", "clown", "drum", "mandarin", "sturgeon"] // removed равен [], ничего не удалено 

Удаляет 1 элемент по индексу 3

var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"]; var removed = myFish.splice(3, 1); // removed равен ["mandarin"] // myFish равен ["angel", "clown", "drum", "sturgeon"] 

Удаляет 1 элемент по индексу 2 и вставляет «trumpet»

var myFish = ["angel", "clown", "drum", "sturgeon"]; var removed = myFish.splice(2, 1, "trumpet"); // myFish равен ["angel", "clown", "trumpet", "sturgeon"] // removed равен ["drum"] 

Удаляет 2 элемента начиная с индекса 0 и вставляет «parrot», «anemone» и «blue»

var myFish = ["angel", "clown", "trumpet", "sturgeon"]; var removed = myFish.splice(0, 2, "parrot", "anemone", "blue"); // myFish равен ["parrot", "anemone", "blue", "trumpet", "sturgeon"] // removed равен ["angel", "clown"] 

Удаляет 2 элемента начиная с индекса 2

var myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"]; var removed = myFish.splice(myFish.length - 3, 2); // myFish равен ["parrot", "anemone", "sturgeon"] // removed равен ["blue", "trumpet"] 

Удаляет 1 элемент по индексу -2

var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(-2, 1); // myFish равен ["angel", "clown", "sturgeon"] // removed равен s ["mandarin"] 

Удаляет все элементы после индекса 2 (включительно)

var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(2); // myFish равен ["angel", "clown"] // removed равен ["mandarin", "sturgeon"] 

Спецификации

Specification
ECMAScript Language Specification
# sec-array.prototype.splice

Совместимость с браузерами

BCD tables only load in the browser

Обратная совместимость

В JavaScript 1.2 метод splice() возвращал удалённый элемент только если был удалён один элемент (параметр deleteCount равен 1); в противном случае метод возвращал массив с удалёнными элементами. Обратите внимание, что последним браузером, использующим JavaScript 1.2, был Netscape Navigator 4, так что вы можете считать, что splice() всегда возвращает массив.

Смотрите также

  • push() / pop() — добавление / удаление элементов с конца массива
  • unshift() / shift() — добавление / удаление элементов с начала массива
  • concat() — возвращает новый массив, состоящий из данного массива, соединённого с другими массивами и/или значениями

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *