js删除对象/数组中null、undefined、空对象及空数组方法示例


Posted in Javascript onNovember 14, 2018

这两天在项目中遇到后台需要传的数据为不能有null,不能有空值,而这个数据又是一个庞大的对象,对组集合,所以写了个方法来解决这个问题。为了兼具所有的种类类型,封装了方法,代码如下:

let obj = {
  a: {
   a_1: 'qwe',
   a_2: undefined,
   a_3: function (a, b) {
    return a + b;
   },
   a_4: {
    a_4_1: 'qwe',
    a_4_2: undefined,
    a_4_3: function (a, b) {
     return a + b;
    },
    a_4_4: {
     a_4_4_1: undefined,
     a_4_4_2: undefined,
     a_4_4_3: undefined,
     a_4_4_4: {
      a_4_4_4_1: undefined,
      a_4_4_4_2: undefined,
      a_4_4_4_3: undefined,
      a_4_4_4_4: undefined,
      a_4_4_4_5: undefined,
      a_4_4_4_6: undefined
     }
    }
   }
  },
  b: [{
   a_1: 'qwe',
   a_2: undefined,
   a_3: function (a, b) {
    return a + b;
   },
   a_4: {
    a_4_1: 'qwe',
    a_4_2: undefined,
    a_4_3: function (a, b) {
     return a + b;
    },
    a_4_4: {
     a_4_4_1: undefined,
     a_4_4_2: undefined,
     a_4_4_3: undefined,
     a_4_4_4: {
      a_4_4_4_1: undefined,
      a_4_4_4_2: undefined,
      a_4_4_4_3: undefined,
      a_4_4_4_4: undefined,
      a_4_4_4_5: undefined,
      a_4_4_4_6: undefined
     }
    }
   }
  }],
  c: [{
   a: undefined,
   b: undefined,
   c: undefined,
   d: undefined
  }, {
   a: undefined,
   b: undefined,
   c: undefined,
   d: undefined
  }]
 };

以下是javaScript部分:

//判断对象是否没有属性,如{}或者[]
 function isEmptyObj(o) { for (let attr in o) return !1; return !0 }
 function processArray(arr) {
  for (let i = arr.length - 1; i >= 0; i--) {
   if (arr[i] === null || arr[i] === undefined) arr.splice(i, 1);
   else if (typeof arr[i] == 'object') removeNullItem(arr[i], arr, i);
  }
  return arr.length == 0
 }
 function proccessObject(o) {
  for (let attr in o) {
   if (o[attr] === null || o[attr] === undefined) delete o[attr];
   else if(typeof o[attr]=='object') {
    removeNullItem(o[attr]);
    if (isEmptyObj(o[attr])) delete o[attr];
   }
  }
 }
 function removeNullItem(o,arr,i) {
  let s = ({}).toString.call(o);
  if (s == '[object Array]') {
   if (processArray(o) === true) {//o也是数组,并且删除完子项,从所属数组中删除
    if (arr) arr.splice(i, 1);
   }
  }
  else if (s == '[object Object]') {
   proccessObject(o);
   if (arr&&isEmptyObj(o)) arr.splice(i, 1);
  }
 }
 removeNullItem(obj)
 console.log(obj)

如果只处理对象null,undefined项,不移除数组中undefined,null的项,保持数组长度则去掉removeNullItem,processArray删除数项即可,测试数据在上面示例中

js删除对象/数组中null、undefined、空对象及空数组方法示例

-收缩JavaScript代码

function processArray(arr) {
  for (let i = arr.length - 1; i >= 0; i--) {
   /*if (arr[i] === null || arr[i] === undefined) arr.splice(i, 1);
   else */if (typeof arr[i] == 'object') removeNullItem(arr[i], arr, i);
  }
  return arr.length == 0
 }
 function removeNullItem(o,arr,i) {
  let s = ({}).toString.call(o);
  if (s == '[object Array]') {
   if (processArray(o) === true) {//o也是数组,并且删除完子项,从所属数组中删除
    //if (arr) arr.splice(i, 1);
   }
  }
  else if (s == '[object Object]') {
   proccessObject(o);
   //if (arr&&isEmptyObj(o)) arr.splice(i, 1);
  }
 }

附:javascript 判断变量 是否为空null,undefined, 空数组,空对象,空Object,字符串是否为空或全由空白字符组成,数字是否为0,布尔是否为false。由于Object没有length用

Object.keys()适用于数组(IE8不支持此属性),对象 返回可枚举的实例属性名组成的数组来判断是否为空。

利用逻辑判断中or (||)只要有一项为真则不再计算下一个表达式 来实现不管传入的参数是何种类型。只要符合我对空的定义即返回true。

function IsNothing(e) {
 var isNt = e === 0 || e === false || e === null || e === undefined || Object.keys(e).length === 0 || /^\s*$/gim.test(e.toString());
 return isNt;
 }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
学习vue.js条件渲染
Dec 03 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 #Javascript
Vue源码探究之状态初始化
Nov 14 #Javascript
vue使用laydate时间插件的方法
Nov 14 #Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 #Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 #Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 #Javascript
React和Vue中监听变量变化的方法
Nov 14 #Javascript
You might like
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
Maps Javascript
2007/01/22 Javascript
javascript 打印页面代码
2009/03/24 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
python解析xml模块封装代码
2014/02/07 Python
python使用tkinter实现简单计算器
2018/01/30 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
高三自我鉴定范文
2013/10/19 职场文书
学校节能减排方案
2014/06/13 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL