js將二維數(shù)組對象轉(zhuǎn)化為一維數(shù)組對象

let arr = [

  {
    a: 1,
    b: 2,
    c: 3,
    children: [
      {
        id: 1,
        a: 1-1,
        b: 1-2,
        c: 1-3,
      }
    ]
  },
  {
    a: 2-1,
    b: 2-2,
    c: 2-3,
    children: []
  }
]

要將數(shù)據(jù)格式變成

同時每個對象添加一個唯一的key值
function getData (arr) {
arr.forEach((item, index) => {

brr.push( Object.assign(item, {key: index}) )
if (item.children) {
  getData(item.children)
}
delete item.children;

})
return brr
}
getData(arr)

我寫了個提取的方法 children提取出來了，但是原來的children還是存在，而且key值也不是唯一的

回答

編輯回答

糖果果

lodash了解一下

2018年9月5日 18:31

編輯回答

幼梔

下面一段程序供參考, 層級多深都能支持。

解釋下這里用for不用forEach的原因，for在當(dāng)前循環(huán)判斷生效后，往arr添加后面添加子項，并會影響到下次循環(huán)，而forEach則不然。本來for的這個特性是個缺陷，ES5 forEach的出現(xiàn)也是為了彌補這個缺陷，但是事無絕對，用得好就是優(yōu)勢。

for(let item of arr) {
    if(item.children) {
        arr = arr.concat(item.children);
        delete item.children
    }
}
console.log(arr);

如果要求保持順序, 下面代碼參考下

for(let i=0; i < arr.length ; i++) {
    if(arr[i].children) {
      arr = arr.slice(0,i+1).concat(arr[i].children,arr.slice(i+1))
      delete arr[i].children
    }
}
console.log(arr);

PS：能用循環(huán)解決的問題，就不要用遞歸，如果層次太深，內(nèi)存吃不消不說，還有可能調(diào)用棧溢出，程序崩潰。

由于題主是圖片，測試代碼我也貼一下吧：

let arr = [
  {
    a:1,
    b:2,
    c:3,
    children: [
      {
        id:1,
        a: 1-1,
        b: 1-2,
        c: 1-3
      },
      {
        id: 2,
        a: 1-1,
        b: 1-2,
        c: 1-3,
        children: [
          {
            id:3,
            a: 1-1,
            b: 1-2,
            c: 1-3,
            children: [
              {
                id: 4,
                a: 1-1,
                b: 1-2,
                c: 1-3
              }
            ]
          }
        ]
      }
    ]
  },
  {
    a: 2-1,
    b: 2-2,
    children: []
  }
]

2018年7月5日 05:39

編輯回答