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.extend函数扩展自己对象的js代码
Dec 09 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
详解uniapp的全局变量实现方式
Jan 11 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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中使用Oracle数据库(5)
2006/10/09 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
Python全局变量操作详解
2015/04/14 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
python解析含有重复key的json方法
2019/01/22 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python PIL模块的基本使用
2020/09/29 Python
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
法制宣传标语集锦
2014/06/25 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书