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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
javascript的理解及经典案例分析
May 20 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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图片上传类带图片显示
2006/11/25 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
php-app开发接口加密详解
2018/04/18 PHP
使javascript也能包含文件
2006/10/26 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
python 默认参数问题的陷阱
2016/02/29 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
详解flask入门模板引擎
2018/07/18 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
python 多线程中join()的作用
2020/10/29 Python
css3中transition属性详解
2014/09/02 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
教师自我评价范文
2013/12/16 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
优秀教师个人总结
2015/02/11 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
浅谈Python基础之列表那些事儿
2021/05/11 Python
python实现简易自习室座位预约系统
2021/06/30 Python
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python