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 相关文章推荐
javascript Select标记中options操作方法集合
Oct 22 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
使用JavaScript破解web
2018/09/28 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
空气环保标语
2014/06/12 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书