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 在各个浏览器中执行的耐性
Apr 06 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
AngularJS语法详解
Jan 23 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
Vue底层实现原理总结
Feb 17 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 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生成静态页的实现方法
2013/05/10 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php实现头像上传预览功能
2017/04/27 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
关于uniApp editor微信滑动问题
2021/01/15 Javascript
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python 追踪except信息方式
2020/04/25 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
Java编程面试题
2016/04/04 面试题
创业计划书的主要内容有哪些
2014/01/29 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript