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 News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
如何提高Dom访问速度
Jan 05 Javascript
原生js实现轮播图
Feb 27 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
js实现盒子滚动动画效果
Aug 09 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调用mysql数据 dbclass类
2011/05/07 PHP
php多重接口的实现方法
2015/06/20 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python OpenCV实现视频分帧
2019/06/01 Python
python加载自定义词典实例
2019/12/06 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
Python configparser模块操作代码实例
2020/06/08 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
后勤自我鉴定
2013/10/13 职场文书
大学生入党自我鉴定
2013/10/31 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
学生感冒英文请假条
2014/02/04 职场文书
小班秋游活动方案
2014/02/22 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
园林技术专业求职信
2014/07/28 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript