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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
详解Node全局变量global模块
Sep 28 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 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中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
JS 判断代码全收集
2009/04/28 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
微信小程序实现左右列表联动
2020/05/19 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python3+PyQt5实现拖放功能
2018/04/24 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python获取txt文件词向量过程详解
2019/07/05 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
宿舍违规检讨书
2014/01/12 职场文书
责任心演讲稿
2014/05/14 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
迟到检讨书
2015/01/26 职场文书
《司马光》教学反思
2016/02/22 职场文书
使用pytorch实现线性回归
2021/04/11 Python