如何将 adobe leonardo 输出对象数组转换为更简单的对象以进行顺风配置

如何解决如何将 adobe leonardo 输出对象数组转换为更简单的对象以进行顺风配置

我正在尝试将一个库 (Adobe Leonardo) 的输出转换为 Tailwind's tailwind.config.js 所需的结构。

Leonardo 的原始输出遵循以下结构：

[
  { background: "#e0e0e0" },{
    name: 'gray',values: [
      {name: "gray100",contrast: 1,value: "#e0e0e0"},{name: "gray200",contrast: 2,value: "#a0a0a0"},{name: "gray300",contrast: 3,value: "#808080"},{name: "gray400",contrast: 4.5,value: "#646464"}
      ...etc
    ]
  },{
    name: 'blue',values: [
      {name: "blue100",value: "#b18cff"},{name: "blue200",value: "#8d63ff"},{name: "blue300",value: "#623aff"},{name: "blue400",contrast: 8,value: "#1c0ad1"}
      ...etc
    ]
  }
]

为了便于配置 Tailwind，我需要将该对象数组转换为如下所示的内容：

  {
    'gray': {
      "gray100": "#e0e0e0","gray200": "#a0a0a0","gray300": "#808080","gray400": "#646464",},'blue': {
      "blue100": "#b18cff","blue200": "#8d63ff","blue300": "#623aff","blue400": "#1c0ad1",}
  }

我怎样才能做到这一点？

解决方法

您可以使用 Array.reduce：

###想法：

• 循环数据并检查是否需要处理对象。
• 如果是，
  • 创建本地对象
  • 循环 values[i].value 并使用值更新此对象
  • 将此对象指定为 acc[item.name] = object
• 如果不是，请跳过。

const data = [
  { background: "#e0e0e0" },{
    name: 'gray',values: [
      {name: "gray100",contrast: 1,value: "#e0e0e0"},{name: "gray200",contrast: 2,value: "#a0a0a0"},{name: "gray300",contrast: 3,value: "#808080"},{name: "gray400",contrast: 4.5,value: "#646464"}
    ]
  },{
    name: 'blue',values: [
      {name: "blue100",value: "#b18cff"},{name: "blue200",value: "#8d63ff"},{name: "blue300",value: "#623aff"},{name: "blue400",contrast: 8,value: "#1c0ad1"}
    ]
  }
]

const output = data.reduce((acc,item) => {
  if ('name' in item) {
    const cssMap = {}
    item.values.forEach((value) => cssMap[value.name] = value.value)
    acc[item.name] = cssMap
  }
  return acc
},{})

console.log(output)

,

这可以使用 Array.prototype.reduce 函数来完成

const input = [
  { background: "#e0e0e0" },value: "#1c0ad1"}
    ]
  }
];

const output = input.reduce((acc,cur) => {
  if (cur.name) {
    acc[cur.name] = cur.values.reduce((curAcc,curVal) => {
      curAcc[curVal.name] = curVal.value;
      return curAcc;
    },{});
  }
  return acc;
},{});
console.log(output);