前端开发中常见的数据结构优化问题与解决

// 后端返回的数据结构
const response = {
  user: {
    info: {
      basic: {
        name: '张三',
        age: 28,
        address: {
          province: '北京',
          city: '北京市',
          district: '朝阳区'
        }
      },
      contact: {
        phone: '13800138000',
        email: 'zhangsan@example.com'
      }
    }
  }
};

// 优化方案：扁平化处理
function flattenObject(obj, prefix = '', result = {}) {
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const newKey = prefix ? `${prefix}.${key}` : key;
      if (typeof obj[key] === 'object' && obj[key] !== null) {
        flattenObject(obj[key], newKey, result);
      } else {
        result[newKey] = obj[key];
      }
    }
  }
  return result;
}

const flattened = flattenObject(response.user.info);
console.log(flattened);
/*
{
  "basic.name": "张三",
  "basic.age": 28,
  "basic.address.province": "北京",
  "basic.address.city": "北京市",
  "basic.address.district": "朝阳区",
  "contact.phone": "13800138000",
  "contact.email": "zhangsan@example.com"
}
*/

// 后端返回的数据结构
const products = [
  { id: 1, name: 'iPhone', price: 5999 },
  { id: 2, name: 'MacBook', price: 9999 },
  { id: 3, name: 'iPad', price: 3299 }
];

// 优化方案：转换为键值映射
const productMap = products.reduce((map, product) => {
  map[product.id] = product;
  return map;
}, {});

console.log(productMap);
/*
{
  "1": { id: 1, name: "iPhone", price: 5999 },
  "2": { id: 2, name: "MacBook", price: 9999 },
  "3": { id: 3, name: "iPad", price: 3299 }
}
*/

// 使用示例
console.log(productMap[2].name); // 输出: MacBook

// 模拟分页请求
let cachedData = [];
let cachedIds = new Set();

function mergePaginationData(newPageData) {
  // 过滤掉已存在的数据
  const newItems = newPageData.filter(item => !cachedIds.has(item.id));
  
  // 更新缓存
  cachedData = [...cachedData, ...newItems];
  newItems.forEach(item => cachedIds.add(item.id));
  
  return cachedData;
}

// 第一页数据
const page1 = [
  { id: 1, title: '文章1' },
  { id: 2, title: '文章2' }
];
console.log(mergePaginationData(page1));
// 输出: [{ id: 1, title: '文章1' }, { id: 2, title: '文章2' }]

// 第二页数据（包含重复项）
const page2 = [
  { id: 2, title: '文章2' },
  { id: 3, title: '文章3' }
];
console.log(mergePaginationData(page2));
// 输出: [{ id: 1, title: '文章1' }, { id: 2, title: '文章2' }, { id: 3, title: '文章3' }]

// 后端返回的数据结构
const orders = [
  { id: 1, createTime: 1617187200000, amount: 100 },
  { id: 2, createTime: 1617273600000, amount: 200 },
  { id: 3, createTime: 1617091200000, amount: 150 }
];

// 优化方案：格式化时间并排序
function formatTime(timestamp) {
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}

const processedOrders = orders
  .map(order => ({
    ...order,
    createTimeFormatted: formatTime(order.createTime)
  }))
  .sort((a, b) => b.createTime - a.createTime);

console.log(processedOrders);
/*
[
  {
    id: 2,
    createTime: 1617273600000,
    amount: 200,
    createTimeFormatted: "2021-04-02"
  },
  {
    id: 1,
    createTime: 1617187200000,
    amount: 100,
    createTimeFormatted: "2021-04-01"
  },
  {
    id: 3,
    createTime: 1617091200000,
    amount: 150,
    createTimeFormatted: "2021-03-31"
  }
]
*/

// 后端返回的扁平数据
const flatData = [
  { id: 1, name: '部门A', parentId: null },
  { id: 2, name: '部门B', parentId: null },
  { id: 3, name: '小组A1', parentId: 1 },
  { id: 4, name: '小组A2', parentId: 1 },
  { id: 5, name: '小组B1', parentId: 2 },
  { id: 6, name: '成员A1-1', parentId: 3 }
];

// 优化方案：转换为树形结构
function buildTree(data, parentId = null) {
  return data
    .filter(item => item.parentId === parentId)
    .map(item => ({
      ...item,
      children: buildTree(data, item.id)
    }));
}

const treeData = buildTree(flatData);
console.log(JSON.stringify(treeData, null, 2));
/*
[
  {
    "id": 1,
    "name": "部门A",
    "parentId": null,
    "children": [
      {
        "id": 3,
        "name": "小组A1",
        "parentId": 1,
        "children": [
          {
            "id": 6,
            "name": "成员A1-1",
            "parentId": 3,
            "children": []
          }
        ]
      },
      {
        "id": 4,
        "name": "小组A2",
        "parentId": 1,
        "children": []
      }
    ]
  },
  {
    "id": 2,
    "name": "部门B",
    "parentId": null,
    "children": [
      {
        "id": 5,
        "name": "小组B1",
        "parentId": 2,
        "children": []
      }
    ]
  }
]
*/

// 模拟10000条数据
const bigData = Array.from({ length: 10000 }, (_, i) => ({
  id: i + 1,
  name: `项目${i + 1}`,
  value: Math.random() * 100
}));

// 优化方案：虚拟滚动只渲染可见区域数据
function getVisibleData(data, scrollTop, itemHeight, containerHeight) {
  const startIdx = Math.floor(scrollTop / itemHeight);
  const endIdx = Math.min(
    startIdx + Math.ceil(containerHeight / itemHeight),
    data.length
  );
  
  return {
    visibleData: data.slice(startIdx, endIdx),
    startIdx,
    endIdx
  };
}

// 示例使用
const { visibleData, startIdx, endIdx } = getVisibleData(
  bigData,
  1500,  // 滚动位置
  50,    // 每项高度
  500    // 容器高度
);

console.log(`显示 ${startIdx}-${endIdx} 项数据`, visibleData);
// 输出: 显示 30-40 项数据 [...]

// 后端返回的数据结构
const orders = [
  { id: 1, status: 1, paymentType: 'ALIPAY' },
  { id: 2, status: 2, paymentType: 'WECHAT' },
  { id: 3, status: 3, paymentType: 'UNIONPAY' }
];

// 优化方案：枚举值映射
const statusMap = {
  1: '待支付',
  2: '已支付',
  3: '已取消',
  4: '已完成'
};

const paymentTypeMap = {
  ALIPAY: '支付宝',
  WECHAT: '微信支付',
  UNIONPAY: '银联支付'
};

const processedOrders = orders.map(order => ({
  ...order,
  statusText: statusMap[order.status],
  paymentTypeText: paymentTypeMap[order.paymentType]
}));

console.log(processedOrders);
/*
[
  { id: 1, status: 1, paymentType: "ALIPAY", statusText: "待支付", paymentTypeText: "支付宝" },
  { id: 2, status: 2, paymentType: "WECHAT", statusText: "已支付", paymentTypeText: "微信支付" },
  { id: 3, status: 3, paymentType: "UNIONPAY", statusText: "已取消", paymentTypeText: "银联支付" }
]
*/