JavaScript遍历两个列表对比生成新列表时重复输出如何解决

问题原因 #

你的双层循环逻辑存在错误：外层循环每拿出一个购物清单项，内层都会遍历所有家中现有食材，只要遇到不相等的项就把当前购物项塞入新列表，必然会出现重复。比如购物清单中的Cereal和家中7项食材全部不相等，会被重复添加7次；就算是家中已经有的Bread，在和其余6项不相等的食材对比时也会被添加6次，最终输出结果自然全部是重复内容。

修复方案 #

方法1：适配遍历学习阶段的写法 #

你需要先确认某一个购物清单项完全不存在于现有食材清单中，再往新列表添加，而不是每次匹配到不等项就添加：

let groceryList = ['Bread', 'Cereal', 'Bagels', 'Water', 'Apple'];
let currentGrocery = ['Eggs', 'Lettuce', 'Milk', 'Cheese','Bread','Water','Oil'];
let newList = [];

for (let i = 0; i < groceryList.length; i++) {
    // 先做标记，默认当前购物项家中没有
    let hasItem = false;
    for (let j = 0; j < currentGrocery.length; j++){
        if (groceryList[i] === currentGrocery[j]){
            // 匹配到相同项，标记为已有，跳出内层循环无需继续对比
            hasItem = true;
            break;
        }
    }
    // 遍历完所有现有食材都没匹配到相同项，再添加到新列表
    if (!hasItem) {
        newList.push(groceryList[i]);
    }
}

console.log(newList); // 输出：['Cereal', 'Bagels', 'Apple']

方法2：简化版内置方法写法 #

如果已经接触过数组内置方法，可以用includes()直接判断元素是否存在，无需手动写双层循环：

const groceryList = ['Bread', 'Cereal', 'Bagels', 'Water', 'Apple'];
const currentGrocery = ['Eggs', 'Lettuce', 'Milk', 'Cheese','Bread','Water','Oil'];
const newList = groceryList.filter(item => !currentGrocery.includes(item));

console.log(newList); // 输出：['Cereal', 'Bagels', 'Apple']

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