如何扁平化js

Question

如何展平这个数组：

[
  {ID: 0 , TITLE: 'A', children: [{ID: 1, TITLE: 'AA'}]},
  {ID: 2 , TITLE: 'B', children: []},
  {ID: 3 , TITLE: 'C', children: [{ID: 4, TITLE: 'CC', children:[{ID: 5, TITLE: 'CCC'}]}]}
]

要得到这样的东西：

• 一个
• A / AA
• B
• C / CC / CCC

Answer 1

您可以使用存储实际对象的嵌套项并采用迭代和递归方法，并在路径上使用闭包。

对于递增的ID，如果找到新行，您可以使用附加变量进行递增，或者在给定数组的末尾迭代并将索引添加为id。

这个提议使用了一个额外的id 变量，因为它不需要额外的循环。

var array = [{ ID: 0, TITLE: 'A', children: [{ ID: 1, TITLE: 'AA' }] }, { ID: 2, TITLE: 'B', children: [] }, { ID: 3, TITLE: 'C', children: [{ ID: 4, TITLE: 'CC', children: [{ ID: 5, TITLE: 'CCC' }] }] }],
    id = 0,
    result = array.reduce(function f(p) {
        return function (r, o) {
            var temp = p.concat(o.TITLE);
            r.push({ ID: id++, TITLE: temp.join('/') });
            if (o.children) {
                o.children.reduce(f(temp), r);
            }
            return r;
        };
    }([]), []);

console.log(result);

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

Answer 2

这里没有必要让事情复杂化，你只需要一个循环遍历数组项的函数，获取它们的TITLE，如果该项有children，我们递归调用该函数：

function getLevels(array, parent) {
  var results = [];
  array.forEach(function(el) {
    results.push(!parent ? el["TITLE"] : parent + "/" + el["TITLE"]);
    let prefix = parent ? parent + "/" + el["TITLE"] : el["TITLE"];
    if (el.children && el.children.length > 0) {
      getLevels(el.children, prefix).forEach(function(child) {
        results.push(child);
      });
    }
  });
  return results;
}

演示：

var arr = [{
    ID: 0,
    TITLE: 'A',
    children: [{
      ID: 1,
      TITLE: 'AA'
    }]
  },
  {
    ID: 2,
    TITLE: 'B',
    children: []
  },
  {
    ID: 3,
    TITLE: 'C',
    children: [{
      ID: 4,
      TITLE: 'CC',
      children: [{
        ID: 5,
        TITLE: 'CCC'
      }]
    }]
  }
];

function getLevels(array, parent) {
  var results = [];
  array.forEach(function(el) {
    results.push(!parent ? el["TITLE"] : parent + "/" + el["TITLE"]);
    let prefix = parent ? parent + "/" + el["TITLE"] : el["TITLE"];
    if (el.children && el.children.length > 0) {
      getLevels(el.children, prefix).forEach(function(child) {
        results.push(child);
      });
    }
  });
  return results;
}

console.log(getLevels(arr));

编辑：

这是如何继续在数组中获取id：

results.push({
  "ID": el["ID"],
  "TITLE": (!parent ? el["TITLE"] : parent + "/" + el["TITLE"])
});

演示：

var arr = [{
    ID: 0,
    TITLE: 'A',
    children: [{
      ID: 1,
      TITLE: 'AA'
    }]
  },
  {
    ID: 2,
    TITLE: 'B',
    children: []
  },
  {
    ID: 3,
    TITLE: 'C',
    children: [{
      ID: 4,
      TITLE: 'CC',
      children: [{
        ID: 5,
        TITLE: 'CCC'
      }]
    }]
  }
];

function getLevels(array, parent) {
  var results = [];
  array.forEach(function(el) {
    results.push({
      "ID": el["ID"],
      "TITLE": (!parent ? el["TITLE"] : parent + "/" + el["TITLE"])
    });
    let prefix = parent ? parent + "/" + el["TITLE"] : el["TITLE"];
    if (el.children && el.children.length > 0) {
      getLevels(el.children, prefix).forEach(function(child) {
        results.push(child);
      });
    }
  });
  return results;
}

console.log(getLevels(arr));

Answer 3

你想要这样的东西吗？

function merge(input, flat_array) {
  if (!flat_array) {
    // this is the initial recursive call, make the input
    // (an array) have the same { child:[] } structure
    // as children calls will end up having
    flat_array = [];
    input = { children: input };
  } else {
    // since the parent call is just a plain array it doesnt
    // have a title so dont bother inserting anything
    flat_array.push(input.TITLE);
  }
  for (let i in input.children) {
    // recursively merge the children in into the flat array
    // too
    merge(input.children[i], flat_array);
  }
  return flat_array;
}

merge(x);

产生：

["A", "AA", "B", "C", "CC", "CCC"]