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 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
vue实现全选和反选功能
Aug 31 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
vue实现分页加载效果
Dec 24 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python request设置HTTPS代理代码解析
2018/02/12 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
霸气押韵的班级口号
2014/06/09 职场文书
经济类毕业生求职信
2014/06/26 职场文书
十佳家长事迹材料
2014/08/26 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
楚门的世界观后感
2015/06/03 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS