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() возвращает новый массив, а не выполняет действия с исходными данными.
Заключение
Это не все способы удаления значений из массива, но и среди указанных можете выбрать метод по душе или же придумать что-то свое.
Перевод статьи Jonathan Hsu: JavaScript: Four Ways to Remove a Value From an Array
Комментарии