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 相关文章推荐
广告显示判断
Aug 31 Javascript
JavaScript脚本性能的优化方法
Feb 02 Javascript
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
ppk谈JavaScript style属性
Oct 10 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
vuex存值与取值的实例
Nov 06 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 编程的 5个良好习惯
2009/02/20 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
初识javascript 文档碎片
2010/07/13 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
对Python _取log的几种方式小结
2019/07/25 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
二年级小学生评语
2014/04/21 职场文书
学校花圃的标语
2014/06/18 职场文书
金融与证券专业求职信
2014/06/22 职场文书
领导欢迎词致辞
2015/01/23 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js