Как очистить массив в JavaScript? Все способы и подводные камни

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

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

1. Присвоение нового пустого массива: arr = []

let myArray = [1, 2, 3, 4, 5];
myArray = []; // Создаем новый пустой массив
console.log(myArray); // []

• Плюсы: Просто и быстро. Старый массив автоматически удаляется сборщиком мусора, если на него нет других ссылок.
• Минусы: Если на массив есть другие ссылки (переменные или свойства), они продолжат указывать на старый массив. Это может привести к багам.

Пример проблемы с ссылками:

let original = [1, 2, 3];
let reference = original; // Вторая ссылка на тот же массив

original = []; // Теперь original указывает на новый массив
console.log(reference); // [1, 2, 3] - старый массив жив!

2. Установка длины в 0: arr.length = 0

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

let myArray = [1, 2, 3, 4, 5];
myArray.length = 0; // Устанавливаем длину в 0
console.log(myArray); // []

• Плюсы: Работает с любыми ссылками. Все переменные, указывающие на этот массив, увидят, что он пуст.
• Минусы: Может быть немного медленнее, чем arr = [], но в 99% случаев это незаметно.

Проверка с ссылками:

let original = [1, 2, 3];
let reference = original;

original.length = 0; // Очищаем оригинальный массив
console.log(reference); // [] - ссылка тоже видит пустой массив
console.log(original === reference); // true - это один и тот же объект

3. Метод splice(): arr.splice(0, arr.length)

Удаляет все элементы, начиная с индекса 0.

let myArray = [1, 2, 3, 4, 5];
myArray.splice(0, myArray.length);
console.log(myArray); // []

• Плюсы: Работает с ссылками (как и length = 0). Возвращает удаленные элементы, если нужно.
• Минусы: Немного избыточно, если не нужно возвращать удаленные элементы.

4. Цикл с pop() — НЕ РЕКОМЕНДУЕТСЯ

while (myArray.length) {
    myArray.pop();
}

Этот способ крайне неэффективен (O(n²) операций) и используется только в учебных целях. Не применяйте его в реальном коде.

Что выбрать?

• Если массив используется только в одной переменной — смело используйте arr = []. Это самый простой и быстрый способ.
• Если на массив есть другие ссылки (переменные, свойства объектов, аргументы функций) — используйте arr.length = 0. Это гарантирует, что все ссылки увидят пустой массив.
• Если нужно получить удаленные элементы — используйте arr.splice(0, arr.length).

Важно про память

При использовании arr.length = 0 или arr.splice(0, arr.length) старые элементы теряют ссылки и становятся доступными для сборщика мусора. При присвоении arr = [] старый массив тоже будет удален, если на него нет других ссылок. В современных браузерах и Node.js оба способа безопасны с точки зрения утечек памяти.

Итоговая рекомендация

Для начинающих разработчиков: если вы не уверены, есть ли у массива другие ссылки, всегда используйте arr.length = 0. Это универсальное и безопасное решение, которое работает во всех случаях.

let arr = [1, 2, 3, 4, 5];
arr.fill(undefined); // [undefined, undefined, undefined, undefined, undefined]

let arr = [1, 2, 3, 4, 5];
arr = arr.slice(0, 0); // Создает новый пустой массив
console.log(arr); // []

// React (useState)
setMyArray([]); // Правильно

// Vue (ref)
myArray.value = []; // Правильно