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 相关文章推荐
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
javascript之Partial Application学习
Jan 10 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
vuex实现的简单购物车功能示例
Feb 13 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
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
一套带网友答案的.NET笔试题
2016/12/06 面试题
新农村建设典型材料
2014/05/31 职场文书
鼓舞士气的口号
2014/06/16 职场文书
党性教育心得体会
2014/09/03 职场文书
幼儿学前班评语
2014/12/29 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python