使用JavaScript箭头功能可根据条件迭代数组并在数组内创建数组吗？

Question

我有一个类似下面的数组。

 [{
  id: 1,
  is_child_question: false,
  parent_question_id: null },
{
  id: 2,
  is_child_question: true,
  parent_question_id: 1},
{
  id: 3,
  is_child_question: true,
  parent_question_id: 2}]

我想对其进行迭代并创建一个如下所示的新数组。

[{
  id: 1,
  is_child_question: false,
  parent_question_id: null,
  children: [{
    id: 2,
    is_child_question: true,
    parent_question_id: 1,
    children:[{
      id: 3,
      is_child_question: true,
      parent_question_id: 2,
      }]
  }] 
}]

像一棵树。 迭代节点是否具有is_child_question === true时，它应位于其父节点下。

Answer 1

很难解释一切。如果已经将其添加到孩子中的某人，则我使用递归来搜索它的父母。

let items = [
  {
    id: 1,
    is_child_question: false,
    parent_question_id: null 
  },
  {
    id: 2,
    is_child_question: true,
    parent_question_id: 1
  },
  {
    id: 3,
    is_child_question: true,
    parent_question_id: 2
  },
  {
    id: 4,
    is_child_question: true,
    parent_question_id: 1
  },
  {
    id: 5,
    is_child_question: true,
    parent_question_id: 2
  }
]
  
let result = []  
  
items.forEach(i => {
  if (!i.parent_question_id)
    result.push(i)
  else {
    let parent = findDeep(items, i.parent_question_id)
    if (!parent)
      return
    parent.children = parent.children || []
    parent.children.push(i)
  }
})

function findDeep (items, parentId) {
  const find = items.find(i => i.id === parentId)
  
  if (find)
    return find
  else {
    for (let item of items.filter(i => i.children)) {
      let result = findDeep(item.children, parentId)
      if (result)
        return result
    }
  }
  
  return null
}

console.log(result)

Answer 2

您可以为此使用reduce方法创建递归函数。

const data =  [{"id":1,"is_child_question":false,"parent_question_id":null},{"id":2,"is_child_question":true,"parent_question_id":1},{"id":3,"is_child_question":true,"parent_question_id":2},{"id":4,"is_child_question":false,"parent_question_id":2},{"id":5,"is_child_question":true,"parent_question_id":4},
{"id":6,"is_child_question":true,"parent_question_id":4}]

function tree(data, parentId = null) {
  return data.reduce((r, e) => {
    if (parentId == e.parent_question_id) {
      let elem = {...e}
      let children = tree(data, e.id);
      if (children.length) {
        if (!elem.children) {
          elem.children = []
        }

        children.forEach(c => {
          if (c.is_child_question) elem.children.push(c)
          else r.push({ ...c})
        })
      }
      r.push(elem)
    }
    return r;
  }, [])
}

const result = tree(data);
console.log(result)

Answer 3

您可以对对象采用单循环方法，以id作为键来收集对象。

var data = [{ id: 3, is_child_question: true, parent_question_id: 2 }, { id: 2, is_child_question: true, parent_question_id: 1 }, { id: 1, is_child_question: false, parent_question_id: null }],
    tree = data.reduce((r, o) => {
        o.children = r[o.id] && r[o.id].children;
        r[o.id] = o;
        r[o.parent_question_id] = r[o.parent_question_id] || {};
        r[o.parent_question_id].children = r[o.parent_question_id].children || [];
        r[o.parent_question_id].children.push(o);
        return r;
    }, {}).null.children;

console.log(tree);

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