前端很容易遇到的一个大坑

避坑指南:在对一个对象取属性的时候(特别是对数组length属性时),写代码前的第一步是保证该对象不为null或者undefined,确认对象为“真”的情况下再做取对应属性值的操作。

前端开发时,我们经常会通过.操作符来获取属性值,这里有个坑很容易产生bug,特别是对数组length属性时,一不小心可能就会造成JS执行出错(这里先保密,后面具体说)导致页面崩溃

举个例子,比如后端接口返回数据中的data字段类型为数组,我们对该数组遍历进行一些处理的常用方式:

for(let i = 0; i < data.length; i++) {
	// doSomething...
}

以上代码在后端正常返回数组的情况下一点问题都没有。

但是,后端返回data为null时,JS执行相关代码时就会报错了:Uncaught TypeError: Cannot read property 'length' of null,页面直接白屏。这种错误在测试的时候很容易遗漏,从而导致线上bug产生。

所以,在工作中,我们在对一个对象取属性的时候,我们一定要注意:首要处理是保证该对象不为null或者undefined,确认对象为真的情况下再取对应的属性。 如下:

// 或者 if(data){ ... },保证data为“真值”,再进行下一步处理
if(Array.isArray(data)) {
	const len = data.length
	//doSomething...
}

这种类型的bug也给了我们一个警示:我们前端一定要有防御性编程的思维,后端定义的字段我们不能100%去信任它,而是要做好充分的错误和异常处理,这样就可以避免很多潜在的bug,提高我们前端代码的健壮性。

现实没我们预设的那么完美,其实80%的代码量都用在异常处理上了。

展开阅读全文

html页面出现undefined如何解决

05-30
先粘代码 ``` <!DOCTYPE html> <html> <head> <title>System</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> <script> function findAllStudent() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { obj = JSON.parse(this.responseText); var str =""; for(i = 0; i < obj.length; i++){ str += "<tr><td>"+obj[i].ID+"</td><td>"+obj[i].name+"</td><td>"+obj[i].course+"</td><td>"+obj[i].grade+"</td></tr>"; }; document.getElementById("mesContent").innerHTML = str; } }; xmlhttp.open("GET", "/admin/getAllStudent.do", true); xmlhttp.send(); } </script> </head> <style type="text/css"> .left-side{ float:left;width:20%;height:165px;border:2px solid black} .content-side{ float:left;width:76%;height:500px;border:2px solid black;margin-left: 4px;} .form-control{width: 180px} .nav-item{width:100%} </style> <body> <div class="container-fluid"> <div class="left-side"> <!-- Nav pills --> <ul class="nav nav-pills" role="tablist" style="background-color:#99CCFF"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#read">浏览</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#create">创建</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#update">更新</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#delete">删除</a> </li> </ul> </div> <div class="content-side" style="background-color:#99CCFF"> <!-- Tab panes --> <div class="tab-content"> <div id="read" class="container-fluid tab-pane active"><br> <h3>浏览</h3> <div > <table class="table table-bordered" style="background-color:#FFFFFF"> <thead> <tr> <th>ID</th> <th>name</th> <th>course</th> <th>grade</th> </tr> </thead> <tbody id="mesContent"> </tbody> </table> </div> <button type="button" onclick="findAllStudent()" class="btn btn-primary">request</button> </div> <div id="create" class="container-fluid tab-pane fade"><br> <h3>创建</h3> <form action="/admin/addStudent.do" method="post"> <div class="form-group"> <label for="ID">ID:</label> <input type="text" class="form-control" id="ID" name="ID" value ="123"> </div> <div class="form-group"> <label for="name">name:</label> <input type="text" class="form-control" id="name" name="name" value ="123"> </div> <div class="form-group"> <label for="course">course:</label> <input type="text" class="form-control" id="course" name="course" value ="123"> </div> <div class="form-group"> <label for="grade">grade:</label> <input type="text" class="form-control" id="grade" name="grade" value ="123"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div id="update" class="container-fluid tab-pane fade"><br> <h3>更新</h3> <form action="/admin/updateStudent.do" method="post"> <div class="form-group"> <label for="ID">ID: (this ID must exist in database)</label> <input type="text" class="form-control" id="ID" name="ID" value ="123"> </div> <div class="form-group"> <label for="name">name:</label> <input type="text" class="form-control" id="name" name="name" value ="456"> </div> <div class="form-group"> <label for="course">course:</label> <input type="text" class="form-control" id="course" name="course" value ="456"> </div> <div class="form-group"> <label for="grade">grade:</label> <input type="text" class="form-control" id="grade" name="grade" value ="456"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div id="delete" class="container-fluid tab-pane fade"><br> <h3>删除</h3> <form action="/admin/deleteStudent.do" method="post"> <div class="form-group"> <label for="ID">ID: (this ID must exist in database)</label> <input type="text" class="form-control" id="ID" name="ID" value ="123"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201905/30/1559203986_932867.png) 显示如图,求解求解啊!!!!!
©️2020 CSDN 皮肤主题: 代码科技 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值