当前位置:首页 » 《随便一记》 » 正文

js删除对象/数组中null、undefined、空对象及空数组方法示例

16 人参与  2023年04月11日 13:19  分类 : 《随便一记》  评论

点击全文阅读


如下,对于一个多层嵌套的数据结构:例如

要做的就是删除所有value为空,数组为空,对象为空的字段

const querys = {  name: '测试',  httpMethod: '',  httpHeaders: [    {      key: 'Accept',      value: 'test',    },  ],  restParams: [    {      key: '',      value: '',    },  ],  body: {    bodyType: '',    formDataList: [      {        contentType: '',        key: '',        value: '',      },    ],  },  microtask: {    bodyType: 'javascript',    formDataList: [      {        key: '2',        value: '4',      },    ],  },};

通过处理,希望得到 以下结构:

{  name: '测试',  httpHeaders: [    {      key: 'Accept',      value: 'test',    },  ],  microtask: {    bodyType: 'javascript',    formDataList: [      {        key: '2',        value: '4',      },    ],  },}

第一:过滤各种空数据的字段,比如,string、null、undefined、[]、{}

使用这个方法:(注意调用两遍)

export const delEmptyQueryNodes = (obj = {}) => {  Object.keys(obj).forEach((key) => {    let value = obj[key];    value && typeof value === 'object' && delEmptyQueryNodes(value);    (value === '' || value === null || value === undefined || value.length === 0 || Object.keys(value).length === 0) && delete obj[key];  });  return obj;};

调用方法:

let res = delEmptyQueryNodes(delEmptyQueryNodes(params));

res就是过滤之后你要的数据了

第二:删除对象中值为空或null或undefined的所有属性(简单方法)

1、首先写一个方法判断当前值为空

function isEmpty(obj) {  if (typeof obj === 'undefined' || obj === null || obj === '') return true;  return false}

2、删除对象中值为空的所有属性

var formData = {   a: "duo",   b: 0,   c: undefined,   d: null,   e: null}function preProcessData(formData) {  Object.keys(formData).forEach(item=>{    if(this.isEmpty(formData[item])) {      delete formData[item];    }  })  return formData;}

第三:ES6-使用js删除对象中带有null和undefined值的数据

把对象中的空值去掉的需求,用于提交表单,但是antd表单通过form.validateFields()方法获取到的值会存在出现undefined或null的情况,本次分享的方法简单实用,比较优雅。

    ------->>>>>>    

 

代码:

const params = Object.keys(data).filter((key) => data[key] !== null && data[key] !== undefined).reduce((acc, key) => ({ ...acc, [key]: data[key] }), {});

代码的原理是通过Object.keys遍历对象中的key值,通过filter方法筛选出值不为null和undefined的数据。这个方法中最灵魂的地方在于用到了reduce高阶函数,reduce返回值的第二个参数传入{}初始值,通过reduce内部循环,将符合条件的数组中的属性和属性值添加到对象中去,最终返回出一个我们想要的不带空值的对象。 

交流


1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解  群号:   856402057

2、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!通过公众号可加我vx拉群

 


点击全文阅读


本文链接:http://zhangshiyu.com/post/59273.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1