如何用JavaScript获取两个输入框中的非重复值？

需求说明 #

第一个输入框输入 George、Michael、John（换行分隔），第二个输入框输入 John、Robert、Michael（换行分隔），期望第三个输入框返回仅在单个输入框出现的 George、Robert。

原代码问题分析 #

你当前的代码逻辑存在核心错误：通过map按索引拼接两个输入框的元素，这种方式依赖输入框元素的顺序，无法正确判断元素是否在两个输入框中交叉出现。后续的过滤逻辑只能得到合并数组的重复项或去重后的全量项，无法实现需求。

解决方案 #

方法一：差集合并法（直观易懂） #

直接找出仅在第一个输入框存在的元素，加上仅在第二个输入框存在的元素，合并后即为目标结果：

const resultElement = document.getElementById('ResultField');
const text1Element = document.getElementById('old');
const text2Element = document.getElementById('new');

function myFunction() {
  // 统一处理输入：分割换行、去首尾空格、过滤空行、去重输入框内重复值
  const processInput = (input) => {
    return [...new Set(input.split('\n').map(item => item.trim()).filter(item => item !== ''))];
  };

  const list1 = processInput(text1Element.value);
  const list2 = processInput(text2Element.value);

  // 提取仅在单个输入框存在的元素
  const onlyInFirst = list1.filter(item => !list2.includes(item));
  const onlyInSecond = list2.filter(item => !list1.includes(item));

  // 输出结果
  resultElement.value = [...onlyInFirst, ...onlyInSecond].join('\n');
}

方法二：统计次数法（适合大数据量） #

通过统计元素在合并数组中的出现次数，筛选出仅出现一次的元素：

const resultElement = document.getElementById('ResultField');
const text1Element = document.getElementById('old');
const text2Element = document.getElementById('new');

function myFunction() {
  // 统一处理输入：分割换行、去首尾空格、过滤空行、去重输入框内重复值
  const processInput = (input) => {
    return [...new Set(input.split('\n').map(item => item.trim()).filter(item => item !== ''))];
  };

  const list1 = processInput(text1Element.value);
  const list2 = processInput(text2Element.value);
  const combined = [...list1, ...list2];

  // 统计每个元素的出现次数
  const countMap = combined.reduce((acc, item) => {
    acc[item] = (acc[item] || 0) + 1;
    return acc;
  }, {});

  // 筛选仅出现一次的元素（即仅在单个输入框存在）
  const uniqueItems = combined.filter(item => countMap[item] === 1);

  // 输出结果
  resultElement.value = [...new Set(uniqueItems)].join('\n');
}

关键说明 #

• processInput函数用于统一处理输入内容，避免空行、空格和输入框内重复值干扰结果
• 差集合并法逻辑直观，适合输入数据量不大的场景；统计次数法性能更优，适合处理大量数据

内容的提问来源于stack exchange，提问作者Romeo Popescu