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

前端如何将后台数组进行等分切割

前端如何切割数组

目标:前端需要做轮播,一屏展示12个,后端返回的数组需要进行切割,将数据以12为一组进行分割

环境:vue3+ts+element plus

代码如下:

function divideArrayIntoEqualParts(array, chunkSize) {const length = array.length;const dividedArray = [];for (let i = 0; i < length; i += chunkSize) {const chunk = array.slice(i, i + chunkSize);dividedArray.push(chunk);}return dividedArray;
}const backendArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
const dividedArray = divideArrayIntoEqualParts(backendArray, 12);

原数据展示:长度为40
在这里插入图片描述

按12一组分割后的数据
在这里插入图片描述
实现代码(vue3+ts):将后台请求的数据state.categoryList赋值给backendArray;12就是你需要每组按多少进行分割

在这里插入图片描述
分割的数据循环遍历展示即可:
在这里插入图片描述
页面展示效果:
在这里插入图片描述

http://www.lryc.cn/news/156670.html

相关文章:

  • 如何有效防止服务器被攻击?
  • layui表格高度
  • 一文1800字从0到1使用Python Flask实战构建Web应用
  • 【LeetCode-中等题】210. 课程表 II
  • vue修饰符的用法
  • 汽车3D HMI图形引擎选择
  • stable diffusion实践操作-webUI教程-不是基础-是特例妙用
  • 【Java】网络编程
  • van-cascader 异步加载
  • Golang单元测试举例
  • 汽车以太网协议栈
  • 数学建模--二次规划型的求解的Python实现
  • Ansible-palybook学习
  • 服务注册与服务发现
  • RabbitMQ从入门到精通之安装、通讯方式详解
  • 植物大战僵尸植物表(二)
  • UML基础
  • C# void 关键字学习
  • OA与CRM与ORACLE
  • 【C++杂货铺】探索list的底层实现
  • NX/UG二次开发—Parasolid—PK_BODY_pick_topols
  • 【校招VIP】前端算法考点之大数据相关
  • Goland2023版新UI的debug模式调试框按钮功能说明
  • 【AIGC专题】Stable Diffusion 从入门到企业级应用0414
  • 汇编原理学习记录:物理地址=段地址*16+偏移地址
  • mysql-2:安装mysql
  • gin框架
  • Laravel 完整开源项目大全
  • Spring MVC @Controller和@RequestMapping注解
  • 软件架构之前后端分离架构服务器端高并发演进之路