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 清除输入框中的数据
Apr 13 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
Ajax实现页面无刷新留言效果
Mar 24 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
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
Python3.5字符串常用操作实例详解
2019/05/01 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
迟到检讨书500字
2014/02/05 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
刘胡兰观后感
2015/06/16 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
深入详解JS函数的柯里化
2021/06/09 Javascript
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
MySQL GTID复制的具体使用
2022/05/20 MySQL