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

Posted 2023-03-07

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

【英文标题】：How to convert adobe leonardo output array of objects into an simpler object for tailwind configuration

【发布时间】：2021-04-05 01:26:30

【问题描述】：

我正在尝试将一个库 (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", 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",
    
  

我怎样才能做到这一点？

【参考方案1】：

您可以为此使用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)

【参考方案2】：

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

const input = [
   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 = 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);