当前位置: 首页 > article >正文

map优化对象数组

假设下面这个数组是你需要使用的数组,是否感觉他很笨重呢?

const citydate3 = ref([
  {
    text: now.getFullYear() - 1,
    id: 0,
    children: [
      { text: "全年", id: 0 },
      { text: 1, id: 1 },
      { text: 2, id: 2 },
      { text: 3, id: 3 },
      { text: 4, id: 4 },
      { text: 5, id: 5 },
    ],
  },
  {
    text: now.getFullYear(),
    id: 1,
    children: [
      { text: "全年", id: 0 },
      { text: 1, id: 1 },
      { text: 2, id: 2 },
      { text: 3, id: 3 },
      { text: 4, id: 4 },
      { text: 5, id: 5 },
    ],
  },
  {
    text: now.getFullYear() + 1,
    id: 3,
    children: [
      { text: "全年", id: 0 },
      { text: 1, id: 1 },
      { text: 2, id: 2 },
      { text: 3, id: 3 },
      { text: 4, id: 4 },
      { text: 5, id: 5 },
    ],
  },
]);

这是一个日期picker组件的数据,外层text代表年份,内层text代表那一年的月份,id均为index,下面运用map方法进行改写

const citydate3 = ref(
  [now.getFullYear() - 1, now.getFullYear(), now.getFullYear() + 1].map((text, index) => ({
    text,
    id: index,
    children: ["全年", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((text, index) => ({
      text,
      id: index,
    })),
  })),
);

其实map解析数组和for循环有点像,数组解析出来的每一项作为text,index为每一项的索引
现已知外层索引为1,内层索引为12,你可以使用以下方法访问外层和内层的text

const pickok = () => {
  //获取外层对象
  const obj1 = citydate3.value.find((obj) => obj.id === 1);
  //获取内层对象
  const obj2 = obj1.children.find((obj) => obj.id === 6);
  console.log(obj1.text, obj2.text);
};

http://www.kler.cn/a/155288.html

相关文章:

  • 移门缓冲支架的作用与优势
  • 2024年【汽车修理工(高级)】考试试卷及汽车修理工(高级)证考试
  • Kubebot:一款Google云平台下的Slackbot安全测试工具
  • 【C语言刷力扣】66.加一
  • python爬虫指南——初学者避坑篇
  • Flutter 主流常用第三方库、插件收集
  • ThinkPHP 5 中,你可以使用定时任务调度器(TaskScheduler)来执行其他定时任务
  • Linux:动态查看服务器磁盘IO使用情况(IOTOP)
  • 若依框架分页
  • 栈和队列算法总结
  • springboot 2.4.4集成 hikari连接池多数据源实例
  • React-hook-form-mui (二):表单数据处理
  • 拥抱变化,良心AI工具推荐
  • 【物联网无线通信技术】ZigBee从理论到实践(CC2530)
  • Docker下安装MySQL
  • 2023年第十六届山东省职业院校技能大赛中职组“网络安全”赛项竞赛正式试题
  • 【最通用版FPGA 实现 SPI 驱动】
  • 力扣116. 填充每个节点的下一个右侧节点指针(详细讲解root根节点的理解)
  • 种群和种群之间连接的设计
  • 树莓派多串口通信
  • 力扣5.最长回文子串
  • 变分和导数有什么关系
  • 智能优化算法应用:基于动物迁徙算法无线传感器网络(WSN)覆盖优化 - 附代码
  • Linux 命令stat
  • Spring学习笔记:Day2
  • docker容器中创建非root用户