为什么在javascript中删除数组无效

Question

我试图删除一个数组部分。

不起作用

delete my_array[index];

确实有效

my_array.splice(index, 1);

当查看数组时，console.log中的两种情况看起来都很好，但第一种情况导致我的应用程序崩溃。

我不确定我使用的Vue是否对这些有不同的处理

为什么最后一个有效，而第一个无效

Answer 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>

Answer 2

基于MDN文档，JavaScriptdelete运算符从对象中删除属性。与第二个案例中建议使用splice的页面部分Deleting array elements相同。

或者delete阵列元件

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

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

Answer 3

这与Vue中的更改检测工作方式有关。在创建对象时，会为每个属性创建getter和setter。一旦您更新它，就会检测到更改。

直接添加或删除会通过此系统，并会破坏您的应用程序。

此处对此进行了更详细的描述：https://v2.vuejs.org/v2/guide/reactivity.html