[转载]在 JavaScript 中判断“空值”

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

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

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

  • 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'

这对咱们的判断也有必定的影响。app

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

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

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

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

Firefox 下的结果

IE8 及如下惟一会误判的是 alert,不过这对于数据验证来讲应该也能够接受。

IE8-

IE8 及如下的结果

相关文章
相关标签/搜索