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事件串连执行多个处理过程的方法
Mar 09 Javascript
JavaScript 指导方针
Apr 05 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
js中判断控件是否存在
Aug 25 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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编写大型网站问题集
2007/03/06 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
import的本质解析
2017/10/30 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Python字符串的修改方法实例
2019/12/19 Python
如何在django中添加日志功能
2020/02/06 Python
Python计算IV值的示例讲解
2020/02/28 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python中os.remove()用法及注意事项
2021/01/31 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
安全生产演讲稿
2014/05/09 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
孔繁森观后感
2015/06/10 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python