JavaScript中从两个结构不同的数组中查找差异元素的方法

Hey there! Let's figure out why your current filter code isn't behaving as expected, and get you the correct element from allElem.

First, Let's Break Down the Core Idea #

Your original code's logic is on the right track: you want to filter out elements from allElem that already exist in otherElem (matching by the key property). But there are a few potential snags that might be breaking it, plus we can optimize performance too.

Possible Reasons Your Code Isn't Working #

1. ES6 Compatibility Gaps
   The find method is an ES6 feature. If you're running this code in an older environment (like very outdated browsers or legacy Node.js versions), find might not be supported, causing the code to fail silently or throw errors.

2. Loose Type Annotations (Minor but Impactful)
   While your type annotation elem: { key: any; } doesn't directly break the code, it's a bit vague. If TypeScript's strict mode is enabled, this could lead to warnings that indirectly cause unexpected behavior.

Fixed & Optimized Solutions #

Solution 1: Use some for Better Compatibility #

some is an ES5 method (supported across nearly all modern and legacy environments) that returns true if any element matches your condition. Swap it in place of find and your code should work as intended:

const filtered = allElem.filter((elem) => !otherElem.some((item) => item.key === elem.key));

This will correctly return [{key: "ab234s", name: "toretrieve@gmail.com"}] just like you want.

Solution 2: Optimize with a Set (Great for Large Arrays) #

If your arrays are large, using some or find inside filter creates an O(n²) time complexity (slow for big datasets). Instead, extract all keys from otherElem into a Set first for O(1) lookups:

// Extract all keys from otherElem into a Set for fast lookups
const otherKeys = new Set(otherElem.map(item => item.key));
// Filter elements where key isn't present in the Set
const filtered = allElem.filter(elem => !otherKeys.has(elem.key));

This is way more efficient for large datasets and works seamlessly in modern environments.

Solution 3: Strict TypeScript Setup (Optional but Recommended) #

To avoid type-related headaches down the line, define proper interfaces for your elements:

interface BaseElement {
  key: string;
  name: string;
}

interface ExtendedElement extends BaseElement {
  newAtt: number;
}

const allElem: BaseElement[] = [
  {key: "a1234c", name: "username@gmail.com"},
  {key: "b6789d", name: "username2@gmail.com"},
  {key: "ab234s", name: "toretrieve@gmail.com"}
];

const otherElem: ExtendedElement[] = [
  {key: "a1234c", name: "username@gmail.com", newAtt: 1},
  {key: "b6789d", name: "username2@gmail.com", newAtt: 2}
];

const otherKeys = new Set(otherElem.map(item => item.key));
const filtered = allElem.filter(elem => !otherKeys.has(elem.key));

Quick Edge Case Checks #

If you're still stuck, double-check these:

• Are the key values in both arrays exactly identical (no extra spaces, casing differences, or type mismatches like string vs. number)?
• Is your runtime environment up-to-date (or do you need to add a polyfill for ES6 features)?

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