循环数组的逻辑怎么写

最新推荐文章于 2021-06-27 22:58:43 发布

原创最新推荐文章于 2021-06-27 22:58:43 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

HTML & JS & DOM & CSS 专栏收录该内容

87 篇文章

订阅专栏

本文将介绍如何使用JavaScript实现Carousel插件，使得图片能够进行循环播放，包括正向和反向循环。通过两种不同的写法演示数据层面的处理逻辑，并探讨代码简洁性与清晰性的权衡。

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

应用场景这样的：

var imgUrls = [
    '1.jpg',
    '2.jpg',
    '3.jpg',
    '4.jpg'
];

现在想做一个Carousel的插件，要求点击某个按钮的时候可以一直循环看图片：
1.jpg, 2,jpg, 3.jpg, 4.jpg,1.jpg,2.jpg....  如此循环下去，反之亦然。。

怎么去做数据层面的处理，怎么判断是否到头了？容易想到的办法是：

var currentIndex = 0;
// show next img
if (currentIndex === imgUrls.length - 1) {
    currentIndex = 0;
}
else {
    currentIndex++;
}


// show previous img
if (currentIndex === 0) {
    currentIndex = imgUrls.length - 1;
}
else {
    currentIndex--;
}

这种写法最直接，逻辑也很清楚，一目了然。不过今天自己在写这段的时候突然脑袋抽了一下，换了一种写法：

var currentIndex = 0;
// show next img
currentIndex = ++currentIndex % imgUrls.length;


// show previous img
currentIndex = (--currentIndex + imgUrls.length) % imgUrls.length;

相比第一种写法，代码简洁了一些，但逻辑却不那么明显清晰了。

这让我想到了那个什么什么不可兼得。。。