如何编写JSX兼容条件获取两数组中不匹配的元素？

嘿，我来帮你搞定这个需求！你现在需要从arr1里提取出那些不在arr2中的元素，而且得是JSX兼容的写法对吧？

首先得说下，你原来用两层map的写法其实不太适合这个场景——map是用来转换数组元素的，而我们现在要做的是筛选元素，用filter会更语义化，而且完全兼容JSX环境。

最简解决方案 #

直接用Array.filter()结合Array.includes()就能搞定，代码清晰又高效：

const arr1 = ["605116", "703771", "726664", "612706", "475557", "521034", "547016"];
const arr2 = ["605116", "703771"];

// 筛选出arr1中与arr2不匹配的元素
const unmatchedElements = arr1.filter(item => !arr2.includes(item));

console.log(unmatchedElements);
// 输出结果：["726664", "612706", "475557", "521034", "547016"]

代码解释 #

• filter()：遍历arr1的每一个元素，只保留回调函数返回true的元素，正好符合我们的筛选需求
• !arr2.includes(item)：判断当前元素是否不在arr2中，满足这个条件的元素就会被保留下来

在JSX中直接使用 #

如果要在React组件里渲染这些不匹配的元素，直接用上面的结果就行，比如：

function UnmatchedElementsList() {
  const arr1 = ["605116", "703771", "726664", "612706", "475557", "521034", "547016"];
  const arr2 = ["605116", "703771"];
  const unmatchedElements = arr1.filter(item => !arr2.includes(item));

  return (
    <div className="elements-list">
      <h3>不匹配的元素列表：</h3>
      <ul>
        {unmatchedElements.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

这种写法完全符合JSX的语法要求，没有任何兼容性问题，而且比你原来的两层map写法简洁太多啦！

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