解数独小插曲之Uncaught TypeError: Cannot read property '2' of undefined

周末玩数独玩到脑力枯竭,就想着写个小程序自动解数独开心一把,考虑可视化界面,用HTML+CSS+JavaScript实现,本想着逻辑很简单,早早写完睡觉,然而没想到被一个bug玩到疯,js代码如下:

var shuDu=[//初始数组
		['3','','2','7','','','','','9'],
		['','','8','','','','','4','5'],
		['','','4','','','1','3','',''],
		['','','','','5','9','','',''],
		['','9','','','3','','','6',''],
		['','','','2','6','','','',''],
		['','','1','4','','','2','',''],
		['2','6','','','','','1','',''],
		['4','','','','','2','5','','3']
		];
function check(row,col,s){//检查本行、本列及本九宫格有无重复
	for(var i=0;i<9;i++){
		if(shuDu[i][col]!=0&&shuDu[i][col]==s){
			return false;
		}
		if(shuDu[row][i]!=0&&shuDu[row][i]==s){
			return false;
		}
		if(shuDu[3*(row/3)+(i/3)][3*(col/3)+i%3]!=0&&shuDu[3*(row/3)+(i/3)][3*(col/3)+i%3]==s){
			return false;
		}
	}
	return true;
}
function solve(){//遍历解数独
	for(var i=0;i<9;i++){
		for(var j=0;j<9;j++){
			if(shuDu[i][j]==0){
				for(var k=1;k<=9;k++){
					if(check(i,j,k)){
						shuDu[i][j]=k;
						if(solve()){
							return true;
						}else{
							shuDu[i][j]=0;
						}
					}
				}
				return false;
			}
		}
	}
	return true;
}
function setShuDu(){//界面显示
	var str="<table id='t1'>";
	for(var i=0;i<9;i++){
		str+="<tr id='tr"+(i+1)+"'>";
		for(var j=0;j<9;j++){
			if(j==2||j==5){
				str+="<td id='td"+(i+1)+(j+1)+"' class='td1'>"+shuDu[i][j]+"</td>";
			}else{
				str+="<td id='td"+(i+1)+(j+1)+"'>"+shuDu[i][j]+"</td>";
			}	
		}
		str+="</tr>";
	}
	str+="</table>";
	document.getElementById("d2").innerHTML=str;//解之前
	solve();
	var str="<table id='t2'>";
	for(var i=0;i<9;i++){
		str+="<tr id='tr"+(i+1)+"'>";
		for(var j=0;j<9;j++){
			if(j==2||j==5){
				str+="<td id='td"+(i+1)+(j+1)+"' class='td1'>"+shuDu[i][j]+"</td>";
			}else{
				str+="<td id='td"+(i+1)+(j+1)+"'>"+shuDu[i][j]+"</td>";
			}	
		}
		str+="</tr>";
	}
	str+="</table>";
	document.getElementById("d3").innerHTML=str;//解之后
}

网页一打开,解数独后的界面一直不显示,检查发现console报错:Uncaught TypeError: Cannot read property ‘2’ of undefined,截图如下:
在这里插入图片描述
针对这个错误,我的调试思路及过程如下:
1.网页打断点debug,发现在下图位置,程序跳出报错;
在这里插入图片描述
2.心算及笔算捋逻辑,无误;
3.把这几个方法改写在java里运行,正常。
经过上述测试,方法逻辑应该是没问题的,一定是发生了我没意识到的什么错误,于是在我火辣的目光下来回扫视思索了十来分钟,终于恍然大悟:js里的数据类型没有int,整数浮点统归number,所以5/2=2.5,而不是java中的2
修改代码用Math.floor,界面总算显示正常,修改后代码及成品图如下。至此,问题解决。

function check(row,col,s){
	for(var i=0;i<9;i++){
		if(shuDu[i][col]!=0&&shuDu[i][col]==s){
			return false;
		}
		if(shuDu[row][i]!=0&&shuDu[row][i]==s){
			return false;
		}
//修改的部分
		if(shuDu[3*Math.floor(row/3)+Math.floor(i/3)][3*Math.floor(col/3)+i%3]!=0&&shuDu[3*Math.floor(row/3)+Math.floor(i/3)][3*Math.floor(col/3)+i%3]==s){
			return false;
		}
	}
	return true;
}

在这里插入图片描述
PS:在此分享错误代码共勉,从java出来写js还是要多多注意,这些思维交叉盲点的小错误着实要命!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值