javaScript-----一维数组和数组对象去重的多种方法

在JavaScript中,可以使用多种方法对一维数组和数组对象进行去重。以下是一些常见的方法:

一维数组去重

1. 使用 Set

Set 只允许唯一值,可以直接用于一维数组的去重。

复制代码
const arr = [1, 2, 3, 1, 2];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3]
2. 使用 filter 和 indexOf

通过 filter 方法配合 indexOf 来去重。

复制代码
const arr = [1, 2, 3, 1, 2];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3]
3. 使用 reduce

利用 reduce 方法进行去重。

复制代码
const arr = [1, 2, 3, 1, 2];
const uniqueArr = arr.reduce((acc, current) => {
    if (!acc.includes(current)) {
        acc.push(current);
    }
    return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3]
4. 使用对象属性作为键

通过一个对象记录已存在的值,实现去重。

复制代码
const arr = [1, 2, 3, 1, 2];
const map = {};
const uniqueArr = arr.filter(item => {
    if (!map[item]) {
        map[item] = true;
        return true;
    }
    return false;
});
console.log(uniqueArr); // [1, 2, 3]

数组对象去重

1. 使用 Set 和 JSON.stringify

利用 Set 的特性,结合 JSON.stringify 进行去重。

复制代码
const arr = [{ id: 1 }, { id: 2 }, { id: 1 }];
const uniqueArr = Array.from(new Set(arr.map(a => JSON.stringify(a)))).map(e => JSON.parse(e));
console.log(uniqueArr); // [{ id: 1 }, { id: 2 }]
2. 使用 filter 和 findIndex

通过 filter 方法配合 findIndex 来去重。

复制代码
const arr = [{ id: 1 }, { id: 2 }, { id: 1 }];
const uniqueArr = arr.filter((item, index) => 
    arr.findIndex(obj => JSON.stringify(obj) === JSON.stringify(item)) === index
);
console.log(uniqueArr); // [{ id: 1 }, { id: 2 }]
3. 使用 reduce

利用 reduce 方法进行去重。

复制代码
const arr = [{ id: 1 }, { id: 2 }, { id: 1 }];
const uniqueArr = arr.reduce((acc, current) => {
    const x = acc.find(item => JSON.stringify(item) === JSON.stringify(current));
    if (!x) {
        return acc.concat([current]);
    } else {
        return acc;
    }
}, []);
console.log(uniqueArr); // [{ id: 1 }, { id: 2 }]
相关推荐
小画家~8 分钟前
vue3 里面的 itemList.reduce
前端·数据结构·算法
Liuqy-0518 分钟前
线程的互斥与同步机制——互斥锁、条件变量、无名信号量
linux·开发语言·线程·进程·条件变量·同步·互斥
锋行天下24 分钟前
langgraph 循环节点的静态和动态实现
前端·后端
geats人山人海29 分钟前
java 7异常
android·java·开发语言
keyipatience42 分钟前
JS学习笔记(2)数组,函数,作用域,对象
前端·javascript·笔记·学习·html
2603_9651481144 分钟前
商品价格监控 API 接口:从原理到实战的完整指南
java·前端·数据库·python·生活
donk13141 小时前
React Native for OpenHarmony 实战:三方库 react-native-segmented-control-tab 的鸿蒙化适配指南
javascript·react native·react.js·华为·harmonyos
Pniubi1 小时前
分片的意义?
java·开发语言
酷虎软件1 小时前
视频加字幕怎么制作
java·前端·音视频
Geoffwo1 小时前
robotjs0.6.0鼠标中轴滚动失效修复方案
前端·javascript