javascript - 如何有效地将 json 转换为缩进文本树？

Question

给定一个像这样的 JSON:

{
    Normalize: {},
    Typography: {},
    'Flex-grid': {},
    Elements: {},
    Forms: {},
    Navigation: {
        Links: {},
        Menus: {}
    },
    Accessibility: {},
    Alignments: {},
    Clearings: {},
    Widgets: {},
    Content: {
        'Posts-and-pages': {},
        Comments: {}
    },
    'Infinite-scroll': {},
    Media: {
        Captions: {},
        Galleries: {}
    }
}

我想生成这样的缩进纯文本:

# Normalize
# Typography
# Flex grid
# Elements
# Forms
# Navigation
    ## Links
    ## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
    ## Comments
# Infinite scroll
# Media
    ## Captions
    ## Galleries

我想出了一些快速而肮脏的代码(我是一个 JavaScript 初学者)来实现这一点。当我运行代码时，它看起来非常慢。我该怎么做才能使其更快、更高效？

function jsonToIndentedText(json) {
    var text = JSON.stringify(json, null, '\t');

    var indentedText = [];

    var lines = text.split('\n');

    lines.forEach(function(line) {
        if ('{' == line || '{' == line || '' == line) {
            return;
        }

        var textNow = line.replace(/"/gi, '').replace(/:[\s | \S]*$/i, '');

        if (textNow.search("}") < 0) {
            textNowArr = textNow.split(/\t/gi);
            level = textNowArr.length - 1;
            var indents = '';
            var hashes = '#';
            for (var i = 1; i < level; i++) {
                indents += '\t';
                hashes += '#';
            }
            indentedText.push(indents + hashes + ' ' + textNow.replace(/\t/gi, '').replace(/-/gi,' '));
        }

    });
    return indentedText.join('\n');
}

这是我的jsfiddle:https://jsfiddle.net/94t4dyag/1/

Answer 1

我建议使用对象本身，因为您不需要对其进行字符串操作。

该提案使用一个函数进行递归调用，并以对象作为参数和实际深度级别。

函数内部从对象获取所有键并迭代它们。然后检查该值是否是对象。对于对象，将使用实际对象和增加的级别再次调用该函数。

如果找到值，则将该值添加到结果字符串中。

function print(object, level) {
    var SPACER = '    ',
        NEWLINE = '\n'
        result = '';

    level = level || 0;
    Object.keys(object).forEach(function (key) {
        var i = level;
        while (i--) {
            result += SPACER;
        }
        if (typeof object[key] === 'object' && object[key] !== null) {
            result += key + NEWLINE;
            result += print(object[key], level + 1);
            return;
        }
        result += key + ': ' + object[key] + NEWLINE;

    });
    return result;
}

var data = { Normalize: { somekey: 1 }, Typography: { anotherkey: 2 }, 'Flex-grid': {}, Elements: {}, Forms: {}, Navigation: { Links: {}, Menus: {} }, Accessibility: {}, Alignments: {}, Clearings: {}, Widgets: {}, Content: { 'Posts-and-pages': {}, Comments: {} }, 'Infinite-scroll': {}, Media: { Captions: {}, Galleries: {} } };
document.getElementById('pre').innerHTML = print(data);

<pre id="pre"></pre>