JavaScript 实现数组去重的几种方法

本文探讨了使用双重for循环、indexOf方法、Set和Map等在JavaScript中对基本数组和对象数组进行去重的技巧,同时介绍了如何根据对象属性进行去重操作。通过实例展示了每种方法的实现和适用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 基本数组

原始数组:

[4, 2, 6, 4, 1, 8, 7, 3, 1, 2]

去重后数组:

[4, 2, 6, 1, 8, 7, 3]

1. 双重for循环

该方法返回去重后的数组,并且会改变原数组

const unique = arr => {
    // 错误处理
    if (!Array.isArray(arr)) throw new Error('params is not Array!');
    let len = arr.length;
    for (let i = 0; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                len--;
                j--;
            }
        }
    }
    return arr;
};

遍历数组(外层for循环),将数组中的每个元素与其他元素进行比较(内层for循环),若出现相同元素,则将该元素删除。splice()会改变原有数组,所以len--j--,遍历完成后返回数组。

2. 利用indexOf

该方法不会改变原数组。

const unique = arr => {
    if (!Array.isArray(arr)) throw new Error('params is not Array!');
    const newArr = [];
    const len = arr.length;
    for (let i = 0; i < len; i++) {
        if (newArr.indexOf(arr[i]) < 0) newArr.push(arr[i]);
    }
    return newArr;
};

创建新数组newArr,遍历旧数组,利用indexOf()方法判断元素是否在newArr中(indexOf()返回某个指定的元素首次出现的位置。如果没有找到匹配的元素则返回 -1),若不在则将该元素添加到新数组。

还有另外一种写法,使用filter过滤掉重复的元素:

const unique = arr => {
    if (!Array.isArray(arr)) throw new Error('params is not Array!');
    return arr.filter((item, index) => arr.indexOf(item) === index);
};

3. 利用Set

该方法不会改变原数组。

const unique = arr => {
    if (!Array.isArray(arr)) throw new Error('params is not Array!');
    return [...new Set(arr)];
};

集合的特性之一是无序且唯一,可以先将数组转化为集合Set,内部会自动将重复的元素去除,再重新转化为数组即可。

还可以使用Array.from来实现:

const unique = arr => {
    if (!Array.isArray(arr)) throw new Error('params is not Array!');
    return Array.from(new Set(arr));
};

2. 对象数组

对象数组去重,需要额外传递一个参数,即按照哪个key进行去重。

利用Map,将第一次出现相应key的对象保存下来,最后整理成数组返回。

const unique = (arr, key) => {
    if (!Array.isArray(arr)) throw new Error('params is not Array!');
    const map = new Map();
    arr.forEach(obj => {
        if (!map.has(obj[key])) map.set(obj[key], obj);
    });
    return [...map.values()];
};

const arr = [
    { name: 'Jack', age: 18 },
    { name: 'Tom', age: 19 },
    { name: 'Jack', age: 17 },
    { name: 'Randy', age: 24 },
];

// 根据name去重
console.log(unique(arr, 'name'));
// [
//     { name: 'Jack', age: 18 },
//     { name: 'Tom', age: 19 },
//     { name: 'Randy', age: 24 },
// ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

火星飞鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值