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

【问题标题】：Transform array to object tree [JS]将数组转换为对象树 [JS]
【发布时间】：2018-08-20 21:26:30
【问题描述】：

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

我有函数 (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;
}

非常感谢，提前！

【问题讨论】：

标签： javascript arrays object tree javascript-objects

【解决方案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));

【讨论】：