Как очистить массив в JS (JavaScript)

Массивы — важная структура данных в JavaScript, позволяющая хранить коллекции данных и манипулировать ими. Иногда может потребоваться очистить содержимое массива, чтобы оптимизировать использование памяти или подготовить его для новых данных. Давайте разберём три способа, как очистить массив в JS.

Мы рассмотрим:

1. Различные способы очистки массивов в JavaScript.
2. Как очистить массива от записей.
3. Очистку массива после циклов.
4. Создание пустых массивов определённого размера.
5. Очистку постоянного массива.
6. Удаление из массива нескольких определённых элементов.

Очистка массива в JavaScript: базовые принципы

В силу того что, массивы не имеют метода array.clear(), необходим иной подход. Однако существует несколько способов их очистки. В этой статье мы рассмотрим три способа сделать это:

1. Использование свойства length.
2. Очистка массива с помощью метода splice().
3. Удаление из массива элементов с помощью метода pop().

Как очистить массив в JS с помощью свойства length

К слову сказать, массив является одним из непримитивных типов данных в JavaScript. Наиболее лёгкий метод очистить его — это установить длину массива равной 0. Это удалит все элементы в нём и установит его длину равной 0, очистив его, например:

let numbers = [1, 3, 5, 7];
console.log(numbers);
// Результат: [1, 2, 3, 4]

numbers.length = 0;
console.log(numbers);
// Результат: []

В этом примере сначала создаётся массив с именем numbers и несколькими числами в нем. Затем проверяем его содержимое в консоли. Следующим шагом устанавливаем для свойства length значение 0, чтобы сбросить массив. Далее мы снова проводим проверку массива в консоли, чтобы убедиться, что он был очищен.

Очистка массива JavaScript с помощью метода splice()

Используя этот метод, можно удалить элементы массива. Он принимает начальный индекс и количество элементов, подлежащих удалению, в качестве параметров. Если надо очистить весь массив, можно указать 0 в качестве начального индекса.

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

let numbers = [1, 3, 5, 7];
console.log(numbers);
// Результат: [1, 2, 3, 4]

numbers.splice(0, numbers.length)
console.log(numbers);
// Результат: []

Как очистить массив в JS с помощью метода pop()

Метод pop() удалить элемент из конца массива. Используя цикл for, мы можем выполнять итерации по массиву, уменьшая значение индекса.

Вот наглядный пример очистки массива с использованием метода pop():

let numbers = [1, 3, 5, 7];
console.log(numbers);
// Результат: [1, 2, 3, 4]

for (let index = numbers.length; index>= 0; index--) {
 // Метод удаляет последний элемент из массива
 numbers.pop(index);
}

console.log(numbers);
// Результат: []

Как очистить запись массива?

Иногда может потребоваться очистить определённый элемент, а не весь массив. Для этого достаточно будет просто присвоить индексу элемента значение undefined.

let numbers = [1, 3, 5, 7];
console.log(numbers);
// Результат: [1, 2, 3, 4]

const numberToRemove = 5
numbers = numbers.filter(e => e !== numberToRemove)
console.log(numbers);
// Результат: [1, 3, 7]

В этом примере мы сначала создаём массив с именем numbers с некоторыми элементами. Затем мы записываем в него числа и проверяем через консоль его содержимое.

Предположим, нам нужно удалить значение 5. Используя метод filter() можно отфильтровать все элементы, отличные от 5, а затем присвоить результат той же переменной numbers, чтобы переопределить начальное значение. Чтобы это сработало, массив должен быть объявлен с использованием либо var, либо let. Если использовался const, код выдаст ошибку в виду того, что она является константой.

После этого мы снова проверяем результат через консоль.

Очистка массива после цикла

Если требуется очистить массив после выполнения цикла по нему можно просто установить свойство length равным 0 после завершения цикла.

Давайте рассмотрим способ очистки массива в JavaScript после цикла. Например:

let numbers = [1, 3, 5, 7];

for (let index = 0; index < numbers.length; index++) {
  console.log(numbers[index]);
}

numbers.length = 0;
console.log(numbers); 
// Результат: []

В этом примере мы сначала создаём массив с именем number, состоящий из нескольких цифр. Затем мы проверяем исходный массив в консоли для подтверждения его содержимого. Следующим шагом станет перебор массива с помощью цикла for и проверка каждого элемента в консоли. После завершения цикла мы устанавливаем для свойства length значение 0, очищая массив. Далее вновь проверяем массив в консоли.

