JavaScript中如何优雅地处理嵌套数据结构：基于ES6类的实践

[
  {
    "id": 1,
    "categoryId": 1,
    "userId": 1,
    "category": {
      "id": 1,
      "name": "Objets"
    }
  },
  {
    "id": 2,
    "categoryId": 2,
    "userId": 2,
    "category": {
      "id": 2,
      "name": "Category two"
    }
  }
]

export class ClassPicture {
  constructor(id, categoryId, userId, category) {
    this.id = id;
    this.categoryId = categoryId;
    this.userId = userId;
    // 错误的做法：在构造函数内部定义类
    const categoryClass = class Category { // 注意这里是类定义，不是实例化
      constructor(id, name) {
        this.id = id;
        this.name = name;
      }
    };
    // 即使定义了，也无法直接使用 category(2,1) 这样的语法来实例化
    // 并且每次创建 ClassPicture 实例时都会重新定义 Category 类，效率低下且不符合规范
  }
}

// 尝试实例化时会遇到问题
// const newPictureAdded = new ClassPicture(1, 2, JSON.parse(sessionStorage.getItem("id")), category(2,1));

class ClassCategory {
    constructor(id, name) {
        this.id = id;
        this.name = name;
    }

    // 可以添加获取分类名称的方法
    getName() {
        return this.name;
    }
}

class ClassPicture {
  // 注意：此处构造函数接收的是一个 ClassCategory 的实例，而不是原始的分类ID或名称
  constructor(id, userId, categoryInstance) {
    this.id = id;
    this.userId = userId;
    // categoryInstance 应该是一个 ClassCategory 的实例
    this.category = categoryInstance;
  }

  // 可以添加获取图片所属分类名称的方法
  getCategoryName() {
    // 通过访问嵌套的 category 实例并调用其方法来获取信息
    return this.category.getName();
  }
}

// 模拟从API获取的JSON数据
const apiData = [
  {
    "id": 1,
    "categoryId": 1, // 此属性在 ClassPicture 中已省略，但数据中可能仍然存在
    "userId": 1,
    "category": {
      "id": 1,
      "name": "Objets"
    }
  },
  {
    "id": 2,
    "categoryId": 2,
    "userId": 2,
    "category": {
      "id": 2,
      "name": "Category two"
    }
  }
];

const pictures = [];

// 遍历API数据，逐个创建类实例
for (const pictureData of apiData) {
    // 第一步：实例化内部的 ClassCategory
    const categoryInstance = new ClassCategory(
        pictureData.category.id,
        pictureData.category.name
    );

    // 第二步：实例化外部的 ClassPicture，并将 ClassCategory 实例作为参数传入
    const pictureInstance = new ClassPicture(
        pictureData.id,
        pictureData.userId,
        categoryInstance // 传入已创建的 ClassCategory 实例
    );

    pictures.push(pictureInstance);
}

// 验证实例化结果
console.log("所有图片实例:", pictures);
// 访问第一个图片实例的分类名称
console.log("第一个图片实例的分类名称:", pictures[0].getCategoryName()); // 输出: Objets
// 直接访问嵌套对象的属性
console.log("第二个图片实例的分类ID:", pictures[1].category.id); // 输出: 2