我记得刚开始折腾那些需要图片展示的玩意儿时，每次碰到“第0张图”这个问题，那叫一个头大。搞得我常常是抓耳挠腮，头发都快被自己薅没了。数据从后台过来，数组下标清清楚楚，都是从0开始算的。可一到前端页面上展示，很多UI组件，或者我自己手写的那些循环逻辑，就老是习惯性地从1开始。结果？不是第一张图显示不出来，就是一张图找不着了，要么就是点“下一张”的时候老是卡壳，总是差一张图没法正常出来。
本站为89游戏官网游戏攻略分站，89游戏每日更新热门游戏，下载请前往主站地址:www.gm89.icu
为什么我非得较真这个“从0开始”？
说起来，那阵子我正好在给村里小学弄一个“光荣榜”的在线展示。好多老照片，从建校到一张张都是珍贵的回忆。校长特别交代我，小王，这些照片每一张都得清清楚楚地展示出来，顺序可不能乱，尤其是第一张，那是我们建校的合影，意义非凡！我当时就想，这事儿必须得办得稳稳当当的，让村里人看个舒心。结果，一开始我就卡在了索引这事儿上。
我清楚地记得有一次，我把所有图片都上传了，也在本地测试了好几遍，看着都挺正常。结果校长一到现场，我给他展示的时候，他一点“开始播放”，发现第一张图总是跳过，直接显示了第二张。校长一看，脸都沉下来了，语气有点重地说：“小王，这第一张照片可是我们建校合影，你可不能给我漏了！这可是最重要的。”当时我脸上火辣辣的，恨不得找个地缝钻进去。从那一刻起，我就下定决心，必须把这个“从0开始”的图片展示逻辑彻底搞明白，不能再出这种低级错误了。
从瞎搞到搞懂，我这几招算是摸索出来了
-
第一次尝试：暴力“加减法”
我最开始的想法就是简单粗暴。既然后台给的数组是从`images[0]`开始，而我前端显示习惯从1开始，那我就在中间做个转换呗。比如，我要显示第N张图，我的代码里就去取`images[N-1]`。反过来，如果用户点的是第1张，我就把它转换成0。结果嘛当然是出了N多个bug。一会儿数组越界了，一会儿多显示一张空白图，一会儿又少显示一张。用户抱怨说怎么有时候图片点着点着就没了，或者突然出现一张空图。那段日子，真是焦头烂额。
-
反思与转变：得从根子上想
后来我才明白，不能老是在表面上打补丁。得从根子上把这个问题想清楚。我不断问自己：到底我的数据源是什么？数据源的索引规则是前端页面需要展示的索引规则又是什么？我发现，绝大部分情况下，编程世界里的数据都是0-based的。既然如此，为什么不统一？
-
核心思路一：前端也统一按照0-based来
我决定，以后前端写逻辑的时候，也一律按照0-based的索引来思考。不管你用的哪个UI库默认是不是从1开始，或者我手写循环，我自己的代码里，永远记住当前是第0张，第1张，第2张……这样就内部就不会乱了。比如，我定义一个变量`currentIndex`，它的值就是0，1，2……当我要展示图片的时候，就直接用`images[currentIndex]`。这样一来，数据和展示的内部逻辑就对齐了。
-
核心思路二：UI展示与数据内部逻辑分离
如果界面上非得给用户显示“第1张/共10张”，那这个“1”就得是从`currentIndex + 1`算出来的，而不是直接拿`currentIndex`来显示。也就是说，给用户看的那一套，可以是1-based的，但我们代码内部跑的逻辑，始终是0-based。比如，我的代码里当前是`images[0]`，那么在UI上显示给用户看的时候，就显示“第1张”。代码里可以这样写：
<span>第 ${currentIndex + 1} 张 / 共 ${*} 张</span> -
操作技巧：“下一张”、“上一张”按钮的边界处理
这个地方最容易出错。点“下一张”按钮的时候，我一般是`currentIndex++`。但是要记得判断是不是已经到头了。如果到了一张，再点下一张，就应该回到第一张（也就是索引0），或者停住。我的做法通常是回到0：
if (currentIndex >= *) currentIndex = 0;点“上一张”按钮的时候，我通常是`currentIndex--`。同样的，也要判断是不是已经到底了。如果到了第一张（索引0），再点上一张，就应该回到一张（索引`* - 1`），或者停住。我的做法是回到一张：
if (currentIndex < 0) currentIndex = * - 1;这个边界判断，我以前老是搞错。比如`*`是总数，有3张图，那`length`就是3。但索引是0，1，2。所以最大的索引是`length - 1`。我老是写成`currentIndex >= * - 1`导致一张图显示不出来，或者`currentIndex > *`导致多点一次就越界。
这么一通折腾下来，我才发现，很多时候遇到的问题不是技术有多难，而是我们自己脑子里没把概念理清楚。从0开始也从1开始也只要自己能统一思想，定好一套规则，并且在整个项目里一直遵守这个规则，就不会有那么多幺蛾子了。现在我再做图片展示，脑子里就特别清晰，知道数据是0-based，我的内部逻辑也是0-based，需要给人看的时候再加1就一点都不慌了。