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操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
js动态创建标签示例代码
Jun 09 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
一文了解Vue中的nextTick
May 06 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
详解JavaScript 作用域
Jul 14 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获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
webpack打包js的方法
2018/03/12 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python性能提升之延迟初始化
2016/12/04 Python
python简易远程控制单线程版
2018/06/20 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python实现批量修改文件名
2020/03/23 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
三项教育活动实施方案
2014/03/30 职场文书
亲属关系公证书
2014/04/08 职场文书
青安岗事迹材料
2014/05/14 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
九年级历史教学反思
2016/02/19 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang