揭秘 JavaScript 数组过滤：数据筛选的神奇魔法！

背景

首先标题党一下，吸引大家点进来哈哈。很久没发文章了，最近终于没这么忙了，抽空到掘金上更新一篇文章吧

事情的缘由是，有天上班的时候在公交车上认识到一个同行的前端同学，我们互相留了联系方式，想着以后可以技术互相学习和分享成果。下车以后我就突然很好奇，对方平常写些怎么样的有意思的代码，有设计过怎么样的精妙的逻辑帮助到日常开发呢？？？因为我们都要站在巨人的肩膀上开发！

在这个背景下，我就想到了掘金想在平台，看看大家日常都是有写出怎么样的代码值得分享的，所以就有这一期的内容，下面是我的分享内容

分享内容

在我们的业务场景上经常出现一个相似的问题，在一个表格中选择若干条数据到另一个表格中，在这个过程中，有时候会出现选中的数据是重复的情况，但是我不希望看到有重复的数据展示出来，所以有下面这个方法的设计过程。

分享下面的需求，简单分析出来其实是通过某个主键来控制，过滤数组。其实逻辑也相对简单

js 复制代码

/**
 * @key key 是 表格中的主键，方便过滤数据 Only
 * @array array 是目标的数组，过滤的对象
 **/
function findDuplicatesByKey(key, array) {
    if (!Array.is(array)) {
        console.log('Target params array it's not Array!!!')
        return [];
    }
    if (typeof key === 'string') {
        console.log('Key it's not String!!!')
        return [];
    }
    // 使用reduce方法来遍历数组并构建一个以key为键，value为值的对象
    const keyMap = array.reduce((map, obj) => {
        const value = obj[key];
        if (!map[value]) {
            map[value] = obj;
        }
        return map;
    }, {});

    // 找到重复的数据
    const duplicates = Object.values(keyMap);
    
    if (duplicates.length < array.length) {
        console.log('存在重复的数据，已经进行过滤');
        // 可以给用户写提示信息
    }

    return duplicates;
}

// 示例用法
const array = [
    { id: "123", name: "Kobe" },
    { id: "123", name: "James" },
    { id: "1234", name: "Durant" }
];
const key = "id";
const filteredArray = findDuplicatesByKey(key, array);
console.log(filteredArray); // 过滤后的数据内容

总结

上面的内容也是简单的分享，谢谢你的时间阅读，内容也是相对浅显。

其实简单的分享旨意是想向评论区的大家学习一下有意思的方法工具，我有个习惯看其他仓库的代码，会首先看仓库中抽象出来的 Util 工具文件夹，这样是最直接看到一个开发者的逻辑抽象能力和编码的能力的，所以大家不妨分享一下自己认为有趣值得分享的内容到评论区，我们一起学习一下吧，再次感谢大家阅读，动动小手点个赞，这对我创作是莫大的帮助，让更多人参与到这个活动里