查找重复值工具

🔍 这是一个强大的数据分析工具,可以帮助你快速识别 JSON 数组中的重复值。

功能特点

• 📊 自动分析 JSON 数组数据
• 🔍 识别重复的 ID 和名称
• 📈 显示详细的统计信息
• 🎨 美观的可视化界面

使用说明

输入格式

工具接受标准的 JSON 数组格式,每个对象应包含 id 和 name 字段:

[
  {"id": 1, "name": "张三"},
  {"id": 1, "name": "李四"},
  {"id": 2, "name": "王五"}
]

分析结果

工具会显示三个关键指标:

核心功能实现

查找重复值算法

工具使用高效的哈希映射算法来识别重复项:

function findDuplicates(arr, key) {
    const map = {};
    arr.forEach(item => {
        const value = item[key];
        if (value !== undefined && value !== null) {
            map[value] = (map[value] || 0) + 1;
        }
    });
    return Object.fromEntries(
        Object.entries(map).filter(([_, count]) => count > 1)
    );
}

数据分析流程

function analyzeData() {
    const input = document.getElementById('dataInput').value.trim();
    const resultsDiv = document.getElementById('results');

    if (!input) {
        alert('请先粘贴数据！');
        return;
    }

    try {
        const data = JSON.parse(input);

        if (!Array.isArray(data)) {
            throw new Error('数据必须是数组格式');
        }

        if (data.length === 0) {
            throw new Error('数组不能为空');
        }

        const dupIds = findDuplicates(data, 'id');
        const dupNames = findDuplicates(data, 'name');

        // 生成统计信息和结果表格
        displayResults(data, dupIds, dupNames);

    } catch (error) {
        resultsDiv.innerHTML = `<div class="error">❌ 错误: ${error.message}</div>`;
        resultsDiv.classList.add('show');
    }
}

交互式工具

清空数据功能

function clearData() {
    document.getElementById('dataInput').value = '';
    document.getElementById('results').classList.remove('show');
    document.getElementById('results').innerHTML = '';
}

键盘快捷键

document.getElementById('dataInput').addEventListener('keydown', function(e) {
    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
        analyzeData();
    }
});

样式设计

工具采用现代化的渐变色设计,提供优雅的用户体验:

• 🎨 紫色渐变背景 (#667eea → #764ba2)
• 📱 响应式布局设计
• ✨ 流畅的交互动画
• 🌈 清晰的数据可视化

使用提示

常见问题

Q: 支持什么样的数据格式?

A: 工具支持标准的 JSON 数组格式,每个对象需要包含 id 和 name 字段。

Q: 可以分析多少条数据?

A: 理论上没有数量限制,但建议单次分析不超过 10000 条记录以保证性能。

Q: 如何导出分析结果?

A: 目前结果以表格形式显示在页面上,可以手动复制需要的数据。

技术栈

• 前端框架: 原生 JavaScript
• 样式: CSS3 + 渐变色设计
• 数据处理: ES6+ 特性
• 兼容性: 现代浏览器

未来改进计划

• [ ] 支持更多字段的重复检测
• [ ] 添加数据导出功能 (CSV/Excel)
• [ ] 支持自定义分析规则
• [ ] 增加数据可视化图表
• [ ] 批量文件上传分析