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使用手册之 事件处理
Mar 24 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 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留言本实例代码
2010/05/09 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
php跨服务器访问方法小结
2015/05/12 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
鼠标图片振动代码
2006/07/06 Javascript
jQuery 位置插件
2008/12/25 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
jQuery事件对象总结
2016/10/17 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
Vue项目中跨域问题解决方案
2018/06/05 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
家长会学生家长演讲稿
2013/12/29 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
建筑安全标语
2014/06/07 职场文书
啦啦队口号大全
2014/06/16 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
项目备案申请报告
2015/05/15 职场文书
安全伴我行主题班会
2015/08/13 职场文书