Vue 中如何避免数组重复数据: 使用 Set 结构

在 Vue 开发中，有时需要处理数组数据，并确保其中的数据不重复。例如，你可能想从一个数组 selectionRows 中提取所有 id 字段，并将其添加到另一个数组 this.mustMiddlegroundDifArr 中，但需要确保 this.mustMiddlegroundDifArr 中的数据不会重复。

你可以使用 Set 数据结构来避免重复数据的问题。Set 是一种无序且不重复的集合，可以用来存储唯一的值。

以下是使用 Set 来避免重复数据的代码示例：

// 初始化一个空的 Set
this.mustMiddlegroundDifArr = new Set();

// 遍历 selectionRows 数组
for (let i = 0; i < selectionRows.length; i++) {
  // 将 id 添加到 Set 中
  this.mustMiddlegroundDifArr.add(selectionRows[i].id);
}

// 将 Set 转换为数组
this.mustMiddlegroundDifArr = Array.from(this.mustMiddlegroundDifArr);

这样，this.mustMiddlegroundDifArr 数组中的数据就不会重复了。如果你需要保持原始的插入顺序，可以使用 Array.from 方法将 Set 转换为数组。

需要注意的是，Set 中的元素是唯一的，因此如果 selectionRows 数组中存在相同的 id，只会保留一个。如果你需要保留所有出现的 id，可以考虑使用 Map 数据结构来存储 id 及其出现次数。