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 相关文章推荐
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 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 文件上传功能实现代码
2009/06/24 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
Python之py2exe打包工具详解
2017/06/14 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
日期和时间问题
2015/01/04 面试题
自我鉴定范文300字
2013/10/01 职场文书
中专毕业生求职简历的自我评价
2013/10/21 职场文书
三年级小学生评语
2014/04/22 职场文书
师范大学生求职信
2014/06/13 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
关于召开会议的通知
2015/04/15 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
Python编程编写完善的命令行工具
2021/09/15 Python