為展平樹中的每個物件創建一個級別

我想實作一個 Angular 材質平面樹。我是減少函式和閉包的新手，理解下面的方法對我來說也很困難。是否可以簡化我使用下面的代碼來展平遞回樹。我的樹如下所示，我可以重寫包含級別的扁平代碼。我如何在這里合并級別。請問這個怎么實作，求幫助。

[ {
      "sectionIdent": "0/0",
      "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
      "sectionTitle": "Timed exam section 1",
      "sectionOrder": null,
      "randomCount": null,
      "mixContent": null,
      "totalCount": 0,
      "titleError": false,
      "randomError": false,
      "items": null,
      "delNavInfo": null,
      "subExamSections": [{
        "sectionIdent": "0/0/0",
        "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
        "sectionTitle": "Timed exam section 2",
        "sectionOrder": null,
        "randomCount": null,
        "mixContent": null,
        "totalCount": 0,
        "titleError": false,
        "randomError": false,
        "items": null,
        "delNavInfo": null,
        "subExamSections": [],
        "mainSection": true
    },
    {
      "sectionIdent": "0/0/1",
      "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
      "sectionTitle": "Timed exam section 3",
      "sectionOrder": null,
      "randomCount": null,
      "mixContent": null,
      "totalCount": 0,
      "titleError": false,
      "randomError": false,
      "items": null,
      "delNavInfo": null,
      "subExamSections": [{
        "sectionIdent": "0/0/1/0",
        "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
        "sectionTitle": "Timed exam section 4",
        "sectionOrder": null,
        "randomCount": null,
        "mixContent": null,
        "totalCount": 0,
        "titleError": false,
        "randomError": false,
        "items": null,
        "delNavInfo": null,
        "subExamSections": null,
        "mainSection": true
    }
  
    ],
      "mainSection": true
  }
    ],
      "mainSection": true
  }
];

我想要這樣的格式

[{
   ...sectionTitle:"Timed exam section 1",
   level:0
  },
 {
   ...sectionTitle:"Timed exam section 2",
   level:1
  },
{
   ...sectionTitle:"Timed exam section 3",
   level:1
  },
{
   ...sectionTitle:"Timed exam section 4",
   level:2
  },
]

代碼：

  buildFileTree(nodeArray: any, level: number): ExamSection[] {
    return nodeArray.reduce(function recur(accumulator, curr) {
      var keys = Object.keys(curr);
      keys.splice(keys.indexOf('subExamSections'), 1);
   
      accumulator.push(keys.reduce(function (entry, key) {
          entry[key] = curr[key];
          return entry;
      }, {}));
   
      if (curr.subExamSections && curr.subExamSections.length) {
          return accumulator.concat(curr.subExamSections.reduce(recur, []));
      }
   
      return accumulator;
   }, []);
  }

uj5u.com熱心網友回復：

你可以得到你正在尋找的結構：

function buildFileTree(tree = [], level = 0) {
  return Array.prototype.concat
    .apply(
      tree.map(item => ({ ...item, level })), // Add 'level' property
      tree.map(item => {
        const subtree = item.subExamSections || []
        const nextLevel = level   1
        return buildFileTree(subtree, nextLevel) // Combine with sub-tree recursively
      })
    )
    .map(({ sectionTitle, level }) => ({ sectionTitle, level })) // Extract the desired properties
}

uj5u.com熱心網友回復：

Concetp 使用： ...解構以添加和洗掉屬性， Recussiong：for 回圈， map創建新陣列， foreach迭代。

   let loop = (sections = [], flatSection = []) => {
        if(sections) {
        let editedShallowCopy  = sections.map((s, i) => {
            let { subExamSections , ...rest } = s;  // destructure to remove property
            return { ...rest, level: flatSection.length   i   1 } // adding the new property
        }); 
    
        flatSection.push(...editedShallowCopy); // adding it flatSection
        sections?.forEach(section => loop(section.subExamSections, flatSection)); // go in deeper levels of tree, Recussiong loop
        } 
    
        return flatSection;
    }

 console.log(loop(tree))

let tree = [{
  "sectionIdent": "0/0",
  "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
  "sectionTitle": "Timed exam section 1",
  "sectionOrder": null,
  "randomCount": null,
  "mixContent": null,
  "totalCount": 0,
  "titleError": false,
  "randomError": false,
  "items": null,
  "delNavInfo": null,
  "subExamSections": [{
      "sectionIdent": "0/0/0",
      "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
      "sectionTitle": "Timed exam section 2",
      "sectionOrder": null,
      "randomCount": null,
      "mixContent": null,
      "totalCount": 0,
      "titleError": false,
      "randomError": false,
      "items": null,
      "delNavInfo": null,
      "subExamSections": [],
      "mainSection": true
    },
    {
      "sectionIdent": "0/0/1",
      "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
      "sectionTitle": "Timed exam section 3",
      "sectionOrder": null,
      "randomCount": null,
      "mixContent": null,
      "totalCount": 0,
      "titleError": false,
      "randomError": false,
      "items": null,
      "delNavInfo": null,
      "subExamSections": [{
          "sectionIdent": "0/0/1/0",
          "examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
          "sectionTitle": "Timed exam section 4",
          "sectionOrder": null,
          "randomCount": null,
          "mixContent": null,
          "totalCount": 0,
          "titleError": false,
          "randomError": false,
          "items": null,
          "delNavInfo": null,
          "subExamSections": null,
          "mainSection": true
        }

      ],
      "mainSection": true
    }
  ],
  "mainSection": true
}];


let loop = (sections = [], flatSection = []) => {
  if (sections) {
    let editedShallowCopy = sections.map((s, i) => {
      let {
        subExamSections,
        ...rest
      } = s; // destructure to remove property
      return { ...rest,
        level: flatSection.length   i   1
      } // adding the new property
    });

    flatSection.push(...editedShallowCopy); // adding it flatSection
    sections.forEach(section => loop(section.subExamSections, flatSection)); // go in deeper levels of tree
  }

  return flatSection;
}

console.log(loop(tree))

標籤：javascript 有角的

上一篇：為什么useEffect中的useState在React中不起作用？

下一篇：MaterialUITextField，格式必填欄位