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 相关文章推荐
单独使用CKFinder选择图片的方法
Aug 21 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
js的回调函数详解
Jan 05 Javascript
使用js画图之饼图
Jan 12 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
微信小程序入门之绘制时钟
Oct 22 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就可用
2010/10/12 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
微信小程序表单弹窗实例
2018/07/19 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
Random 在 Python 中的使用方法
2018/08/09 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python bytes string相互转换过程解析
2020/03/05 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
《埃及的金字塔》教学反思
2014/04/07 职场文书
新闻编辑求职信
2014/04/09 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
2022年显卡天梯图(6月更新)
2022/06/17 数码科技