将一维数组转化为二维数组

2018-08-09 admin

在做banner轮播的时候,一个页面需要放很多选项,每个选项对应一个icon和一个title,可是这些选项数据(后台传过来)是放在一个一维数组里面的,我们再在用vue-awesome-swiper 做轮播的时候,需要分很多页,一页里放很多项,例如下图所,我们这里只显示一页。图片描述

那我们怎么实现一维数组的数据分为很多页,每页数据再循环实现轮播呢?我们可以把后台传过来的数据转换为二维数组,二次循环实现,见代码

var list = [1,2,3,4,5,6,7,8,9,10];
function pages (list) {
    const  pages = []
    list.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
    });
  return pages
}
var arr = pages(list);
console.log(arr);

结果为:[1,2,3,4,5,6,7,8]

原文链接:https://segmentfault.com/a/1190000015949662

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37646.html

文章标题:将一维数组转化为二维数组

相关文章
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
H5即将迎来黄金时代 轻应用再成行业焦点
鎽樿�侊細浠庣伀閫熻交搴旂敤鑾峰緱鎶曡祫绛変腑涓嶉毦鐪嬪嚭锛孒TML5鍗冲皢杩庢潵榛勯噾鏃朵唬銆傝秺鏉ヨ秺澶氱殑浼佷笟鎴栧垱涓氳€呭紑濮嬫秹瓒矵5锛岃�╄交搴旂敤鍐嶆�℃垚涓鸿�屼笟鐨勭劍鐐癸紝鎺ヤ笅鏉ュ皢鏈夋洿澶欻5寮曟搸浠ュ強鏇村�欻5...
2015-11-12
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
何为闭包?有关JS闭包的一些理解
简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就...
2015-11-11
jQuery的一些技巧大放送
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与d...
2015-11-11
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
Node.js将向移动端扩展
如果你还没有听过Node.js,那么现在就可以了解一下! 目前,来自200多个国家的数以万计的组织在使用Node.js,在Node.js的网站上,每月都有超过200万次下载。但版本发布缓慢使开发人员日益不满,网上出现了创建Node.js分支...
2015-11-12
freemarker判断对象是否为空的方法
FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等。 freemarker中显示某对象使用${name}. 但如果nam...
2017-03-27
为什么AngularJS能够成功?
AngularJS 为什么成功了? 写在前面的话 继上一篇总结之后, 觉得必须补充一下 AngularJS 与 Ionic 的技术性话题 于是, 连夜写了这第一篇. 讲述了 AngularJS 与其他对手之间的优与缺. 我有任何理解错误, ...
2015-11-12
Windows Server 2003将于7月14日停服
腾讯数码讯(文心)据PCWorld网站报道,微软的Windows Server 2003操作系统将很快重蹈Windows XP停服的覆辙,对于迟迟没有升级到新版本服务器操作系统的IT主管来说,这确实是个坏消息。 微软将于7月14日叫停对W...
2015-11-12
回到顶部