JavaScript: [] для удаления элементов массива
почему не всегда можно использовать переназначение массива [] для удаления его элементов
Работая с JavaScript, довольно часто появляется необходимость в одномоментном удалении всех элементов массива.
Например, у нас есть список продуктов:
let items = ["tea", "coffee", "milk"];
Мы можем удалить все элементы и получить пустой массив следующим образом:
items = [];
Это эффективный прием, который часто используется веб-разработчиками. Однако, скорее всего мы не задумываемся о некоторых особенностях такого подхода к удалению элементов массива.
Посмотрим на код, приведенный ниже:
let items = ["tea", "coffee", "milk"];
let copy = items;
Мы создали переменную copy
и присвоили ей ссылку на items
. Таким образом, copy
указывает на массив items
.
Теперь проверим, что именно содержит каждая переменная:
console.log(items); // ["tea", "coffee", "milk"]
console.log(copy); // ["tea", "coffee", "milk"]
Полученный результат ожидаем.
Если мы внесем изменения в copy
, они произойдут и в исходном массиве, так как созданная переменная является ссылкой на оригинальный массив, а не его копией:
copy[2]="oranges";
console.log(items); // ["tea", "coffee", "oranges"]
console.log(copy); // ["tea", "coffee", "oranges"]
Но, если удалить исходный массив:
items = [];
Проверив состав переменных, мы получим такой результат:
console.log(items); // []
console.log(copy); // ["tea", "coffee", "oranges"]
Массив items
пустой, а переменная copy
все еще содержит данные исходного массива.
Это связано с тем, что переназначение:
items = [];
фактически создает новый пустой массив, не затрагивая теперь уже бывшую переменную-ссылку copy
.
Варианты решения проблемы
Установить длину массива равной 0
let items = ["tea", "coffee", "milk"];
let copy = items;
console.log(items); // ["tea", "coffee", "milk"]
console.log(copy); // ["tea", "coffee", "milk"]
items.length = 0;
console.log(items); // []
console.log(copy); // []
Использовать метод splice
let items = ["tea", "coffee", "milk"];
let copy = items;
console.log(items); // ["tea", "coffee", "milk"]
console.log(copy); // ["tea", "coffee", "milk"]
items.splice(0, items.length);
console.log(items); // []
console.log(copy); // []
Таким образом, если Вы хотите очистить массив и уверены в отсутствии переменных-ссылок - смело переназначайте массив array = []
. В остальных случаях следует использовать один из двух приведенных выше альтернативных методов.
Спасибо за внимание.