Javascript基础_简单比较undefined和null 值


Posted in Javascript onJune 14, 2016

JavaScript 中有两个特数值: undefined和null,在比较它们的时候需要留心。在读取未赋值的变量或试图读取对象没有的属性时得到的就是 undefined 值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var myData = {
    name:"Luka",
    weather:"sunny"
  };
  document.writeln("Prop: "+myData.doesntexits);
</script>
</body>
</html>

输出结果:

Prop: undefined

Javascript 又定义了一个特殊值 null ,这个值与 undefined 略有不同。后者是在未定义值得情况下得到的值,而前者则用于表示已经赋了一个值但该值不是一个有效的 object、string、number 或 boolean 值(也就是说所定义的是一个无值[no value])。

下面代码先后使用 undefined 和 null 以展示其不同效果:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var myData = {
    name:"Luka"
  };
  //读取 weather 属性
  document.writeln("Var: "+myData.weather+"<br />");
  //判断对象是否具有 weather 这个属性
  document.writeln("Prop: "+("weather" in myData)+"<br /><br />");

  myData.weather = "sunny";
  document.writeln("Var: "+myData.weather+"<br />");
  document.writeln("Prop: "+("weather" in myData)+"<br /><br />");

  myData.weather = null;
  document.writeln("Var: "+myData.weather+"<br />");
  document.writeln("Prop: "+("weather" in myData)+"<br /><br />");
</script>
</body>
</html>

输出结果:

Var: undefined
Prop: false

Var: sunny
Prop: true

Var: null
Prop: true

1. 检查变量或属性是否为undefined 或 null

如果想检查某属性是否为 null 或 undefined(不管是哪一个),那么只要使用 if 语句和逻辑非运算符(!)即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var myData = {
    name:"Luka",
    city:null
  };

  if(!myData.name){
    document.writeln("name is null or undefined <br /><br />");
  }else {
    document.writeln("name is not null or undefined <br /><br />")
  }

  if(!myData.city){
    document.writeln("city is null or undefined <br /><br />");
  }else {
    document.writeln("city is not null or undefined <br /><br />")
  }

  if(!myData.weather){
    document.writeln("weather is null or undefined <br /><br />");
  }else {
    document.writeln("weather is not null or undefined <br /><br />")
  }

</script>
</body>
</html>

输出结果:

name is not null or undefined

city is null or undefined

weather is null or undefined

2. 区分 null 和 undefined

在比较两个值时,所用办法应视需要而定。如果想同等对待 undefined值和null值,那么应该使用相等运算符(==),让 Javascript 进行类型转换。此时值为 undefined 的变量会被认为与值为 null 的变量相等。如果要区分 null 和 undefined,则应使用等同运算符(===)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var firstVal = null;
  var secondVal;

  var equality = firstVal == secondVal;
  var identity = firstVal === secondVal;

  document.writeln("Equality: "+equality+" <br />");
  document.writeln("Identity: "+identity+" <br />");
</script>
</body>
</html>

输出结果:

Equality: true
Identity: false

以上这篇Javascript基础_简单比较undefined和null 值就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js控制的遮罩层实例介绍
May 29 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
JavaScript模拟push
Mar 06 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
Javascript缓存API
Jun 14 #Javascript
JS修改地址栏参数实例代码
Jun 14 #Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 #Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 #Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 #Javascript
浅析JS获取url中的参数实例代码
Jun 14 #Javascript
Javascript基础_标记文字的实现方法
Jun 14 #Javascript
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
一个显示天气预报的程序
2006/10/09 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
js制作提示框插件
2020/12/24 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
python如何对实例属性进行类型检查
2018/03/20 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
个人年终总结开头
2015/03/06 职场文书
格林童话读书笔记
2015/06/30 职场文书
尊师重教主题班会
2015/08/14 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
详解Golang如何优雅的终止一个服务
2022/03/21 Golang