过滤数组对象重复定的数据
时间: 2024-05-01 13:22:17 浏览: 80
如果你想过滤一个数组对象中的重复项,可以使用 JavaScript 中的 Set 对象来实现。下面给出一个示例代码:
```javascript
const arr = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' },
{ id: 1, name: 'Alice' },
{ id: 4, name: 'David' },
{ id: 2, name: 'Bob' }
];
const uniqueArr = Array.from(new Set(arr.map(item => JSON.stringify(item)))).map(item => JSON.parse(item));
console.log(uniqueArr);
// Output: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }, { id: 4, name: 'David' }]
```
这里的关键是将每个对象转换为一个字符串,然后使用 Set 对象来过滤重复项,最后再将字符串转换回对象。需要注意的是,这种方法会忽略对象中的顺序,因此如果两个对象的属性相同但是顺序不同,也会被视为不同的对象。如果需要保留对象中的顺序,则需要使用其他方法来解决。
相关问题
过滤数组对象中的重复的数据
可以通过使用 Set 数据结构来过滤数组对象中的重复数据。具体实现步骤如下:
1. 将每个对象转换为字符串并存储在一个新数组中;
2. 使用 Set 数据结构对新数组去重;
3. 将去重后的字符串数组转换回对象数组。
示例代码如下:
```javascript
const arr = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' },
{ id: 3, name: 'Charlie' },
];
const strArr = arr.map(obj => JSON.stringify(obj));
const uniqueStrArr = [...new Set(strArr)];
const uniqueArr = uniqueStrArr.map(str => JSON.parse(str));
console.log(uniqueArr);
// 输出:[
// { id: 1, name: 'Alice' },
// { id: 2, name: 'Bob' },
// { id: 3, name: 'Charlie' }
// ]
```
vue修改 数组对象重复值
如果你想在 Vue 中修改数组对象中的重复值,可以按照以下步骤:
1. 找到数组中所有重复的值
- 可以使用 `reduce()` 方法来创建一个新的数组,只包含重复的值
- 也可以使用 `filter()` 方法来过滤出重复的值
2. 对于每个重复的值,进行修改
- 可以使用 `map()` 方法来修改每个重复的值
- 可以使用 `Vue.set()` 方法来更新 Vue 数据响应式
以下是一个示例代码,演示如何在 Vue 中修改数组对象中的重复值:
```vue
<template>
<div>
<ul>
<li v-for="(item, index) in modifiedArr" :key="index">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{ id: 1, name: "John" },
{ id: 2, name: "Jane" },
{ id: 3, name: "John" },
{ id: 4, name: "Peter" },
{ id: 5, name: "Jane" },
],
};
},
computed: {
duplicates() {
return this.arr.reduce((acc, curr, index, array) => {
if (array.findIndex((item) => item.name === curr.name) !== index && acc.indexOf(curr.name) === -1) {
acc.push(curr.name);
}
return acc;
}, []);
},
modifiedArr() {
return this.arr.map((item) => {
if (this.duplicates.indexOf(item.name) !== -1) {
const newItem = { ...item, name: `${item.name} (modified)` };
Vue.set(this.arr, this.arr.indexOf(item), newItem);
return newItem;
}
return item;
});
},
},
};
</script>
```
在上面的示例中,我们使用 `computed` 计算属性来获取修改后的数组对象。首先,我们使用 `reduce()` 方法找到了所有重复的值,然后使用 `map()` 方法对每个重复的值进行了修改。在修改的过程中,我们使用了 `Vue.set()` 方法来更新 Vue 数据响应式。最终输出的结果是:
```html
<div>
<ul>
<li>John</li>
<li>Jane</li>
<li>John (modified)</li>
<li>Peter</li>
<li>Jane (modified)</li>
</ul>
</div>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)