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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
jquery滚动特效集锦
Jun 03 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
vue.js实现只弹一次弹框
Jan 29 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
JS面向对象实现飞机大战
Aug 26 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
详解Vue 方法与事件处理器
2017/06/20 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
Python上传package到Pypi(代码简单)
2016/02/06 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
django2笔记之路由path语法的实现
2019/07/17 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
详解Python 函数参数的拆解
2020/09/02 Python
JNI的定义
2012/11/25 面试题
汽车销售求职自荐信
2013/10/01 职场文书
超市营业员求职简历的自我评价
2013/10/17 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
太行山上观后感
2015/06/05 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
python b站视频下载的五种版本
2021/05/27 Python
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL