jQuery.each外部声明变量在循环体内后续迭代变为undefined的问题

嘿，我一眼就瞅出问题所在了——你踩中了JavaScript变量提升的坑！

你在jQuery.each外面已经声明了var cname = '';，但在循环里第二个if判断里又写了var cname = data['cname'];。由于var的变量提升特性，这个内部的cname声明会被悄悄提升到当前回调函数作用域的最顶部，但赋值操作还是留在原来的位置。这就导致，当进入第1、2、3...次迭代时，函数内的cname会直接覆盖掉外部的那个变量，而它在被赋值前是undefined，所以你才会看到那个报错。

修复起来很简单，把第二个if里的var删掉就行，直接复用外部已经声明好的变量：

var cname= '';
jQuery.each(candidate_arr['data'], function(index, data){
    if(index == 0){
        jQuery('.list').append('<li class="cname">'+ data['cname'] +'</li>');
        cname= data['cname'];
    }
    if(cname != data['cname']){
        jQuery('.list').append('<li class="cname">'+ data['cname'] +'</li>');
        // 去掉var，直接给外部的cname赋值
        cname = data['cname'];
    }
    jQuery('.list').append('<li>'+ data['candidate_name'] +'</li>');
})

额外提个小建议：如果你的项目环境支持ES6+，推荐用let代替var来声明变量，let是块级作用域，能从根源上避免这类变量提升导致的诡异问题。比如把外部的var cname = ''改成let cname = ''，这样要是你不小心在内部又写了let cname，浏览器会直接抛出报错，更容易排查问题。

内容的提问来源于stack exchange，提问作者Sanjay Goswami