用jQuery的each方法遍历json数据时发生了Uncaught TypeError: Cannot read property ‘变量名‘ of undefined

【前端报错】Uncaught TypeError: Cannot read property’变量名’ of undefined

这是我在做王者荣耀本地储存英雄资料时期发现的问题（大佬走开）

var list = [{
    "title" : '司空震',
    "img" : '//game.gtimg.cn/images/yxzj/img201606/heroimg/537/537.jpg'
},{
    'title' : '澜',
    'img' : '//game.gtimg.cn/images/yxzj/img201606/heroimg/528/528.jpg'
},{
    'title' : '夏洛特',
    'img' : '//game.gtimg.cn/images/yxzj/img201606/heroimg/536/536.jpg'
},{
    'title' : '阿古朵',
    'img' : '//game.gtimg.cn/images/yxzj/img201606/heroimg/533/533.jpg'
},{
    'title' : '蒙恬',
    'img' : '//game.gtimg.cn/images/yxzj/img201606/heroimg/527/527.jpg'
}]......
//共102条数据

本地存储的代码

jQuery入口函数，以下代码都写在这个函数里面。

$(function(){

}）；

        load(); 
        // 读取本地存储的数据
    function getDate(){
        var data = localStorage.getItem("list");
        if(data != null){
            //本地存储里面的数据是字符串格式的，但是我们需要的是对象格式的
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    //保存本地存储数据(再转换为字符串格式)
    function savaDate(data){
        localStorage.setItem("list",JSON.stringify(data));
    }

问题在这串代码中出现了

//渲染加载数据
    function load(){
        //读取本地存储的数据
        var data = getDate();
        //遍历之前先清空
        $("#ul").empty();
        //遍历这个数据
        $.each(data,function(i){
             $("#ul").prepend("<li><a href='javascript:void(0)'><img src=" +list[i].img+ "> "+list[i].title+" </a></li>")
            }
        })
    }

大概意思是没有找到img
于是我找到了一篇博客

发现出现了数组越界的问题，于是我这样修改后

   function load(){
        //读取本地存储的数据
        var data = getDate();
        //遍历之前先清空
        $("#ul").empty();
        //遍历这个数据
        $.each(data,function(i){
        //这样就不会出现数组越界的问题了
             if(i <list.length){
                $("#ul").prepend("<li><a href='javascript:void(0)'><img src=" +list[i].img+ "> "+list[i].title+" </a></li>")
            }
            }
        })
    }

总结：遇到问题先进行调试，console.log(i),与 console.log(list.length)的长度不一样，发生了数组越界的问题。