Question

我正在尝试操纵此示例对象数组。

var data = [
  { id: 'A', name: 'Test1', parentId: null },
  { id: 'B', name: 'Test2', parentId: 'A'},
  { id: 'C', name: 'Test3', parentId: 'A'},
  { id: 'D', name: 'Test4', parentId: null },
  { id: 'E', name: 'Test5', parentId: 'D'},
  { id: 'F', name: 'Test6', parentId: 'D'},
];

我需要做的就是将数组映射到这样的数组

var data = [
  {
    id: 'A', 
    name: 'Test1', 
    parentId: null, 
    children:[
      { id: 'B', name: 'Test2', parentId: 'A'},
      { id: 'C', name: 'Test3', parentId: 'A'}
    ],
  },
  {
    id: 'D', 
    name: 'Test4', 
    parentId: null, 
    children:[
      { id: 'E', name: 'Test5', parentId: 'D'},
      { id: 'F', name: 'Test6', parentId: 'D'}
    ],
  },
];

使用lodash最简单的方法是什么？请帮助我。

Answer 1

_.groupBy在这种情况下更有效。您需要按parentId对元素进行分组，以便以后可以轻松分配他们的孩子。

var data = [
  { id: 'A', name: 'Test1', parentId: null },
  { id: 'B', name: 'Test2', parentId: 'A'},
  { id: 'C', name: 'Test3', parentId: 'A'},
  { id: 'D', name: 'Test4', parentId: null },
  { id: 'E', name: 'Test5', parentId: 'D'},
  { id: 'F', name: 'Test6', parentId: 'D'},
];

var map = _.groupBy(data, 'parentId');
map[null].forEach(item => item.children = map[item.id]);
console.log(map[null]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Answer 2

您可以使用reduce方法执行此操作，并为任何深度级别创建嵌套结构。

var data = [{ id: 'A', name: 'Test1', parentId: null },{ id: 'B', name: 'Test2', parentId: 'A'},{ id: 'C', name: 'Test3', parentId: 'A'},{ id: 'D', name: 'Test4', parentId: null },{ id: 'E', name: 'Test5', parentId: 'D'},{ id: 'F', name: 'Test6', parentId: 'D'}];

function tree(data, parentId = null) {
  return _.reduce(data, (r, e) => {
    if (parentId == e.parentId) {
      const o = _.clone(e);
      const children = tree(data, e.id);
      if (children.length) o.children = children;
      r.push(o)
    }
    return r;
  }, [])
}

const result = tree(data);
console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>

Answer 3

_.groupBy的使用最接近您的需求，只需如前所述选择parentId。如果您需要递归，可以尝试如下操作：

var data = [
  { id: 'A', name: 'Test1', parentId: null },
  { id: 'B', name: 'Test2', parentId: 'A'},
  { id: 'C', name: 'Test3', parentId: 'A'},
  { id: 'D', name: 'Test4', parentId: null },
  { id: 'E', name: 'Test5', parentId: 'B'},
  { id: 'F', name: 'Test6', parentId: 'D'},
];

function assignChildrens(grouped, parentId) {
    if (!grouped[parentId]) return [];
    return _.map(grouped[parentId], v => {
        v.childrens = assignChildrens(grouped, v.id);
        return v;
    });
}

var finalData = assignChildrens(_.groupBy(data, 'parentId'), null);

那样，您可以嵌套元素并仍然可以使用。

Answer 4

您可以采用单循环方法，将子代与父代之间的关系以及父代与子代之间的关系放入哈希表中，并仅返回给定根节点的子代。

var data = [{ id: 'A', name: 'Test1', parentId: null }, { id: 'B', name: 'Test2', parentId: 'A'}, { id: 'C', name: 'Test3', parentId: 'A'}, { id: 'D', name: 'Test4', parentId: null }, { id: 'E', name: 'Test5', parentId: 'D'}, { id: 'F', name: 'Test6', parentId: 'D'}],
    tree = function(data, root) {
        var t = {};
        data.forEach(o => {
            Object.assign(t[o.id] = t[o.id] || {}, o);
            t[o.parentId] = t[o.parentId] || { id: o.parentId };
            t[o.parentId].children = t[o.parentId].children || [];
            t[o.parentId].children.push(t[o.id]);
        });
        return t[null].children;
    }(data, null);

console.log(tree);

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

使用lodash在数组内部映射数组

4 个答案: