javascript - 如何递归嵌套对象值，以便父对象包含相应的命名集合？

Question

好的，首先:如果我能用一种不那么笨拙的方式来表达我的问题，我会这样做的。 😜
我正在为如何描述我正在尝试做的事情而苦苦挣扎。
目标
我正在尝试遍历一个对象(特别是默认 TailwindCss 配置中的 colors 对象)以生成我可以拉入 nunjucks 模板的 token 列表。事实证明，这比我预期的更具挑战性。
我可能缺少一些基本的东西，但我不知道我不知道什么，你知道吗？
我有以下函数，它只是在颜色对象上循环:

const tailwindSrc = require("../node_modules/tailwindcss/defaultConfig.js");
const colors = tailwindSrc.theme.colors;

const iterateObject = function (object) {
    let tokenList = [];
    Object.keys(object).forEach((key) => {
        Object.keys(object[key]).forEach((subkey) => {
            tokenList.push({
                token: {
                collectionKey: key,
                key: subkey,
                value: object[key][subkey],
                },
            });
        });
    });
    return tokenList;
  };

  iterateObject(colors);

这是我目前结果的代表性部分👇

{ token: { collectionKey: 'gray', key: '50',  value: '#f9fafb' } },
{ token: { collectionKey: 'gray', key: '100', value: '#f3f4f6' } },
{ token: { collectionKey: 'gray', key: '200', value: '#e5e7eb' } },
{ token: { collectionKey: 'gray', key: '300', value: '#d1d5db' } },
{ token: { collectionKey: 'gray', key: '400', value: '#9ca3af' } },
{ token: { collectionKey: 'gray', key: '500', value: '#6b7280' } },
{ token: { collectionKey: 'gray', key: '600', value: '#4b5563' } },
{ token: { collectionKey: 'gray', key: '700', value: '#374151' } },
{ token: { collectionKey: 'gray', key: '800', value: '#1f2937' } },
{ token: { collectionKey: 'gray', key: '900', value: '#111827' } }

但我想要 gray “集合”具有一个值，该值本身就是一个包含其他两个名称-值对的对象。
有点像下面的东西，我猜。我根本没有卡在下面的结构上；只是试图或多或少地说明我需要如何对事物进行分组。

{
  token: { 
      collectionKey: 'gray',
      collectionEntries: {
          item: { key: '100', value: '#f3f4f6' }
          item: { key: '200', value: '#e5e7eb' }
          item: { key: '300', value: '#d1d5db' }
          item: { key: '400', value: '#9ca3af' }
          item: { key: '500', value: '#6b7280' }
          item: { key: '600', value: '#4b5563' }
          item: { key: '700', value: '#374151' }
          item: { key: '800', value: '#1f2937' }
          item: { key: '900', value: '#111827' }
      }
  }
}

在过去的两天里，我已经做了大约 8-10 次尝试来完成我所追求的目标。到目前为止没有骰子。
在我看来，我的递归不够深入，无法完成我想要的事情，但是当我尝试更深入时，我一直无法以一致、可重复的方式使事情顺利进行。我向 lodash 寻求帮助，它 mock 我。我什至尝试创建两个包含我需要的东西的对象，然后将它们合并在一起(a la this)。没有骰子。
所以，我现在转向你，亲爱的读者。
当然，一个完整的解决方案会很棒。但我也很乐意接受链接、建议、警告、观察等。欢迎任何帮助。
谢谢!

更新
感谢您的帮助，阿米尔!
您上面提供的内容看起来很有希望。它还没有完全到位，但我认为这是朝着正确方向迈出的一步。
这是我从你的代码中得到的:

[
  {
    collectionKey: 'pink',
    collectionEntries: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object]
    ]
  },
...
]

我应该注意到每个 collectionKey系列中是 'pink' . 😁
查找对象数组的数组。唔。
我还应该注意到，我将您的一行代码从

let token: {};

到

let token = {};

