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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
js实现随机点名功能
Dec 23 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读取javascript设置的cookies的代码
2010/04/12 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
深入php处理整数函数的详解
2013/06/09 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python实现学生成绩管理系统
2020/04/05 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
英文自我鉴定
2013/12/10 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
导游词之西安骊山
2019/12/03 职场文书
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android