鍍金池/ 問答/HTML/ js將二維數(shù)組對(duì)象轉(zhuǎn)化為一維數(shù)組對(duì)象

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

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ù)格式變成

clipboard.png
同時(shí)每個(gè)對(duì)象添加一個(gè)唯一的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)

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

clipboard.png

回答
編輯回答
糖果果

lodash了解一下

2018年9月5日 18:31
編輯回答
幼梔

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

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

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)用棧溢出，程序崩潰。

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

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
編輯回答
空痕

你要求的每個(gè)對(duì)象的key值是什么意思，有什么規(guī)則？
如果不明確這個(gè)規(guī)則，可能后續(xù)處理出的數(shù)據(jù)不一定滿足你的要求。

2017年7月28日 06:00
編輯回答
網(wǎng)妓

注意你的push是在判斷外面，依舊會(huì)執(zhí)行

2017年10月20日 18:57