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

debugcn 发表于 Dev

贾克斯

我正在尝试将一个库（Adobe Leonardo）的输出转换为Tailwindtailwind.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", contrast: 2, value: "#b18cff"},
      {name: "blue200", contrast: 3, value: "#8d63ff"},
      {name: "blue300", contrast: 4.5, 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", contrast: 2, value: "#b18cff"},
      {name: "blue200", contrast: 3, value: "#8d63ff"},
      {name: "blue300", contrast: 4.5, 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)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。