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

news2024/12/30 4:30:03

前端如何切割数组

目标:前端需要做轮播,一屏展示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.coloradmin.cn/o/970375.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

输出归一化位置式PID(COTRUST完整梯形图代码)

SMART PLC单自由度和双自由度位置式PID的完整源代码,请参看下面文章链接: 位置式PID(S7-200SMART 单自由度、双自由度梯形图源代码)_RXXW_Dor的博客-CSDN博客有关位置型PID和增量型PID的更多详细介绍请参看PID专栏的相关文章,链接如下:SMART PLC增量型PID算法和梯形图代码…

pycharm 下jupyter noteobook显示黑白图片不正常

背景现象&#xff1a; 1、显示一张黑白图片&#xff0c;颜色反过来了。 from IPython.display import display source Image.open(examples/images/forest_pruned.bmp) display(source) 2、原因&#xff1a; 是pycharm会在深色皮肤下默认反转jupyter notebook输出图片的颜…

【python爬虫】13.吃什么不会胖(爬虫实操练习)

文章目录 前言项目实操明确目标分析过程代码实现 前言 吃什么不会胖——这是我前段时间在健身时比较关注的话题。 相信很多人&#xff0c;哪怕不健身&#xff0c;也会和我一样注重饮食的健康&#xff0c;在乎自己每天摄入的食物热量。 不过&#xff0c;生活中应该很少有人会…

【Docker】 08-Dockerfile

什么是Dockerfile Dockerfile可以认为是Docker镜像的描述文件&#xff0c;是由一系列命令和参数构成的教程&#xff0c;主要作用是用来构建docker镜像的构建文件。 Dockerfile解析过程 Dockerfile的保留命令 保留字作用FROM当前镜像是基于哪个镜像的 第一个指令必须是FROMMA…

做一个答题小程序需要多少钱

做一个答题小程序需要多少钱呢&#xff1f;相信这是很多想做答题小程序的小伙伴非常关心的一个问题&#xff0c;那么今天我们就来分析一下做一个影响答题小程序价格的主要功能因素。 答题小程序开发成本的高低很大一部分是由具体的功能需求决定的&#xff0c;比如个人答题模式…

rk3399 linux 5.10 usb 2.0设备上电概率性注册失败

多次开关机&#xff0c;发现usb hub和4G都通信失败了&#xff0c;这就有点奇怪了&#xff0c;按理说usb驱动是没啥问题的 先查看usb log rootlinaro-alip:/# dmesg | grep usb [ 1.723797] usbcore: registered new interface driver usbfs [ 1.723828] usbcore: regis…

苹果平板如何录屏?这个方法亲测有效!

“苹果的平板可以录屏吗&#xff0c;买了个平板拿来上网课&#xff0c;但是老师讲课速度太快了&#xff0c;就想说录下来&#xff0c;可是找不到哪里可以录制&#xff0c;有人知道苹果平板如何录屏吗&#xff1f;” 苹果平板作为一款功能强大的设备&#xff0c;不仅适用于日常…

全网最全MySQL锁全面解析

目录 1. 锁的分类 1.1 从操作类型划分&#xff0c;分为读锁和写锁&#xff1b; 1.2 从锁的粒度划分&#xff0c;分为全局锁&#xff0c;表锁&#xff0c;页锁&#xff0c;行锁&#xff1b; 1.3 从锁的态度划分&#xff0c;分为乐观锁和悲观锁&#xff1b; 2. 读锁和写锁 …

说说JavaScript与DOM之间的关系

dom&#xff08;文档对象模型&#xff09;是JavaScript的一个组成部分&#xff0c;它为JavaScript提供处理网页内容的方法和接口&#xff1b;JavaScript对网页进行的所有操作都是通过DOM进行的。 完整的 JavaScript 是由以下三个部分组成&#xff1a; 核心&#xff08;ECMAScri…

elementui el-table在有summary-method时,table数据行将合计行遮挡住了

