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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
js数组实现权重概率分配
Sep 12 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
原生JavaScript实现刮刮乐
Sep 29 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函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
[JS]点出统计器
2020/10/11 Javascript
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python使用正则筛选信用卡
2019/01/27 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
python用for循环求和的方法总结
2019/07/08 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
七一党日活动总结
2014/07/08 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android