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
A / AA
乙
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;
}

<强>演示：

＆＃13;

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));

＆＃13;

编辑：

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

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

<强>演示：

＆＃13;

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));

＆＃13;

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"]

如何平面阵列js

3 个答案:

编辑：