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<numbers.length; 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) => {return n != 3});
console.log(numbers); // [1,2,4]

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

Заключение

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

Читайте также:

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

---

Перевод статьи Jonathan Hsu: JavaScript: Four Ways to Remove a Value From an Array