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 相关文章推荐
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
浅谈javascript中的闭包
May 13 Javascript
javascript去除空格方法小结
May 21 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
PHP编码规范的深入探讨
2013/06/06 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
javascript实现表单验证
2016/01/29 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
婚礼证婚人证婚词
2014/01/13 职场文书
高二物理教学反思
2014/02/08 职场文书
广告创意求职信
2014/03/17 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
搬迁通知
2015/04/20 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
分享Python异步爬取知乎热榜
2022/04/12 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers