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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
JS学习笔记之闭包小案例分析
May 29 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
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的ddos攻击解决方法
2015/01/08 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
开源Web应用框架Django图文教程
2017/03/09 Python
Django web框架使用url path name详解
2019/04/29 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
Tensorflow累加的实现案例
2020/02/05 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
高三毕业典礼主持词
2014/03/27 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
征求意见函
2015/06/05 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python