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实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
多重?l件?合查?(二)
2006/10/09 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
javascript将非数值转换为数值
2018/09/13 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python扩展内置类型详解
2018/03/26 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Python调用服务接口的实例
2019/01/03 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
python绘制玫瑰的实现代码
2020/03/02 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
院领导写的就业推荐信
2014/03/09 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
会计入职心得体会
2016/01/22 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
在 Python 中利用 Pool 进行多线程
2022/04/24 Python