JavaScript 中的运算操作陷阱

最近做JSP大作业，需要写一个网站，其中用到了分页系统，就自己撸了一个。

其中的翻页逻辑是这样写的：

/*上一页*/
previousPage.click(function(){ 
    clickPage(grids[currentActivePos].find('a').html() - 1);
});
/*下一页*/
nextPage.click(function() { 
    clickPage(grids[currentActivePos].find('a').html() + 1);
});

扔到网页里实验，发现[上一页]功能没有问题，但是点击[下一页]之后没有反应，下边还有一个类似的错误：

grids[i].find('a').html(index + i - 3);

当测试时，index是从.html()方法获取的字面值为3的参数，i是循环控制变量，当i也是3时，出现了gridsp[i]的值变成30而不是3的情况。

一直想不明白这奇怪的现象是因为什么，但问题肯定就出在这句话上，所以就试着把表达式的顺序变了一下，像这样：

grids[i].find('a').html(i - 3 + index);

发现结果变成了03，到这里才明白这结果不是数值而是字符串！也就是index是string类型的，直接用数字和它进行+操作结果不是进行数值运算而是字符串连接！

因而也明白了翻页逻辑的错误在哪里。改动如下：

/*上一页*/
previousPage.click(function(){
    clickPage(grids[currentActivePos].find('a').html() - 1);
});
/*下一页*/
nextPage.click(function() { 
    var des = eval(grids[currentActivePos].find('a').html() + '+ i');
    clickPage(des);
});
/*先进行减法运算，把表达式结果转换成数值类型*/
grids[i].find('a').html(index - 3 + i);

总结：非常傻的一个错误，找到原因之后觉得自己非常基础的东西没有掌握牢固。这一段时间虽然涉及的面不少，但是都没有什么深入，这样就有点像”非科班”的CS学生了，应该警醒。