时间戳

首页 > 解决方案 > 递归地跟踪具有最终值的嵌套对象键

javascript - 递归地跟踪具有最终值的嵌套对象键

问题描述

给定一个形状如下的对象，（可能有未知数量的嵌套属性）

const theme = {
    fonts: {
        primary: 'Arial',
        secondary: 'Helvetica'
    },
    colors: {
        primary: 'green',
        secondary: 'red',
    },
    margin: {
        small: '0.5rem',
        medium: '1rem',
        large: '1.5rem'
    }
}

我试图实现以下目标：

  1. 递归循环，直到我遇到一个不是对象的值
  2. 当我达到这个值时，我希望能够访问导致它的所有键，以及最终值。

类似于以下内容：

['fonts', 'primary'], 'Arial'

['fonts', 'secondary'] 'Helvetica'

['colors', 'primary'] 'green'

等等

我尝试了各种不同的尝试，但让我感到困惑的是我如何跟踪键，并在再次调用原始循环时重置它们？

标签： javascriptrecursion

解决方案

谢谢大家的回复真的帮助我到达那里，我最终得到了这个：

const setCSSVars = (obj: { [key: string]: any }, stack: string[] = []) => {
  Object.entries(obj).forEach(([key, value]) => {
    if (typeof value === 'object' && value !== null) {
      setCSSVars(value, [...stack, key])
    } else {
      document.documentElement.style.setProperty(
        `--theme-${stack.join('-')}-${key}`,
        value
      )
    }
  })
}

推荐阅读