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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
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 socket实现的聊天室代码分享
2014/08/16 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
基于javascript实现碰撞检测
2020/03/12 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
python中list常用操作实例详解
2015/06/03 Python
python之PyMongo使用总结
2017/05/26 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python2与Python3的区别实例分析
2019/04/11 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
JNI的定义
2012/11/25 面试题
包装类的功能、种类、常用方法
2012/01/27 面试题
信息科学与技术专业求职信范文
2014/02/20 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
大学生个人求职信
2014/06/02 职场文书
职务任命书范本
2014/06/05 职场文书
颐和园导游词400字
2015/01/30 职场文书
珍爱生命主题班会
2015/08/13 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
详解Python常用的魔法方法
2021/06/03 Python
python 远程执行命令的详细代码
2022/02/15 Python
Golang实现可重入锁的示例代码
2022/05/25 Golang