js把有chilren的全部合到一个数组内？

Question

有下面数据：

let data = [
    {id:1,name:'a',children:[
        {id:11,name:"aa"},
        {id:12,name:'bb'}
    ]},
    {id:2,name:'b'},
    {id:3,name:'c',children:[
        {id:333,name:'adsdf'},
        {id:2323,name:'sdff'}    
    ]}
]

怎么把下面的数据变成只有一级如：

[
    {id:1,name:'a'},
    {id:11,name:'aa'},
    {id:12,name:'bb'},
    {id:2,name:'b'},
    ...
]

Answer 1

试着写了个，可以展平任意级别：

let f = (a) => a.flatMap(({children: c = [], ...r}) => [r, ...f(c)]);

使用

f(data)

结果

[
  {
    "id": 1,
    "name": "a"
  },
  {
    "id": 11,
    "name": "aa"
  },
  {
    "id": 12,
    "name": "bb"
  },
  {
    "id": 2,
    "name": "b"
  },
  {
    "id": 3,
    "name": "c"
  },
  {
    "id": 333,
    "name": "adsdf"
  },
  {
    "id": 2323,
    "name": "sdff"
  }
]

Answer 2

如果只有两级可以用 map，如果不确定有多少级的话，写递归。

写一个两级的简单展开：

var data = [
  { id:1, name:'a',
    chilren:[
      {id:11,name:"aa"},
      {id:12,name:'bb'}
    ]
  },
  { id:2, name:'b' },
  { id:3, name:'c',
    chilred:[
     {id:333,name:'adsdf'},
     {id:2323,name:'sdff'}    
   ]
  }
]
var newData = data.map(item => [item, ...(item.chilred||[])]).flat()

Answer 3

这个是children中不包含children

let data = [
  {
    id: 1, name: 'a', children: [
      { id: 11, name: "aa" },
      { id: 12, name: 'bb' }
    ]
  },
  { id: 2, name: 'b' },
  {
    id: 3, name: 'c', children: [
      { id: 333, name: 'adsdf' },
      { id: 2323, name: 'sdff' }
    ]
  }
]


let arr = []
for (let item of data) {
  arr.push({
    id: item.id,
    name: item.name
  })
  if (item.children) {
    arr.push(...item.children)
  }
}

console.log(arr);

Answer 4

const flat = data => {
    const flatted = []
    const f = data => data.forEach(({ id, name, children }) => {
        flatted.push({ id, name })
        if (children) f(children, flatted)
    })
    f(data)
    return flatted
} 

Answer 5

function flat(arr) {
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].children && Array.isArray(arr[i].children) && arr[i].children.length > 0) {
            let children = arr[i].children;
            delete arr[i].children;
            newArr.push(arr[i]);
            const next = flat(children);
            newArr.push(...next);
        } else {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

Answer 6

function extractChildren(arr) {
    let extracted = [];
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].children) {
        extracted = extracted.concat(arr[i].children);
        delete arr[i].children;
      }
    }
    return arr.concat(extracted);
  }

let data = [
    {id:1,name:'a',children:[
        {id:11,name:"aa"},
        {id:12,name:'bb'}
    ]},
    {id:2,name:'b'},
    {id:3,name:'c',children:[
        {id:333,name:'adsdf'},
        {id:2323,name:'sdff'}    
    ]}
]
console.log(extractChildren(data))

Answer 7

data.flatMap(({children:c=[],...r})=>[...c,r])

Answer 8

参考阅读：使用递归遍历并转换树形数据（以 TypeScript 为例） - 边城客栈 - SegmentFault 思否

Answer 9

function tree(data, arr = []) {
      return data.reduce((acc, curr) => {
        let {id, name} = curr

        acc.push({id, name})

        if(curr.children) {
          return tree(curr.children, acc)
        }

        return acc
      }, arr)
    }

递归搞定

Answer 10

Array.prototype.flat()

flat(depth) 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

depth: 可选，指定要提取嵌套数组的结构深度，默认值为 1。
返回值: 一个包含将数组与子数组中所有元素的新数组。

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// Expected output: Array [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// Expected output: Array [0, 1, 2, Array [3, 4]]