基于现有深度JavaScript对象动态生成多版本对象的技术实现求助

Let's work through fixing your code to match your exact requirements. First, let's break down the gaps in your current implementation, then walk through the corrected version step by step.

Key Issues in Your Current Code #

1. Variable Name Mismatch: You're referencing transparentValue instead of the numbers parameter passed to generateObjects—this will throw a reference error immediately.
2. Undefined Recursive Function: The generateNewObj function you call doesn't exist, so nested objects never get their color values modified.
3. Incorrect Key Handling: Top-level string properties keep their original keys instead of getting the MY-${number}- prefix, and you're assigning original object references instead of creating modified copies.
4. Shallow Object Assignment: Nested objects are directly copied by reference, which means you're modifying the original source object instead of creating independent versions.

Corrected Code (Matches Your Expected Output) #

This version handles deep object traversal, correct top-level key prefixing, and works with both single numbers and number arrays:

// Assume this is your dynamic value map (adjust as needed)
const anotherObject = {
  10: '80',
  30: '40'
};

export default function generateObjects(obj, numbers) { 
  // Normalize input to always work with an array of numbers
  const numArray = Array.isArray(numbers) ? numbers : [numbers];
  const finalObj = {}; 

  for (const number of numArray) { 
    // Process nested values first, then wrap top-level keys with the prefix
    const processedNested = processNestedValues(obj, number);
    for (const [key, value] of Object.entries(processedNested)) {
      finalObj[`MY-${number}-${key}`] = value;
    }
  } 

  return finalObj; 
} 

// Recursive function to modify color values in nested objects (keeps original nested keys)
function processNestedValues(obj, number) { 
  const result = {}; 

  for (const [key, value] of Object.entries(obj)) { 
    if (typeof value === 'object' && value !== null) { 
      // Recursively process nested objects, preserve their original keys
      result[key] = processNestedValues(value, number); 
    } else if (typeof value === 'string' && value.startsWith('#')) { 
      // Modify color strings by adding the dynamic value after the hash
      const colorWithoutHash = value.slice(1); 
      result[key] = `#${anotherObject[number]}${colorWithoutHash}`; 
    } else { 
      // Pass through non-color values as-is
      result[key] = value; 
    } 
  } 

  return result; 
}

How This Works #

1. Input Normalization: We convert the numbers parameter to an array so we can handle both single numbers (e.g., 10) and arrays (e.g., [10,30]) the same way.
2. Nested Value Processing: The processNestedValues function recursively traverses every level of the object:
   • For nested objects, it calls itself to modify their inner values while keeping original nested keys.
   • For color strings (starting with #), it strips the hash, prepends the dynamic value from anotherObject, and reattaches the hash.
3. Top-Level Key Prefixing: After processing all nested values, we wrap each top-level key with the MY-${number}- prefix before adding it to the final result object.

Test Result (Matches Your Expected Structure) #

When you call generateObjects(myObj, [10, 30]), you'll get exactly the structure you described:

{
  "MY-10-brown": {
    "50": "#80f9f8f2",
    "100": "#80f3f0e6"
  },
  "MY-10-singleProp": "#80e6b01e",
  "MY-10-propLvl1": {
    "color": "#8032a852",
    "sub1": {
      "color": "#8044eff2",
      "sub2": {
        "color": "#80f2448d"
      }
    }
  },
  "MY-30-brown": {
    "50": "#40f9f8f2",
    "100": "#40f3f0e6"
  },
  "MY-30-singleProp": "#40e6b01e",
  "MY-30-propLvl1": {
    "color": "#4032a852",
    "sub1": {
      "color": "#4044eff2",
      "sub2": {
        "color": "#40f2448d"
      }
    }
  }
}

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