Question

人们！作为初级前端开发人员，这是我的第一个问题。

我有函数（https://jsfiddle.net/kmjhsbt9/）可以像这样转换平面数组：

const filePaths = [
  'src/lib/git.js',
  'src/lib/server.js',
  'build/css/app.css',
  'externs/test/jquery.js',
];

像这样进入对象树：

[
    src: {
            lib: {
                git.js: 'file',
                server.js: 'file',
            }
    },
    build: {
        css: {
            app.css: 'file'
        }
    }
    .....
]

请帮我了解如何重写该函数，以便它以以下格式输出结果：

 [
    {
         text: src,
         children: [
              {
                   text: 'lib',
                   children: [
                         {
                             text: git.js,
                             children: [
                                  {
                                      text: 'file'
                                  },
                             ]
                         }, 
                         {
                             text: server.js,
                             children: [
                                  {
                                      text: 'file'
                                  },
                             ]
                         }

                   ]
              }
         ]

    },
    {
        text: build,
        children: [
             {
                 text: app.css,
                 children: [
                      text: app.css,
                      children: [
                           {
                                text: 'file'
                           }
                      ]
                 ]
             }
        ]
    }
    .....
]

功能：

const getTree = (arr) => {
  let fileTree = [];

  function mergePathsIntoFileTree(prevDir, currDir, i, filePath) {
    if (!prevDir.hasOwnProperty(currDir)) {
      prevDir[currDir] = {};
    }

    if (i === filePath.length - 1) {
      prevDir[currDir] = 'file';
    }

    return prevDir[currDir];
  }

  function parseFilePath(filePath) {
    let fileLocation = filePath.split('/');

    if (fileLocation.length === 1) {
      return (fileTree[fileLocation[0]] = 'file');
    }

    fileLocation.reduce(mergePathsIntoFileTree, fileTree);
  }

  arr.forEach(parseFilePath);

  return fileTree;
}

非常感谢您！

Answer 1

您可以通过递归地迭代输出对象的键（由getTree生成的键）来实现此目的：

const filePaths = [
  'src/lib/git.js',
  'src/lib/server.js',
  'build/css/app.css',
  'externs/test/jquery.js',
];

// building the dependecy tree,
//an alternative version to your "getTree" function, but a bit cleaner
function getTree(filePaths) {

    return filePaths.reduce((all, item) => {

        let pointer = null;

        item.split('/').forEach((el, i, arr) => {

            if (!i) pointer = all;

            if (!pointer.hasOwnProperty(el)) {
                pointer[el] = (i === arr.length - 1) ? 'file' : {};
            }

            pointer = pointer[el];

        });

        return all;

    }, {});

}

// formatting the dependency tree to match the desired output with recursion
function buildChildTree(obj) {

    return Object.keys(obj).map(key => {

        return {
            text: key,
            children: obj[key] === 'file' ? [{text:'file'}] : buildChildTree(obj[key])
        }

    });

}

const dependencyTree = getTree(filePaths);
const result = buildChildTree(dependencyTree);

console.log(JSON.stringify(result, null, 2));

将数组转换为对象树[JS]

1 个答案: