Question

有人能告诉我将数组转换为树状结构的最有效方法吗？

var array= [
        {id: "1",     name: "header1"},
        {id: "2",     name: "header2"},
        {id: "1.1",   name: "subheader1.1"},
        {id: "1.2",   name: "subheader1.2"},
        {id: "2.1",   name: "subheader2.1"},
        {id: "2.2",   name: "subheader2.2"},
        {id: "1.1.1", name: "subheader1detail1"},
        {id: "2.1.1", name: "subheader2detail2"}
];

结果数组必须如下：

var array = [{
    id: "1",
    name: "header1",
    items: [{
        id: "1.1",
        name: "subheader1.1",
        items: [{
            id: "1.1.1",
            name: "subheader1detail1",
        }]
    }, {
        id: "1.2",
        name: "subheader1.2"
    }]
}, {
    id: "2",
    name: "header2",
    items: [{
        id: "2.1",
        name: "subheader2.1",
        items: [{
            id: "2.1.1",
            name: "subheader2detail2",
        }]
    }, {
        id: "2.2",
        name: "subheader2.2"
    }]
}]

提前致谢

Answer 1

您可以使用树并构建嵌套数组。该提案需要一个排序列表。

基本上它查找节点的父节点，如果节点没有父节点，则找到根节点并将其插入结果数组中。如果找到父级，则将实际节点插入父级的items属性中。

var array = [{ id: "1", name: "header1" }, { id: "2", name: "header2" }, { id: "1.1", name: "subheader1.1" }, { id: "1.2", name: "subheader1.2" }, { id: "2.1", name: "subheader2.1" }, { id: "2.2", name: "subheader2.2" }, { id: "1.1.1", name: "subheader1detail1" }, { id: "2.1.1", name: "subheader2detail2" }],
    result = [];

array.forEach(function (a) {
    var parent = a.id.split('.').slice(0, -1).join('.');

    this[a.id] = { id: a.id, name: a.name };
    if (parent) {
        this[parent] = this[parent] || {};
        this[parent].items = this[parent].items || [];
        this[parent].items.push(this[a.id]);
    } else {
        result.push(this[a.id]);
    }
}, {});

console.log(result);

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

Answer 2

您可以尝试这样的事情：

我添加了注释来解释逻辑

＆＃13;

var array= [
  {id: "1",     name: "header1"},
  {id: "2",     name: "header2"},
  {id: "1.1",   name: "subheader1.1"},
  {id: "1.2",   name: "subheader1.2"},
  {id: "2.1",   name: "subheader2.1"},
  {id: "2.2",   name: "subheader2.2"},
  {id: "1.1.1", name: "subheader1detail1"},
  {id: "2.1.1", name: "subheader2detail2"},
];

var result = {};

// Sort in case values are not in order. 
// This is to ensure parent is rendered before child
array.sort(function(a, b) {
  return a.id > b.id ? 1 : a.id - b.id ? -1 : 0
})
// Loop over sorted array to parse
.forEach(function(el) {
  // Check if element does not exists to prevent duplicate
  if (!result[el.id]) {
    // if parent, push it
    if (el.id.indexOf('.') === -1)
      result[el.id] = el;
    // If child, compute depth and search object to push to
    else {
      var ids = el.id.split('.');
      var _id = '';
      // temp variable to hold position to push
      var r = result[ids[0]];
      for (var i = 1; i < ids.length; i++) {
        // Compute the object id
        _id = (_id ? _id + '.' : _id) + ids[i - 1];
        // initialize items
        r.items = r.items || [];
        // search in items to get object if exist
        var o = r.items.find(x => x.id === _id);
        // if object exists, assign it to temp variable
        // If not, push to parent
        if (o) r = o;
      }
      if (r) {
        r.items = r.items || [];
        r.items.push(el);
      }
    }
  }
})

console.log(result)

＆＃13;

注意：我更改了结构以保存对象而不是数组

Answer 3

在这里摆弄问题 - 使用Array.prototype.reduce和本地hash table分享整个解决方案 - 同时对结果进行排序。干杯！

＆＃13;

var array=[{id:"2",name:"header2"},{id:"1",name:"header1"},{id:"1.1",name:"subheader1.1"},{id:"1.2",name:"subheader1.2"},{id:"2.2",name:"subheader2.2"},{id:"2.1",name:"subheader2.1"},{id:"1.1.1",name:"subheader1detail1"},{id:"2.1.1",name:"subheader2detail2"}];

var result = array.sort(function(a,b) {
  return a.id - b.id;
}).reduce(function(hash) {
  return function(prev, curr) {
    var keys = curr.id.split('.');
    hash[curr.id] = hash[curr.id] || {};
    hash[curr.id] = {id: curr.id,name: curr.name};
    if (keys && keys.length > 1) {
      keys.pop();
      var key = keys.join('.');
      hash[key].items = hash[key].items || [];
      hash[key].items.push(hash[curr.id]);
    } else {
      prev.push(hash[curr.id]);
    }
    return prev;
  };
}(Object.create(null)), []);

console.log(result);

＆＃13;

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

＆＃13;

将数组动态转换为树状结构

3 个答案: