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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
js事件(Event)知识整理
Oct 11 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
python如何在终端里面显示一张图片
2016/08/17 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python快排算法详解
2019/03/04 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
手机被没收的检讨书
2014/10/04 职场文书
委托书格式要求
2015/01/28 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
好员工观后感
2015/06/17 职场文书
分家协议书范本
2016/03/22 职场文书
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技