基于JavaScript Array.prototype.reduce提取指定SKU子变体与属性解构处理

嘿，刚好之前处理过类似的嵌套产品变体数据问题，用reduce来实现这个需求确实挺简洁的，尤其是要处理那些可能不存在的属性（比如有些变体压根没有child_variations）的时候，得做好容错处理。

咱们的核心需求是：遍历嵌套的product_variations数组，找到所有SKU匹配指定值的变体，然后收集它们的所有child_variations——还要考虑到子变体本身也可能嵌套更深的层级，所以得用递归逻辑来覆盖所有嵌套场景。

完整实现代码 #

function getChildVariationsBySku(variations, targetSku) {
  return variations.reduce((accumulator, currentVariation) => {
    // 1. 检查当前变体是否匹配目标SKU，匹配则收集它的子变体
    if (currentVariation.sku === targetSku) {
      // 用空数组兜底，避免解构undefined报错
      accumulator.push(...(currentVariation.child_variations || []));
    }

    // 2. 递归处理当前变体的子变体，继续查找匹配项
    if (currentVariation.child_variations?.length) {
      accumulator.push(...getChildVariationsBySku(currentVariation.child_variations, targetSku));
    }

    return accumulator;
  }, []); // 初始化累加器为空数组
}

代码细节解释 #

• 累加器初始化：我们用空数组[]作为reduce的初始值，用来存储最终收集到的所有子变体。
• SKU匹配判断：每遍历一个变体，先检查它的sku是否和目标SKU一致，如果匹配，就把它的child_variations解构到累加器里——这里用currentVariation.child_variations || []处理属性不存在的情况，防止解构undefined导致报错。
• 递归处理嵌套：如果当前变体有子变体（用可选链?.判断，避免访问不存在的length属性报错），就递归调用函数处理子变体数组，把找到的子变体也合并到累加器中。
• 容错处理：全程用|| []和可选链?.来处理缺失属性的场景，确保代码在数据结构不完整时也能正常运行。

使用示例 #

拿你提供的测试数据来演示：

const product_variations = [
  {
    product_variation_id: "",
    variation_name: "Test Variation",
    variation_item_name: "test",
    sku: "SKU000",
    price: 59.99,
    stock: 20,
    topLevel: true,
    child_variations: [{sku: "SKU001"}]
  },
  {
    sku: "SKU001",
    child_variations: [{sku: "SKU002", stock: 15}]
  }
];

// 提取SKU000对应的子变体
console.log(getChildVariationsBySku(product_variations, "SKU000"));
// 输出: [{sku: "SKU001"}]

// 提取SKU001对应的子变体
console.log(getChildVariationsBySku(product_variations, "SKU001"));
// 输出: [{sku: "SKU002", stock: 15}]

额外补充：只找第一个匹配的SKU #

如果你的需求是只提取第一个匹配SKU的子变体，不需要收集所有匹配项的子变体，可以稍微调整逻辑（虽然reduce不太适合中途终止，但可以结合递归+判断来实现）：

function getFirstChildVariationsBySku(variations, targetSku) {
  let matchedChildren = [];
  
  const findMatch = (variants) => {
    for (const variant of variants) {
      if (variant.sku === targetSku) {
        matchedChildren = variant.child_variations || [];
        return true; // 找到第一个匹配后立即终止
      }
      if (variant.child_variations && findMatch(variant.child_variations)) {
        return true;
      }
    }
    return false;
  };

  findMatch(variations);
  return matchedChildren;
}

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