标签导航：

JavaScript 缩进路径处理优化：更清晰、更健壮的代码

本文将展示如何优化一段 javascript 代码，该代码用于解析带有缩进的字符串，并构建对应的层级路径。原始代码虽然功能正确，但在效率和可读性方面有提升空间。改进后的代码采用更清晰、更健壮的策略，有效处理不规则缩进，并提升代码的可维护性。

原始代码尝试通过计算空格数来判断缩进层级，这种方法在处理不规则缩进（例如跳层）时容易出错。

改进后的代码则分三个步骤：

步骤一：数据预处理

使用 map 函数处理每一行，计算缩进层级（以4个空格为一个层级），并将层级和对应的值（路径元素）存储在一个对象数组中。这使得代码更易于理解和维护。

步骤二：层级修正

使用 reduce 函数迭代处理层级信息，有效解决跳层问题，确保层级关系的准确性。这是原始代码中缺失的关键步骤，也是改进的关键所在。

步骤三：路径构建

使用循环，根据修正后的层级信息逐步构建路径。path 数组存储当前路径的各个层级，slice 和 join 方法高效地组合路径字符串，避免了原始代码中复杂的条件判断，使代码更简洁易懂。

如何高效地用JavaScript处理缩进式路径？

原始代码:

let str = `a
    b
        c
        k
    d
e
        f 
            h
    g`
const space_count = (str) => {
    return str.indexOf(str.trim())
}
const submit = () => {
    // ... (原始代码略)
}

改进后的代码:

let str = `a
    b
        c
        k
    d
e
        f
            h
    g`;

const lines = str.split("
")
    .map(line => ({
        level: ~~((line.length - line.trimStart().length) / 4),
        value: line.trim()
    }));

lines.reduce((level, it) => {
    if (it.level - level > 1) {
        it.level = level + 1;
    }
    return it.level;
}, 0);

const path = [];
const result = [];
for (const it of lines) {
    const { level, value } = it;
    path[level] = value;
    result.push(path.slice(0, level + 1).join("/"));
}

console.log(JSON.stringify(result, null, 4));

改进后的代码不仅解决了原始代码的潜在错误，还提高了代码的可读性和可维护性，实现了对缩进式路径的精准、高效处理。