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几个不错的函数 $$()
Oct 09 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
javascript中数组方法汇总
Jul 07 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
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的header和asp中的redirect比较
2006/10/09 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
Python代码调试的几种方法总结
2015/04/15 Python
Python内置模块logging用法实例分析
2018/02/12 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
通过cmd进入python的步骤
2020/06/16 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
感恩节活动方案
2014/01/27 职场文书
行政助理的岗位职责
2014/02/18 职场文书
增员口号大全
2014/06/18 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书