Js判断参数(String,Array,Object)是否为undefined或者值为空


Posted in Javascript onNovember 04, 2013

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

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

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

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

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

<SPAN style="BACKGROUND-COLOR: rgb(255,255,255)">if(typeof data === 'number') {
  //deal with numbers
}</SPAN>

但 typeof 返回的类型字符串只有 'object'、'function'、'number'、'boolean'、'string'、'undefined' 这六种,很多原生对象如 Date、RegExp 对象无法与用 {} 创建的对象进行区分。另外,typeof 对于一些基本数据类型如 (String、Number、Boolean) 与其对应的基本包装类型数据会分别返回不同值,如:
<SPAN style="BACKGROUND-COLOR: rgb(255,255,255)">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'</SPAN>

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

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

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

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

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; // 其他对象均视作非空
            }
        };
Javascript 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
浅析return false的正确使用
Nov 04 #Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 #Javascript
js中apply方法的使用详细解析
Nov 04 #Javascript
js数组操作学习总结
Nov 04 #Javascript
Javascript执行效率全面总结
Nov 04 #Javascript
jquery的map与get方法详解
Nov 04 #Javascript
ajax请求get与post的区别总结
Nov 04 #Javascript
You might like
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Python实现多线程抓取妹子图
2015/08/08 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
办公室驾驶员岗位职责
2013/11/15 职场文书
中专毕业生自荐信
2013/11/16 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
体育馆的标语
2014/06/24 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
详解如何使用Nginx解决跨域问题
2022/05/06 Servers