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

Question

给定一个如下所示的对象(可以具有未知数量的嵌套属性)

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

我正在努力实现以下目标:

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

类似于以下内容:

['字体', '主要'], 'Arial'

['字体', '次要'] 'Helvetica'

['颜色', '主色'] '绿色'

等等

我尝试过各种不同的尝试，但困扰我的是如何跟踪按键，并在再次调用原始循环时重置它们？ 🤔

Answer 1

您可以采用递归方法检查对象并将嵌套子结果映射到最终结果。

const
    getPathes = object => Object
        .entries(object)
        .reduce((r, [k, v]) => {
            if (v && typeof v === 'object') {
                r.push(...getPathes(v).map(([p, v]) => [[k, ...p], v]));
            } else {
                r.push([[k], v]);
            }
            return r;
        }, []),
    theme = { fonts: { primary: 'Arial', secondary: 'Helvetica' }, colors: { primary: 'green', secondary: 'red' }, margin: { small: '0.5rem', medium: '1rem', large: '1.5rem' } };
    
console.log(getPathes(theme));

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