Javascript基础教程之比较null和undefined值


Posted in Javascript onMay 16, 2016

JavaScript 中有两个特数值: undefined和null,在比较它们的时候需要留心。在读取未赋值的变量或试图读取对象没有的属性时得到的就是 undefined 值。

Javascript基础教程之比较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

以上内容是小编给大家介绍的js基础教程之比较null和undefined值的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
jQuery 获取URL参数的插件
Mar 04 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
vue系列之动态路由详解【原创】
Sep 10 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
js事件触发操作实例分析
Jun 21 Javascript
js实现自动锁屏功能
Jun 02 Javascript
javascript对象的相关操作小结
May 16 #Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 #Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 #Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 #Javascript
Bootstrap所支持的表单控件实例详解
May 16 #Javascript
移动端横屏的JS代码(beta)
May 16 #Javascript
js实现带农历和八字等信息的日历特效
May 16 #Javascript
You might like
php学习笔记之 函数声明
2011/06/09 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
php适配器模式介绍
2012/08/14 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
js实现楼层导航功能
2017/02/23 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
js实现无缝轮播图
2020/03/09 Javascript
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
python实现数字炸弹游戏
2020/07/17 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
项目经理任命书范本
2014/06/05 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis