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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 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
递归列出所有文件和目录
2006/10/09 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php实现简单洗牌算法
2013/06/18 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
python三元运算符实现方法
2013/12/17 Python
Python中DJANGO简单测试实例
2015/05/11 Python
PyQt5每天必学之组合框
2018/04/20 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
大学生在校学习的自我评价
2014/02/18 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
初中作文评语大全
2014/04/23 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
通知怎么写?
2019/04/17 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书