Uncaught TypeError: Cannot read property 'length' of null

最新推荐文章于 2024-05-31 17:40:50 发布

小白逆流而上

最新推荐文章于 2024-05-31 17:40:50 发布

阅读量1.6w

点赞数 4

分类专栏：前端文章标签： JS报错

本文链接：https://blog.csdn.net/baidu_39298625/article/details/102689502

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端页面不显示，console中报错：Uncaught TypeError: Cannot read property 'length' of null

代码如下：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试界面</title>
</head>
<body>
    <p>如果不出意外，下边会显示人员的电话格式是否正确。</p>
	<div id = "temp">    
  </div>
  <script>
    var data = [
        {
            "name" : "张三",
            "sex" : "男",
            "telephone" : "12537487989999"
        },{
            "name" : "李四",
            "sex" : "女",
            "telephone" : null
        },{
            "name" : "王五",
            "sex" : "女",
            "telephone" : "16483927649"
        }
    ]
    var outStr = "";
    for(var i = 0;i<data.length;i++){
        if(data[i].telephone.length != 11){
            outStr = outStr + data[i].name + "电话号码格式错误!";
        }else{
            outStr = outStr + data[i].name + "电话号码格式正确!";
        }
    }
    $('#temp').html(outStr);
  </script>
</body>
</html>

这是因为length属性不能测null的长度，因为null本意就是什么都不是，更没有length属性，所以会报错，因此在你不确定某个字段是否可能为null（尤其是调用别人的接口，返回值不确定），但你还需要使用length属性判断这个字段长度，你最好在使用length属性之外加一层判断，排除字段为null的情况。

修改后代码如下：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试界面</title>
</head>
<body>
    <p>如果不出意外，下边会显示人员的电话格式是否正确。</p>
	<div id = "temp">    
  </div>
  <script>
    var data = [
        {
            "name" : "张三",
            "sex" : "男",
            "telephone" : "12537487989999"
        },{
            "name" : "李四",
            "sex" : "女",
            "telephone" : null
        },{
            "name" : "王五",
            "sex" : "女",
            "telephone" : "16483927649"
        }
    ]
    var outStr = "";
    for(var i = 0;i<data.length;i++){
        if(data[i].telephone != null){
            if(data[i].telephone.length != 11){
                outStr = outStr + data[i].name + "电话号码格式错误!";
            }else{
                outStr = outStr + data[i].name + "电话号码格式正确!";
            }
        }else{
            outStr = outStr + data[i].name + "电话号码为null!";
        }
    }
    $('#temp').html(outStr);
  </script>
</body>
</html>

运行结果如下：

小白逆流而上

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Uncaught TypeError: Cannot read property 'length' of null

前端页面不显示，console中报错：Uncaught TypeError: Cannot read property 'length' of null代码如下：<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!DOCTYPE html&gt...
复制链接

扫一扫