Javascript 在向数组添加非顺序索引时，Vue会不断添加未定义的值吗？

我有一个简单的应用程序，其中用户从下拉列表中选择一个值，当他们单击“添加”按钮时，该值及其id应使用id作为索引填充到数组中

例如：

价值观

---

1-苹果
3-香蕉 8-梨

用户选择每个水果，在每次选择后单击“添加”。我的数组应该如下所示：

 [
    1: Apple,
    3: Bananas,
    8: Pears
 ]

然而，我在Vue中得到的结果是：

[
    1: Apple,
    2: undefined,
    3: Bananas,
    4: undefined,
    5: undefined,
    6: undefined,
    7: undefined,
    8: Pears
]

---

这些值将作为输入传递给服务器验证，显然这会给数组长度和验证规则带来问题。如何首先删除这些未定义的值或防止Vue填充它们？

数组始终是连续的；数组中的任何“孔”都将被

未定义的
填充

您要使用的是对象：

{
数据（）{
返回{
项目：{}
}
},
方法：{
添加（id，项目）{
//Vue无法检测属性添加，因此必须使用
//这种方法很难做到这一点
this.$set（this.items，id，item）
}
}
}

如果使用
v-for
在模板中渲染此对象的项，则顺序通常与每个项添加到对象的顺序相同（请参见）。如果需要按ID顺序呈现项目，则需要对项目进行排序：

{{item}

计算：{
itemsArray（）{
返回Object.entries（this.items）
.sort（（a，b）=>a[0]-b[0]）//排序条目键（ID）
.map（a=>a[1]）//获取条目值
}
}
数组始终是连续的；数组中的任何“孔”都将被
未定义的
填充

您要使用的是对象：

{
数据（）{
返回{
项目：{}
}
},
方法：{
添加（id，项目）{
//Vue无法检测属性添加，因此必须使用
//这种方法很难做到这一点
this.$set（this.items，id，item）
}
}
}

如果使用
v-for
在模板中渲染此对象的项，则顺序通常与每个项添加到对象的顺序相同（请参见）。如果需要按ID顺序呈现项目，则需要对项目进行排序：

{{item}

计算：{
itemsArray（）{
返回Object.entries（this.items）
.sort（（a，b）=>a[0]-b[0]）//排序条目键（ID）
.map（a=>a[1]）//获取条目值
}
}
Vue没有将
未定义的
插入阵列。这就是JavaScript数组（即）的行为

获取已定义元素的新数组的快速解决方案是使用：


const输入=[
“苹果”，
未定义，
“香蕉”，
未定义，
未定义，
未定义，
未定义，
“梨”
];
常量输出=输入。过滤器（x=>x）；//过滤掉未定义的元素
console.log（输出）
Vue没有将
未定义的
插入阵列。这就是JavaScript数组（即）的行为

获取已定义元素的新数组的快速解决方案是使用：


const输入=[
“苹果”，
未定义，
“香蕉”，
未定义，
未定义，
未定义，
未定义，
“梨”
];
常量输出=输入。过滤器（x=>x）；//过滤掉未定义的元素
console.log（output）
数组的键和值是如何分配的？我用这个来分配它；然后它将分配undefined，因为中间的索引没有分配值。因为您只为索引1、2、8赋值。你不能用对象或映射来代替吗？你的数组如何有键值对？我用这个来分配它；然后它将分配undefined，因为中间的索引没有分配值。因为您只为索引1、2、8赋值。你不能用物体或地图来代替吗？