Вместо удаления элементов после выполнения цикла по ним, если вы хотите удалить их сразу после обращения к элементам, вы можете использовать цикл while и массив pop() методы, как показано в следующем примере:

let numbers = [1, 3, 5, 7];

while (numbers.length > 0) {
  let num = numbers.pop()
}

console.log(numbers);
// Результат: []

Создание пустого массива с указанием размера

Для того, чтобы создать пустой массив, существует два способа.

let numbers = [];

let numbers = new Array();

Пустой массив определённого размера

Если требуется создать в JavaScript пустой объект определённого размера. Для этого может использоваться конструктор Array(), в который можно передать желаемый размер массива в качестве аргумента. Давайте посмотрим на пример:

const numbers = Array(5);
console.log(numbers); 
// Результат: [undefined, undefined, undefined, undefined, undefined]

console.log(numbers.length); 
// Результат: 5

В этом примере мы используем конструктор Array() для создания массива размером в пять элементов. Поскольку мы не передавали конструктору никаких значений, каждый элемент массива инициализируется как undefined.

Очистка массива, заданного через const

Стоит отметить, что JavaScript позволяет объявлять массивы с помощью ключевого слова const (неизменяемую переменную). Однако это не означает, что содержимое массива является неизменяемым. Вы все ещё можете очистить содержимое такого массива, установив для его свойства length значение 0.

const numbers = [1, 3, 5, 7];
console.log(numbers); 
// Результат:  [1, 3, 5, 7]

numbers.length = 0;
console.log(numbers); 
// Результат: []

В этом примере мы создаём постоянный массив с именем numbers с некоторыми элементами и проверяем его в консоли. Следующим шагом мы устанавливаем свойству length массива значение 0. Однако, если вы попытаетесь переназначить некоторые другие значения массива, заданного через const, это вызовет ошибку «Cannot assign to the number because it is a constant». Например:

const numbers = [1, 3, 5, 7];
numbers = [2, 4, 6, 8]
// Не удается присвоить переменной numbers, потому что она является константа

Как же правильно очищать такие массивы в JavaScript? В частности, если массив требуется изменять часто в приложении, то следует рассмотреть возможность использования переменной let вместо const. В виду того, что повторное присвоение значения переменной const противоречит назначению константы.

Как очистить массив в JS от нескольких конкретных элементов

Существует несколько способов очистки определённых элементов в массиве. Однако мы рассмотрим два подхода.

Как очистить несколько элементов с помощью метода splice()

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

const numbers = [1, 3, 5, 7, 9];
console.log(numbers); 
// Результат: [1, 3, 5, 7, 9]

numbers.splice(1, 2);
console.log(numbers); 
// Результат: [1, 7, 9]

В этом примере мы создаём массив с именем numbers с несколькими элементами. Затем мы используем метод splice() для удаления двух элементов, начиная с индекса 1, эффективно очищая элементы с индексами 1 и 2. Затем проверяем в консоли, были ли очищены ненужные элементы.

Читайте также: Как сравнить даты в JavaScript.

Как очистить массив в JS от нескольких элементов с помощью метода filter()

Предположим, даётся массив книг и надо очистить книги, цена которых меньше 30. Первым шагом надо отфильтровать все книги, цена которых больше 30, используя filter(). Обычно этот метод возвращает новый массив, а исходный остаётся неизменным.

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

<span class="token keyword">let</span> books <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"A Modern Introduction to Programming"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">26.99</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"JavaScript: The Definitive Guide"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">37.99</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"You Don't Know JS Yet: Get Started"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">19.99</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Learning JavaScript Design Patterns"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">28.99</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Secrets of the JavaScript Ninja"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">34.99</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

books <span class="token operator">=</span> books<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">b</span> <span class="token operator">=></span> b<span class="token punctuation">.</span>price <span class="token operator">></span> <span class="token number">30</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>books<span class="token punctuation">)</span>
<span class="token comment">// Output: [ { title: "JavaScript: The Definitive Guide", price: 37.99 },  </span>
<span class="token comment">// { title: "Secrets of the JavaScript Ninja", price: 34.99 }]</span>

Чтобы это решение сработало, массив должен быть изначально объявлен через let или var.

Заключение

В общей сложности,  эффективно очищая массивы, можно оптимизировать использование памяти и обеспечить эффективную работу кода. Все используемые для этого методы имеют полную поддержку браузерами, включая splice(), pop() и filter().

.