Javascript基础_简单比较undefined和null 值


Posted in Javascript onJune 14, 2016

JavaScript 中有两个特数值: undefined和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

以上这篇Javascript基础_简单比较undefined和null 值就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Excel操作知识点
Apr 24 Javascript
jquery 插件学习(一)
Aug 06 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
原生js实现随机点名功能
Nov 05 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
Javascript缓存API
Jun 14 #Javascript
JS修改地址栏参数实例代码
Jun 14 #Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 #Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 #Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 #Javascript
浅析JS获取url中的参数实例代码
Jun 14 #Javascript
Javascript基础_标记文字的实现方法
Jun 14 #Javascript
You might like
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python 文件操作删除某行的实例
2017/09/04 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
劳动模范事迹材料
2014/01/19 职场文书
博士生导师推荐信
2014/07/08 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
初中思想品德教学反思
2016/02/24 职场文书
浅析Python中的套接字编程
2021/06/22 Python
Nginx利用Logrotate实现日志分割
2022/05/20 Servers