Почему удаление не работает с массивом в javascript?

#javascript #arrays

#javascript #массивы

Вопрос:

Я попытался удалить часть массива.

Не сработало

 delete my_array[index];

Сработало

 my_array.splice(index, 1);

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

Я не уверен, что Vue, который я использую, обрабатывает их по-разному

Почему последний вариант работает, но не первый?

1. Он действительно работает, но он делает что-то совсем другое, чем splice — что исходит из того факта, что delete он действительно определен в целом для объектов и не имеет особого поведения для массивов

2. » Особое поведение » UnholySheep ссылается на переиндексацию, delete не переиндексирует массив, в котором он использовался, он оставляет вас с разреженным массивом, где as splice преобразует массив, если это необходимо.

Ответ №1:

Использование delete оператора не влияет на длину массива, поскольку это приводит к установке элемента с этим индексом как undefined .

 new Vue({
  data() { return { array: [1,2,3] } },
  created() { delete this.array[1]; console.log(this.array[1]); }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Развернуть фрагмент

Ответ №2:

Основываясь на документации MDN, оператор JavaScript delete удаляет свойство из объекта. Тот же раздел Deleting array elements страницы, который предлагается использовать splice , что и вы использовали во 2-м случае.

В качестве альтернативы delete элемент массива

 const arr = ['a', 'b', 'c'];


const deleteByIndex = (arr, index) => arr.filter((_, i) => i !== index);

console.log(deleteByIndex(arr, 1))

Развернуть фрагмент

Ответ №3:

Это связано с тем, как обнаружение изменений работает в Vue. При создании объекта для каждого свойства создаются геттеры и сеттеры. Как только вы его обновите, изменение будет обнаружено.

Прямое добавление или удаление проходит мимо этой системы и приведет к сбою вашего приложения.

Это описано более подробно здесь: https://v2.vuejs.org/v2/guide/reactivity.html