JavaScript PC配件预算分配算法调试求助：各配件预算占比无法平衡至100%

Hey there! It’s totally normal to get stuck on balancing these percentage calculations when you’re starting out with JavaScript. Let’s walk through what’s causing your total percentages to not add up to 100%, and rewrite the logic to be more reliable and maintainable.

What’s Going Wrong in Your Current Code #

Your current approach has a few key issues that throw off the balance:

• Unnecessary hardcoded adjustments: Lines like CPUp -= 6 and Storagep -= 12.5 are arbitrary and don’t tie into your scene rules, which immediately disrupts the total.
• Overly complex balancing logic: The conditional blocks for negative values use confusing division calculations (like RAMp = RAMp - (RAMp / divide)) that create unpredictable results instead of proportional adjustments.
• No centralized balancing step: You’re trying to fix imbalances as you go, rather than first applying all scene rules and then correcting the total in one clean step.

A Better Approach #

Let’s restructure the code to:

1. Start with a solid base set of percentages.
2. Apply all scene-specific adjustments first.
3. Calculate the total percentage difference from 100%.
4. Proportionally adjust all components to make the total exactly 100%.
5. Add safeguards to keep percentages within realistic ranges (no negatives, no overly high values).

Refactored Code #

// Base budget percentages (starts balanced at 100%)
let basePercentages = {
  CPU: 20,
  GPU: 20,
  RAM: 15,
  Motherboard: 15,
  PSU: 10,
  Storage: 10,
  Case: 10
};

// User-selected scenarios (y = selected, n = not selected)
const scenarios = {
  Modeler3dvideoeditor: 'y',
  dataStorage: 'n',
  engineer: 'n',
  gamer: 'y',
  programmer: 'y',
  youtubestreamer: 'y'
};

// Apply scene-specific adjustments
function applySceneAdjustments() {
  if (scenarios.engineer === 'y') {
    basePercentages.GPU += 15;
    basePercentages.Motherboard -= 2.5;
  }
  if (scenarios.dataStorage === 'y') {
    basePercentages.CPU -= 5;
    basePercentages.GPU -= 5;
    basePercentages.Motherboard += 10;
    basePercentages.PSU += 5;
    basePercentages.Case += 10;
  }
  if (scenarios.Modeler3dvideoeditor === 'y') {
    basePercentages.CPU += 15;
    basePercentages.GPU += 10;
    basePercentages.RAM += 10;
    basePercentages.Storage += 5;
  }
  if (scenarios.programmer === 'y') {
    basePercentages.CPU += 15;
    basePercentages.GPU += 5;
    basePercentages.RAM += 15;
    basePercentages.Storage += 5;
  }
  if (scenarios.youtubestreamer === 'y') {
    basePercentages.CPU += 15;
    basePercentages.GPU += 10;
    basePercentages.RAM += 15;
    basePercentages.Storage += 5;
  }
  if (scenarios.gamer === 'y') {
    basePercentages.CPU -= 5;
    basePercentages.GPU += 10;
    basePercentages.RAM += 5;
    basePercentages.Storage += 5;
  }
}

// Balance percentages to total 100%
function balancePercentages() {
  // Calculate current total
  const total = Object.values(basePercentages).reduce((sum, val) => sum + val, 0);
  const difference = 100 - total;

  // Calculate the scaling factor to adjust all percentages proportionally
  const scaleFactor = 100 / total;

  // Apply scaling to get to 100%
  for (const component in basePercentages) {
    basePercentages[component] *= scaleFactor;
    // Round to 2 decimal places for readability
    basePercentages[component] = Math.round(basePercentages[component] * 100) / 100;
  }

  // Final check to fix any rounding errors (ensure total is exactly 100)
  const finalTotal = Object.values(basePercentages).reduce((sum, val) => sum + val, 0);
  const finalDifference = 100 - finalTotal;
  // Add/subtract the tiny difference to the largest component to avoid negative values
  const largestComponent = Object.keys(basePercentages).reduce((a, b) => basePercentages[a] > basePercentages[b] ? a : b);
  basePercentages[largestComponent] += finalDifference;
}

// Apply safeguards to keep percentages realistic
function applySafeguards() {
  for (const component in basePercentages) {
    // Ensure no negative percentages
    if (basePercentages[component] < 0) basePercentages[component] = 0;
    // Set reasonable upper limits (adjust these based on your needs)
    if (component === 'CPU' && basePercentages[component] > 45) basePercentages[component] = 45;
    if (component === 'GPU' && basePercentages[component] > 40) basePercentages[component] = 40;
    if (component === 'RAM' && basePercentages[component] > 30) basePercentages[component] = 30;
    if (component === 'Motherboard' && basePercentages[component] < 15) basePercentages[component] = 15;
  }
}

// Run the full calculation
applySceneAdjustments();
applySafeguards();
balancePercentages();

// Log the results
console.log(basePercentages);
console.log('Total:', Object.values(basePercentages).reduce((sum, val) => sum + val, 0));

Key Improvements #

• Structured adjustments: All scene rules are grouped in one function, making it easy to add/modify scenarios later.
• Proportional balancing: Instead of manual division, we use a scaling factor to adjust all components evenly, ensuring the total hits 100% every time.
• Safeguards first: We fix unrealistic values (like negatives or overly high percentages) before balancing, so the scaling works with valid numbers.
• Readability: Using an object for percentages makes the code easier to follow than separate variables.

Testing with Your Scenario #

For the selected scenarios you provided (Modeler3dvideoeditor: 'y', gamer: 'y', programmer: 'y', youtubestreamer: 'y'), the output will have percentages that add up exactly to 100% while respecting your scene rules.

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