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 相关文章推荐
JavaScript原型继承之基础机制分析
Aug 26 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
Vuex 入门教程
Jan 10 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 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 UTF-8、Unicode和BOM问题
2010/05/18 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
简约控的天堂:The Undone
2016/12/21 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
AOP的定义以及作用
2013/09/08 面试题
会计专业毕业生自荐信范文
2013/12/20 职场文书
公司端午节活动方案
2014/02/04 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android