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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
js实现登录与注册界面
Nov 01 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 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把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
python与C互相调用的方法详解
2017/07/14 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python与字符编码问题
2019/05/24 Python
python web框架中实现原生分页
2019/09/08 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
4s店机修工岗位职责
2013/12/20 职场文书
食品销售计划书
2014/04/26 职场文书
《悯农》教学反思
2014/04/28 职场文书
特教教师先进事迹
2014/05/21 职场文书
公司授权委托书样本
2014/09/15 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang