如何使用JavaScript并行过滤对象以提升处理速度？

Hey there, let's dig into why your current filtering logic is dragging its feet and get it snappy again.

First, let's break down the main bottlenecks in your current code:

• Unnecessary deep copy: Using JSON.parse(JSON.stringify(userSnapData)) to copy the entire 1000-object dataset before filtering is a huge waste of time. Serializing and deserializing all that data is expensive, especially when you only need to keep a subset.
• Inefficient reviver function: The reviver you're passing to JSON.parse runs on every single key-value pair in the entire dataset—not just each top-level object. That means you're doing those nested _.has checks way more times than needed.
• Repeated nested lookups: Every time you check _.has(userSnapData[this.state.authUserUID], 'Patients'), you're traversing the userSnapData object from the root again. No caching here means redundant work.

Here's the Optimized Version #

Let's rewrite this to be lean and fast:

if (!isPatient && this._isMounted) {
  // Cache the current user's patient data ONCE, outside the filter loop
  const currentUser = userSnapData[this.state.authUserUID];
  const currentUserHasPatients = currentUser && _.has(currentUser, 'Patients');

  // Filter directly on the original array, no full deep copy upfront
  const filteredUsers = userSnapData.filter(user => {
    // Skip if the user doesn't have a type, or isn't a Patient
    if (!user.type || user.type !== 'Patient') {
      return false;
    }

    // Only keep Patients that are linked to the current user
    return currentUserHasPatients && _.has(currentUser.Patients, user.id); // Adjust `user.id` to match your actual user identifier
  });

  // Only deep copy the filtered results (way fewer objects!)
  this.setState({
    Users: JSON.parse(JSON.stringify(filteredUsers))
  });
}

Why This Is Faster #

1. Minimized deep copying: We only copy the objects that pass the filter, not the entire 1000-item list.
2. Cached repeated lookups: We grab currentUser and check for Patients once, not every time we process an object.
3. Direct array filtering: Array.filter iterates over each top-level object exactly once, instead of every nested property like the reviver function does.
4. Simplified condition logic: The checks are linear and easy for JavaScript to optimize.

Bonus Optimization Tips #

• Filter at the database level: If your database supports it, add a query condition to only return Patient type users linked to the current user. This way you never even load the 1000 objects in the first place—this is the biggest performance win possible.
• Cache the filtered result: Use useMemo (for functional components) or a class component instance variable to cache the filtered list, so you don't re-run the filter on every re-render unless userSnapData or authUserUID changes.
• Lazy load/paginate: If you must handle 1000+ objects, load them in smaller chunks (e.g., 50 at a time) so filtering each chunk is fast and the UI stays responsive.

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