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 相关文章推荐
js操作label给label赋值及取label的值示例
Nov 07 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
javascript prototype 原型链
2009/03/12 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Python实现登录接口的示例代码
2017/07/21 Python
python随机取list中的元素方法
2018/04/08 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
房屋租赁合同协议书范本
2014/10/19 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
Python学习之时间包使用教程详解
2022/03/21 Python
Docker安装MySql8并远程访问的实现
2022/07/07 Servers