SOURCE

var goodsSpecList = [{
    "id": 171,
    "productId": 35,
    "skuCode": "202002250035001",
    "price": 200,
    "stock": 100,
    "lowStock": 50,
    "lockStock": 0,
    "spData": "[{\"key\":\"颜色\",\"value\":\"红色\"},{\"key\":\"尺寸\",\"value\":\"38\"},{\"key\":\"风格\",\"value\":\"夏季\"}]"
  },
  {
    "id": 172,
    "productId": 35,
    "skuCode": "202002250035002",
    "price": 240,
    "stock": 100,
    "lowStock": 50,
    "lockStock": 0,
    "spData": "[{\"key\":\"颜色\",\"value\":\"红色\"},{\"key\":\"尺寸\",\"value\":\"38\"},{\"key\":\"风格\",\"value\":\"秋季\"}]"
  },
  {
    "id": 173,
    "productId": 35,
    "skuCode": "202002250035003",
    "price": 200,
    "stock": 100,
    "lowStock": 50,
    "lockStock": 0,
    "spData": "[{\"key\":\"颜色\",\"value\":\"红色\"},{\"key\":\"尺寸\",\"value\":\"39\"},{\"key\":\"风格\",\"value\":\"夏季\"}]"
  },
  {
    "id": 174,
    "productId": 35,
    "skuCode": "202002250035004",
    "price": 200,
    "stock": 100,
    "lowStock": 50,
    "lockStock": 0,
    "spData": "[{\"key\":\"颜色\",\"value\":\"红色\"},{\"key\":\"尺寸\",\"value\":\"39\"},{\"key\":\"风格\",\"value\":\"秋季\"}]"
  },
  {
    "id": 175,
    "productId": 35,
    "skuCode": "202002250035005",
    "price": 200,
    "stock": 100,
    "lowStock": 50,
    "lockStock": 0,
    "spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"},{\"key\":\"尺寸\",\"value\":\"38\"},{\"key\":\"风格\",\"value\":\"夏季\"}]"
  },
  {
    "id": 176,
    "productId": 35,
    "skuCode": "202002250035006",
    "price": 200,
    "stock": 100,
    "lowStock": 50,
    "lockStock": 0,
    "spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"},{\"key\":\"尺寸\",\"value\":\"38\"},{\"key\":\"风格\",\"value\":\"秋季\"}]"
  },
  {
    "id": 177,
    "productId": 35,
    "skuCode": "202002250035007",
    "price": 200,
    "stock": 100,
    "lowStock": 50,
    "lockStock": 0,
    "spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"},{\"key\":\"尺寸\",\"value\":\"39\"},{\"key\":\"风格\",\"value\":\"夏季\"}]"
  },
  {
    "id": 178,
    "productId": 35,
    "skuCode": "202002250035008",
    "price": 200,
    "stock": 100,
    "lowStock": 50,
    "lockStock": 0,
    "spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"},{\"key\":\"尺寸\",\"value\":\"39\"},{\"key\":\"风格\",\"value\":\"秋季\"}]"
  }
];


/**
 * 元数据生成 [
        {name: '颜色', item: ['红', '黑']},
        {name: '尺寸', item: ['38', '39']},
        {name: '风格', item: ['春季', '夏季', '秋季','冬季']}
    ]
 */
function format(data) {
  const resultMap = data.reduce((map, item)=>{
    const spData = JSON.parse(item.spData);
    spData.forEach(({key, value})=>{
      const spMap = map[key] || (map[key] = {});
      spMap[value] = true;
    });
    return map
  }, {});
  const result = Object.keys(resultMap).map(key=>{
    const spMap = resultMap[key];
    const list = Object.keys(spMap);
    return {
      name: key,
      item: list
    }
  })
  console.log(result,'result')
  return result
}
format(goodsSpecList)
console 命令行工具 X clear

                    
>
console