如下,定制设计对于一个多层嵌套的数据结构:例如
定制设计要做的就是删除所有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值的数据
把对象中的空值去掉的需求,用于提交表单,但是表单通过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拉群