写代码时遇到“数组索引超出范围”这种报错，是不是特别熟悉？尤其在处理用户输入、数据列表渲染或者循环遍历时，一不小心就触发了。这个问题看起来简单，但真要彻底避开，得从实际场景里找原因。
一个常见的翻车现场
比如你在做一个电商订单页面，要展示用户的最近五笔交易。代码大概是这样：
let orders = getRecentOrders(userId); // 假设返回的是订单数组
for (let i = 0; i <= 5; i++) {
console.log(orders[i].amount);
}看起来没问题，但万一用户只下了两单呢？那 orders[5] 就是 undefined，再访问 .amount 直接报错——典型的索引越界。
不只是 for 循环的锅
有时候你用 map 或 forEach 遍历数组，觉得肯定安全，可如果中间手动用了固定下标，照样出事。比如：
const names = ['张三', '李四'];
const result = names.map((name, index) => {
return { name: name, partner: names[index + 1] };
});
// 当 index 是 1 时，names[2] 是 undefined
这种写法在处理“相邻元素配对”时很常见，但最后一个元素根本没有下一个，直接越界。
前端表单也容易中招
在 Vue 或 React 里动态渲染表格行时，如果你根据一个 length 属性来生成输入框，但背后的数据没同步更新，删除一行后再去取值，就可能拿到不存在的索引。
比如你有三个输入框对应数组前三项，删掉第二项后数组变成两项，但某个函数还试图读取第三项，结果就是越界。
怎么防？别靠猜，要校验
最简单的办法：访问前先判断是否存在。
if (arr && arr.length > index) {
console.log(arr[index]);
}
或者更现代一点，用可选链：
console.log(arr?.[index]?.value);尤其是在处理接口返回的数据时，永远别假设数组一定有数据。后端说“最多返回10条”，不等于每次都有10条。
调试小技巧
看到报错别慌，先打印数组长度和你要访问的索引值。很多时候你会发现，索引是 3，长度却是 3——数组下标从 0 开始，最大合法索引是 length - 1。
另外，用 for...of 替代传统 for 循环，能少犯这类错误：
for (const item of arr) {
console.log(item);
}不用管索引，自然避免越界。
边界情况多想想
新增、删除、清空操作后，检查所有依赖该数组索引的地方。比如你做了一个轮播图，自动播放到最后一张时，下一步要回到第一张。如果逻辑写成 currentIndex + 1 而没做取余处理，就会访问到不存在的位置。
数组索引超出范围不是大问题，但它暴露的是对数据状态的想当然。代码跑得稳，往往不是因为写得多聪明，而是把边界看得够清楚。