js将一个数组转化成二维数组

最新推荐文章于 2025-05-27 08:24:50 发布

原创最新推荐文章于 2025-05-27 08:24:50 发布 · 3.8k 阅读

4 ·

CC 4.0 BY-SA版权

js/jquery学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种前端轮播图的实现方式，通过将图片数组转换为二维数组，解决图片数量超过四张时的轮播问题。使用自定义的chunk方法，能够更灵活地管理和展示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做公司需求时，前台页面展示轮播图，前端人员给的页面是一个div里包含了4个张图，当多于四张时，进行轮播。

但我从后台获取到图片数据后，想的是拼接div，在div里拼上图，拼接四个后，再创建个div进行拼接。但是这里遇到麻烦了，我遍历图片数组拼接的时候，判断的下标+1除以四等于0的时候，新建div。

结果问题出现了，当有五张图的时候,第五张就不再显示了，思来想去，最后想到可以将数组拆分个二维数组，每个数组里存四个，下面上代码。

Array.prototype.chunk = function (length) {
    //获取要切割的数组的长度
    var length= parseInt(length);
    //如果长度小于要划分的长度，返回原数组
    if (len <= 1 || this.length < length)
        return this;
    var groups = []; 
    //拆分成的二维数组的个数
    var number= Math.ceil(this.length / length);
    //用slice方法，每四个截取一次
    for (var i = 0; i < number; i++)
        groups.push(this.slice(len * i, len * (i + 1)));
    return groups;
}

调用: var newarray = 原数组.chunk(4)；