const specs = [
  { name: '颜色', values: ['红色', '蓝色', '绿色'] },
  { name: '尺寸', values: ['S', 'M', 'L'] }
];

function generateSKUs(specs) {
  return specs.reduce((acc, spec) => {
    const newAcc = [];
    for (const combination of acc) {
      for (const value of spec.values) {
        newAcc.push({ ...combination, [spec.name]: value });
      }
    }
    return newAcc;
  }, [{}]); // 初始值是一个空对象数组
}

const skus = generateSKUs(specs);
console.log(skus);

输出的值显示

[
  { 颜色: '红色', 尺寸: 'S' },
  { 颜色: '红色', 尺寸: 'M' },
  { 颜色: '红色', 尺寸: 'L' },
  { 颜色: '蓝色', 尺寸: 'S' },
  { 颜色: '蓝色', 尺寸: 'M' },
  { 颜色: '蓝色', 尺寸: 'L' },
  { 颜色: '绿色', 尺寸: 'S' },
  { 颜色: '绿色', 尺寸: 'M' },
  { 颜色: '绿色', 尺寸: 'L' }
]

参数说明

accumulator：累加器累积回调的返回值。
currentValue：当前处理的数组元素。
index（可选）：当前处理的数组元素的索引。
array（可选）：调用reduce()方法的数组本身。
initialValue（可选）：作为第一次调用callback函数时accumulator参数的值。
-------------------------
acc, spec 上方这两个参数就是这个意思
 acc累加器累积回调的返回值，第一次会返回空数据，也就是尾部定义的 [{ }]定义0或者其他就会返回其他，后面也会返回相同类型，记得一定要写return就行
 spec  当前行数据 类似map 返回的