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中的console.dir()函数介绍
Dec 29 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
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
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
php实现映射操作实例详解
2019/10/02 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
vue better-scroll插件使用详解
2018/01/25 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
Python实现模拟时钟代码推荐
2015/11/08 Python
python实现百度语音识别api
2018/04/10 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
代理人委托书
2014/08/01 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
MySQL数据库表约束讲解
2022/06/21 MySQL