知道上面出了什么问题吗？
再次感谢!

更新 #2
Amir，你要求查看我正在处理的数据的结构。我通过导入 colors 简化了事情(我希望)文件直接，而不是整个顺风配置。
这里是:

module.exports = {
  black: '#000',
  white: '#fff',
  rose: {
    50: '#fff1f2',
    100: '#ffe4e6',
    200: '#fecdd3',
    300: '#fda4af',
    400: '#fb7185',
    500: '#f43f5e',
    600: '#e11d48',
    700: '#be123c',
    800: '#9f1239',
    900: '#881337',
  },
  pink: {
    50: '#fdf2f8',
    100: '#fce7f3',
    200: '#fbcfe8',
    300: '#f9a8d4',
    400: '#f472b6',
    500: '#ec4899',
    600: '#db2777',
    700: '#be185d',
    800: '#9d174d',
    900: '#831843',
  },

  ...

};

请注意，有些条目不是嵌套的(例如 black 和 white)，但其余条目是嵌套的。
能够容纳这种差异会很棒。曾尝试包装两个不同的 .push if 中的方法语句，但似乎当我修复一个用例时，我破坏了另一个。
再次感谢你的帮助!

Answer 1

现在我们有了您的输入格式，我们可以相当简单地转换它。
这是一种技术，假设条目像 transparent和 black应该尽可能多地返回输出，并进一步假设 collectionEntries应该是一个数组。 (您的格式不起作用，在您的对象中一遍又一遍地重复键 item。)

const collectColors = (colors) => Object .entries (colors)
  .map (([k, v]) => (
    Object (v) === v
      ? {token: { 
          collectionKey: k,
          collectionEntries: Object .entries (v) .map (([key, value]) => ({item: {key, value}}))
        }} 
      : {token: {collectionKey: k, collectionEntries: []}}
  ))

const colors = {transparent: "transparent", current: "currentColor", black: "#000", white: "#fff", gray: {50: "#f9fafb", 100: "#f3f4f6", 200: "#e5e7eb", 300: "#d1d5db", 400: "#9ca3af", 500: "#6b7280", 600: "#4b5563", 700: "#374151", 800: "#1f2937", 900: "#111827"}, red: {50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5", 400: "#f87171", 500: "#ef4444", 600: "#dc2626", 700: "#b91c1c", 800: "#991b1b", 900: "#7f1d1d"}, yellow: {50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f"}, green: {50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b"}, blue: {50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a"}, indigo: {50: "#eef2ff", 100: "#e0e7ff", 200: "#c7d2fe", 300: "#a5b4fc", 400: "#818cf8", 500: "#6366f1", 600: "#4f46e5", 700: "#4338ca", 800: "#3730a3", 900: "#312e81"}, purple: {50: "#f5f3ff", 100: "#ede9fe", 200: "#ddd6fe", 300: "#c4b5fd", 400: "#a78bfa", 500: "#8b5cf6", 600: "#7c3aed", 700: "#6d28d9", 800: "#5b21b6", 900: "#4c1d95"}, pink: {50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4", 400: "#f472b6", 500: "#ec4899", 600: "#db2777", 700: "#be185d", 800: "#9d174d", 900: "#831843"}}

console .log (
  collectColors (colors)
)

.as-console-wrapper {max-height: 100% !important; top: 0}

制作变体很容易。如果你只想跳过像 transparent 这样的那些，然后您使用此变体:

const collectColors = (colors) => Object .entries (colors)
  .filter (([_, v]) => Object (v) === v)
  .map (([k, v]) => ({
    token: { 
      collectionKey: k,
      collectionEntries: Object .entries (v) .map (([key, value]) => ({item: {key, value}}))
    }
  }))

或者如果你想要 collectionEntries是一个包含 key 的数组- value对象(无论如何，额外的 items 包装器的用途是什么？)，您可以将相关行替换为

            collectionEntries: Object .entries (v) .map (([key, value]) => ({key, value}))

等等。