http://lync.in/check-empty-value-in-javascript/

有时候我们会遇到这样的情况:在一些前端控件要提交数据到服务器端的数据验证过程中,需要判断提交的数据是否为空。如果是普通表单的字符串数据,只需要在 trim 后判断 length 即可,而这里需要的数据可以是各种不同的类型(数字、字符串、数组、对象等等),通过 JSON.stringify(data) 进行序列化后再传递。

在这里定义如下的数据值为“空值”:

  • undefined
  • null
  • 空字符串及纯空白字符串:''、'    ' 等。
  • 空数组:[]
  • 空对象:{}

对于除此以外的数据值,均认为不为空。

其中 nullundefined 很容易识别,但对于其他类型,我们须要得到其数据类型才能用相应的方法去检测数据是否为空。最容易想到的方法就是利用 typeof 操作符:

JavaScript

1
2
3
if(typeof data === 'number') {
//deal with numbers
}

typeof 返回的类型字符串只有 'object'、'function'、'number'、'boolean'、'string'、'undefined' 这六种,很多原生对象如 Date、RegExp 对象无法与用 {} 创建的对象进行区分。另外,typeof 对于一些基本数据类型如 (String、Number、Boolean) 与其对应的基本包装类型数据会分别返回不同值,如:

JavaScript

1
2
3
4
5
6
console.log(typeof false); //'boolean'
console.log(typeof new Boolean(false)); //'object'
console.log(typeof 1); //'number'
console.log(typeof new Number(1)); //'object'
console.log(typeof ''); //'string'
console.log(typeof new String('')); //'object'

这对我们的判断也有一定的影响。

instanceof?这只能判断对象,而且存在多 frame 时多个同类对象不共享 prototype 的问题,从其他 frame 中取得的对象无法正确判断。

还好,还有一个最简单也最可靠的方法:Object.prototype.toString。对于不同类型的数据,这个方法可以返回 '[object Object]'、'[object Array]'、'[object String]' 这样的字符串,非常方便判断。需要注意的是,在 IE8 及其以下浏览器中,这个方法对于 nullundefinedwindow 等都会返回 '[object Object]',不过还好,这并不影响我们使用它判断空对象。

下面直接上代码,说明就看注释吧。

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// with jQuery
var isEmptyValue = function(value) {
var type;
if(value == null) { // 等同于 value === undefined || value === null
return true;
}
type = Object.prototype.toString.call(value).slice(8, -1);
switch(type) {
case 'String':
return !$.trim(value);
case 'Array':
return !value.length;
case 'Object':
return $.isEmptyObject(value); // 普通对象使用 for...in 判断,有 key 即为 false
default:
return false; // 其他对象均视作非空
}
};

对于不同 value 值,我做了个测试,看看对于不同值分别取 Object.prototype.toStringtypeofisEmpty 的结果。测试结果可以到下面这个地址围观:
http://jsfiddle.net/Justineo/hFKRt/

除了 IE8 及其以下浏览器外,其他浏览器结果基本一致,下面就贴下主要的 2 种结果吧。下图为 Firefox 下的结果,而在 Chrome 下,window 字符串化后的结果是 'object global',和 Firefox 下稍有不同,但在判断空值时问题不大。

Firefox 下的结果

IE8 及以下唯一会误判的是 alert,不过这对于数据验证来说应该也可以接受。

IE8 及以下的结果

