// 问个问题,一般在 Vue 或者 React
// 在框架具备很多组件通讯技术或者js语法支持的情况下,什么情况下会用 Es6 的 Class类?

在Vue或React中,通常会在以下情况下使用ES6的Class类:

综上所述,尽管Vue和React提供了很多的组件通讯技术和强大的JS语法支持,但在需要处理复杂组件模块、继承与重写生命周期管理、类成员的定义与组织静态功能实现以及面向对象编程场景下,使用ES6的Class类是一个常见的选择

// 简单的树形结构工具
export const filter = class Filter {
  private data: Array<any&gt;;

  constructor(data: Array<any&gt;) {
    this.data = data;
  }

  public buildTree(): any[] {
    const tree: any[] = [];
    this.data.forEach((item) =&gt; {
      if (!item.parentId) {
        tree.push(this.createNode(item, this.data));
      }
    });
    return tree;
  }

  private createNode(node: any, data: any[]): any {
    const children: any[] = [];
    data.forEach((item) =&gt; {
      if (item.parentId === node.id) {
        children.push(this.createNode(item, data));
      }
    });
    if (children.length &gt; 0) {
      node.children = children;
    }
    return node;
  }

  public processData(): any[] {
    const processedData = this.data.map((item) => {
      return {
        id: item.id,
        name: item.name.toUpperCase(),
        parentId: item.parentId,
      };
    });
    return processedData;
  }
}
----------------------------------------------
const data = [
  { id: 1, name: 'Root', parentId: null },
  { id: 2, name: 'Node 1', parentId: 1 },
  { id: 3, name: 'Node 2', parentId: 1 },
  { id: 4, name: 'Node 1.1', parentId: 2 },
  { id: 5, name: 'Node 1.2', parentId: 2 },
  { id: 6, name: 'Leaf', parentId: 4 },
];

const tree = new InitTree(data);
const builtTree = tree.buildTree();
const processedData = tree.processData();

console.log(builtTree);
console.log(processedData);
[
  {
    "id": 1,
    "name": "Root",
    "parentId": null,
    "children": [
      {
        "id": 2,
        "name": "Node 1",
        "parentId": 1,
        "children": [
          {
            "id": 4,
            "name": "Node 1.1",
            "parentId": 2,
            "children": [
              {
                "id": 6,
                "name": "Leaf",
                "parentId": 4
              }
            ]
          },
          {
            "id": 5,
            "name": "Node 1.2",
            "parentId": 2
          }
        ]
      },
      {
        "id": 3,
        "name": "Node 2",
        "parentId": 1
      }
    ]
  }
]

原文地址:https://blog.csdn.net/Dongfang_project/article/details/134597149

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_14513.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注