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的插件教程(Plugin)
Sep 03 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
简单实现JS计算器功能
Dec 21 Javascript
原生js轮播特效
May 18 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
VUE长按事件需求详解
Oct 18 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
vue-model实现简易计算器
Aug 17 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
python openpyxl使用方法详解
2019/07/18 Python
django的ORM操作 增加和查询
2019/07/26 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python包和模块的分发详细介绍
2020/06/19 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
公司JAVA开发面试题
2015/04/02 面试题
欢送退休感言
2014/02/08 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
辞职信怎么写
2015/02/27 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书