[转载]在 JavaScript 中判断“空值”的更多相关文章

  1. Javascript中判断数组的正确姿势

    在 Javascript 中,如何判断一个变量是否是数组? 最好的方式是用 ES5 提供的 Array.isArray() 方法(毕竟原生的才是最屌的): var a = [0, 1, 2]; con ...

  2. JavaScript中判断为整数的多种方式

    之前记录过JavaScript中判断为数字类型的多种方式,这篇看看如何判断为整数类型(Integer). JavaScript中不区分整数和浮点数,所有数字内部都采用64位浮点格式表示,和Java的d ...

  3. Java与JavaScript中判断两字符串是否相等的区别

    JavaScript是一种常用的脚本语言,这也决定了其相对于其他编程语言显得并不是很规范.在JavaScript中判断两字符串是否相等 直接用==,这与C++里的String类一样.而Java里的等号 ...

  4. JavaScript中判断整字类型最简洁的实现方法

    这篇文章主要介绍了JavaScript中判断整字类型最简洁的实现方法,本文给出多个判断整数的方法,最后总结出一个最短.最简洁的实现方法,需要的朋友可以参考下 我们知道JavaScript提供了type ...

  5. JavaScript中判断变量类型最简洁的实现方法以及自动类型转换(#################################)

    这篇文章主要介绍了JavaScript中判断整字类型最简洁的实现方法,本文给出多个判断整数的方法,最后总结出一个最短.最简洁的实现方法,需要的朋友可以参考下 我们知道JavaScript提供了type ...

  6. JavaScript中判断对象是否属于Array类型的4种方法及其背后的原理与局限性

    前言 毫无疑问,Array.isArray是现如今JavaScript中判断对象是否属于Array类型的首选,但是我认为了解本文其余的方法及其背后的原理与局限性也是很有必要的,因为在JavaScrip ...

  7. JavaScript中判断对象类型的种种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  8. javaScript中的空值和假值

    javaScript中有五种空值和假值,分别为false,null,undefined,"",0.从广义上来说,这五个值都是对应数据类型的无效值或空值. 这五个值的共同点是在执行i ...

  9. Javascript 中判断对象为空

    发现了一个巧妙的实现: 需要检查一个对象(Object)是否为空,即不包含任何元素.Javascript 中的对象就是一个字典,其中包含了一系列的键值对(Key Value Pair).检查一个对象是 ...

随机推荐

  1. 体验应用程序在Mac/iPhone/iPad之间的Handoff

    对于苹果新推出的Handoff功能,之前只体验了接电话的Handoff.一个电话打过来,iPhone/iPad/Mac同时响起,这时如果手上拿着东西在吃,就可以直接在Mac上接电话. 除此之外,还可以 ...

  2. SqlServer=>MySql

    原文:http://www.cnblogs.com/andrew-blog/archive/2011/12/03/SQL_mss2sql.html#3242272 工具:http://files.cn ...

  3. 转:DataSet、DataTable、DataRow、DataColumn区别及使用实例

    DataSet 表示数据在内存中的缓存. 属性 Tables  获取包含在 DataSet 中的表的集合. ds.Tables["sjxx"] DataTable 表示内存中数据的 ...

  4. 基于Qt的流程设计器(一)

    一: 先来看一下界面的截图:   说明: 拖动节点的时候,与该节点相关的箭头连线也会跟着调整: 用户可以使用鼠标从一个节点拖出一个箭头到另一个节点(鼠标在空白区域点击一下,拖出的箭头消失)   这三个 ...

  5. HBase中MVCC的实现机制及应用情况

    MVCC(Multi-Version Concurrent Control),即多版本并发控制协议,广泛使用于数据库系统.本文将介绍HBase中对于MVCC的实现及应用情况. MVCC基本原理 在介绍 ...

  6. 用Redis打造URL缩短服务

    此文章的英文版本已首发于 CodeProject : Building a simple URL shorten service with Redis 阅读文章之前,我建议你先下载源码,一边看文章,一 ...

  7. nginx.conf文件说明

    #Nginx所有用户和组,window下不指定 #user nobody; #工作的子进程数量(通常等于CPU数量或者2倍于CPU) worker_processes 1; #错误日志存放路径 #er ...

  8. 1121 if条件语句练习--输入年月日判断执行

    <script type="text/javascript"> var a=prompt("请输入一个年","请输入年份"); ...

  9. 【系统移植】Android系统移植

    $ . .. Device     . SimulatorWhich would you like] Build type choices are. release     . debugWhich ...

  10. Quartz 框架的应用

    本文将简单介绍在没有 Spring 的时候..如何来使用 Quartz... 这里跳过 Quartz 的其他介绍.如果想更加输入的了解 Quartz,大家可以点击下载Quartz的帮助文档. Quar ...