JavaScript嵌套for循环返回时数组未更新问题求助

Hey there! Your guess is totally right—this is 100% an asynchronous problem. Let’s break down why your code isn’t working and walk through how to fix it step by step.

What’s Going Wrong? #

The User.findOne() method is asynchronous—it uses a callback that only runs once the database query finishes. When your code hits return posts;, all those friend post queries are still running in the background. The posts.push() calls inside the callback haven’t executed yet, so your returned array only has the posts from the first synchronous loop.

How to Fix It #

We need to make sure we only return posts after all database queries have completed. Here are two clean, modern approaches to handle this:

Approach 1: Use async/await with Promise.all (Most Readable)

This is the best approach for modern JavaScript code. We’ll convert the callback-based database call to a Promise, then wait for all friend queries to finish before combining the posts.

async function getPosts(user) {
  let posts = [];
  
  // Add the user's own posts (this part works fine synchronously)
  for (let i = user.posts.length - 1; i >= 0; i--) {
    posts.push(user.posts[i]);
  }
  
  // Create an array of Promises for each friend's post query
  const friendPostPromises = user.friends.map(async (friendUsername) => {
    // Use .exec() to get a Promise instead of callbacks (standard for Mongoose-like ODMs)
    const theuser = await User.findOne({ username: friendUsername }).exec();
    if (theuser && theuser.posts.length > 0) {
      // Add friend's posts in reverse order (matches your original logic)
      for (let j = theuser.posts.length - 1; j >= 0; j--) {
        posts.push(theuser.posts[j]);
      }
    }
  });
  
  // Wait for all friend queries to finish before moving on
  await Promise.all(friendPostPromises);
  
  // Now all posts are added—return the complete array
  return posts;
}

Key Changes Explained:

• Marked the function as async so we can use await inside it
• Swapped var to let for proper block scoping (avoids weird hoisting bugs)
• Used User.findOne().exec() to get a Promise instead of relying on callbacks
• Used map() to create an array of Promises for each friend’s query
• await Promise.all(friendPostPromises) ensures we wait for every database call to finish before returning

Approach 2: Use Promises Without async/await (For Older Environments)

If you’re working in an environment that doesn’t support async/await, you can manage the Promises manually:

function getPosts(user) {
  let posts = [];
  
  // Add user's own posts
  for (let i = user.posts.length - 1; i >= 0; i--) {
    posts.push(user.posts[i]);
  }
  
  // Wrap each friend query in a Promise
  const friendPromises = user.friends.map(friendUsername => {
    return new Promise((resolve, reject) => {
      User.findOne({ username: friendUsername }, (err, theuser) => {
        if (err) return reject(err);
        if (theuser && theuser.posts.length > 0) {
          for (let j = theuser.posts.length - 1; j >= 0; j--) {
            posts.push(theuser.posts[j]);
          }
        }
        resolve();
      });
    });
  });
  
  // Return a Promise that resolves with the full posts array once all queries are done
  return Promise.all(friendPromises).then(() => posts);
}

How to Use the Fixed Function #

Both approaches return a Promise, so you’ll need to use .then() or await when calling the function:

// Using .then()
getPosts(currentUser).then(fullPosts => {
  console.log("All posts loaded:", fullPosts);
}).catch(err => {
  console.error("Error fetching posts:", err);
});

// Or using await (inside an async function)
async function displayPosts() {
  try {
    const fullPosts = await getPosts(currentUser);
    console.log("All posts loaded:", fullPosts);
  } catch (err) {
    console.error("Error fetching posts:", err);
  }
}
displayPosts();

Bonus: Simplify the Post Reversal #

Instead of looping backwards to reverse posts, you can use Array.reverse() for cleaner code. If you don’t want to mutate the original array, use the spread operator to make a copy first:

// Replace this loop:
for (let j = theuser.posts.length - 1; j >= 0; j--) {
  posts.push(theuser.posts[j]);
}

// With this (mutates original posts array):
posts.push(...theuser.posts.reverse());

// Or this (preserves original posts array):
posts.push(...[...theuser.posts].reverse());

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