前端使用框架&#xff1a;elementUI 使用组件&#xff1a;el-table 在表格内添加合计了合计行&#xff0c;根据业务多次调用数据渲染画面后&#xff0c;偶然导致画面变成如下图所示&#xff0c;table的数据行将合计行遮挡住了&#xff0c;且这个现象有时候好用&#xff0c;有…

界面控件DevExpress .NET应用安全 Web API v23.1亮点:支持Swagger模式

DevExpress拥有.NET开发需要的所有平台控件&#xff0c;包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。 DevExpress 今年第一个重要版本v23.1日前已正式发布了&#xff0c;该版本拥有众多新产品和数十…

AI大模型的使用-深入使用LLMChain,给AI连上Google和计算器

今天涉及的内容如下&#xff0c;下面都会使用例子一一讲解使用&#xff0c; 1.1 utilities&#xff1a;langchain的python解析器 1.2 LLMMathChain&#xff1a;可以处理计算的链&#xff0c;内部用python解释器处理 1.3 LLMRequestsChain&#xff1a;通过一个 HTTP 请求来得…

Flink(java版)

watermark 时间语义和 watermark 注意:数据进入flink的时间&#xff1a;如果用这个作为时间语义就不存在问题&#xff0c;但是开发中往往会用处理时间 作为时间语义这里就需要考虑延时的问题。 如上图&#xff0c;数据从kafka中获取出来&#xff0c;从多个分区中获取&#xf…

DES和3DES等常见加解密的关键要素---安全行业基础篇3

DES和3DES DES和3DES是对称加密算法&#xff0c;其加密和解密的关键要素包括&#xff1a; 密钥&#xff1a;DES和3DES使用相同长度的密钥进行加密和解密。DES使用56位密钥&#xff0c;而3DES可以使用112位或168位密钥。密钥是保护数据安全的关键&#xff0c;必须保持机密并只…

港联证券:为什么人们买涨不买跌?

在股票市场中&#xff0c;有一个普遍的现象是人们倾向于买涨不买跌。即使在市场出现明显下跌趋势时&#xff0c;大部分投资者也会选择继续持有股票或者进行买入操作&#xff0c;而在股票呈现明显上涨趋势时&#xff0c;却有更多的人涌入市场追涨杀跌。究其原因&#xff0c;可能…

微信小程序+Springboot实现订阅消息推送 (demo)

1. 开通订阅消息 2. 选用模板 订阅消息 - 公共模板库 - 选用 3. 选择关键词 勾选关键词 - 最多勾选5个 - 显示例子 4. 我的模板 5. 订阅号开发者-文档: 发送订阅消息 | 微信开放文档 6. 依赖 <dependency><groupId>com.alibaba.fastjson2</groupId><art…

淘宝API接口解析,实现获得淘宝商品快递费用

要获取淘宝商品快递费用&#xff0c;需要使用淘宝的开放平台API接口。以下是一个基本的示例&#xff0c;解析并实现获取淘宝商品快递费用的API接口。 首先&#xff0c;你需要访问淘宝开放平台并注册一个开发者账号。注册完成后&#xff0c;你需要创建一个应用并获取到API的权限…

滑动窗口实例7(串联所有单词的子串)

题目&#xff1a; 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如&#xff0c;如果 words ["ab","cd","ef"]&#xff0c;…

iPhone勿扰模式如何设置?1分钟学会!

上班的时候手机信息一直“噔、噔、噔”的响&#xff0c;开了静音模式也没用&#xff0c;信息一来手机还是会一直震动&#xff0c;搞得我无法安心工作&#xff0c;还有什么方法可以将这些信息免打扰吗&#xff1f; iPhone手机有一个功能叫做【勿扰模式】&#xff0c;它能够帮助用…

多numa设备,如何看网卡插在哪个numa上

1.在Linux系统中&#xff0c;可以通过lstopo命令来查看系统的NUMA拓扑结构。这个命令通常随着hwloc包一起提供。 安装hwloc包&#xff1a;yum install hwloc 使用lstopo命令来显示系统的NUMA拓扑结构。 &#xff08;在bclinux安装后&#xff0c;只有lstopo-no-graphics命令&…