如何更优雅地对对象数组排序，动态生成按值分组的HTML元素？

Great question! Your current solution gets the job done, but we can refactor it to be cleaner, more maintainable, and easier to extend—especially when you need to sort by multiple fields down the line. Let's walk through a better approach.

Step 1: Group Your Data First (Instead of Checking Categories Mid-Loop) #

Instead of manually tracking existing categories and appending elements on the fly, we can use Array.reduce() to group your data by category in one pass. This separates the data processing logic from the HTML rendering, making your code easier to follow.

Here's how to group the data:

// Group data by category using reduce
const groupedData = data.reduce((acc, item) => {
  // Destructure category and value for clarity
  const { category, value } = item;
  
  // Initialize the category array if it doesn't exist
  if (!acc[category]) {
    acc[category] = [];
  }
  
  // Add the value to the corresponding category
  acc[category].push(value);
  return acc;
}, {});

Step 2: Render the Grouped Data #

Now that your data is neatly grouped, generating the HTML becomes straightforward. We can loop through the grouped data entries, create a category block, then append all its value elements in one go:

// Render each category and its values
for (const [category, values] of Object.entries(groupedData)) {
  // Create the category container
  const categoryBlock = newBlockWithCat(category);
  
  // Add all value blocks to the category container
  values.forEach(value => {
    const valueBlock = newBlock(value);
    categoryBlock.append(valueBlock);
  });
  
  // Add the completed category block to the main container
  mainHTMLContainer.append(categoryBlock);
}

Handling Multiple Sort Criteria #

If you need to sort by multiple fields (e.g., first by category name, then by value), we can add a sorting step before grouping. This ensures both your categories and their inner values are ordered correctly.

Example: Sort by Category, Then by Value #

// Create a sorted copy of the original data
const sortedData = [...data].sort((a, b) => {
  // First compare category names alphabetically
  const categoryComparison = a.category.localeCompare(b.category);
  
  // If categories are the same, compare values
  if (categoryComparison !== 0) {
    return categoryComparison;
  }
  return a.value.localeCompare(b.value);
});

// Now group the sorted data (same reduce as before)
const groupedSortedData = sortedData.reduce((acc, item) => {
  const { category, value } = item;
  if (!acc[category]) {
    acc[category] = [];
  }
  acc[category].push(value);
  return acc;
}, {});

// Render using the grouped sorted data (same loop as before)
for (const [category, values] of Object.entries(groupedSortedData)) {
  const categoryBlock = newBlockWithCat(category);
  values.forEach(value => {
    categoryBlock.append(newBlock(value));
  });
  mainHTMLContainer.append(categoryBlock);
}

Why This Is Better #

• Separation of Concerns: Data processing (grouping/sorting) is separate from HTML rendering, making code easier to debug and modify.
• Scalability: Adding new sort criteria only requires updating the sort() callback—no need to touch the rendering logic.
• Cleaner Syntax: Uses modern JavaScript features like destructuring, Array.reduce(), and Object.entries() for more readable code.
• Less State to Manage: No need to manually track a categories array—reduce handles grouping automatically.

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