I Shar

I Shar

мир глазами веб-разработчика

JavaScript: [] для удаления элементов массива

почему не всегда можно использовать переназначение массива [] для удаления его элементов

I Shar

время чтения 2 мин.

Photo by Karoline Stk on Unsplash

Работая с 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 = []. В остальных случаях следует использовать один из двух приведенных выше альтернативных методов.


Спасибо за внимание.

    • frontend
    • js

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.