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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
Vue制作Todo List网页
Apr 26 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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
2006/12/14 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
PHP7 标准库修改
2021/03/09 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
js面向对象的写法
2016/02/19 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python实现超级玛丽游戏
2020/03/18 Python
美国社交购物市场:MassGenie
2019/02/18 全球购物
this关键字的含义
2015/04/08 面试题
一套比较完整的软件测试人员面试题
2012/05/13 面试题
会计学应届毕业生推荐信
2013/11/04 职场文书
村容村貌整治方案
2014/05/21 职场文书