本文介绍在 JavaScript 中清理多层嵌套数据结构中 null、undefined、空字符串、空数组及空对象的方法。通过递归遍历与 filter 结合 reduce 两种方案,分别处理深层嵌套与简单对象,适用于表单提交等场景。
面对多层嵌套的数据结构,例如如下示例:
目标是对所有值为空、数组为空或对象为空的字段进行删除处理。
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',
},
],
},
};经过处理后,期望得到如下结构:
![第一种方法:过滤各类空数据字段,包括 string、null、undefined、[] 和 {}。](/uploads/20261025/2c7094808d29540276f1670bfd41375e074c280cf1472b9eb3b270c265de4898.png)
{
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 的所有属性(简易版)。
首先编写一个判断当前值是否为空的函数。
function isEmpty(obj) {
if (typeof obj === 'undefined' || obj === null || obj === '') return true;
return false
}接着删除对象中值为空的所有属性。
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 特性删除对象中包含 null 和 undefined 值的数据。
处理对象中去除空值的需求常用于表单提交场景,但在使用 form.validateFields() 方法获取值时,可能会出现 undefined 或 null 的情况。本文分享的方法简单实用且较为优雅。
------->>>>>> ![第一种方法:过滤各类空数据字段,包括 string、null、undefined、[] 和 {}。](/uploads/20261025/850f5e3a51060d26ce05f41118e2c54d8a047d628f8f53b5d10f53a031025d83.png)
具体代码如下:
const params = Object.keys(data)
.filter((key) => data[key] !== null && data[key] !== undefined)
.reduce((acc, key) => ({ ...acc, [key]: data[key] }), {});该代码的原理是利用 Object.keys 遍历对象中的键名,通过 filter 方法筛选出值不为 null 和 undefined 的项。此方法的核心在于使用了 reduce 高阶函数,将 {} 作为初始值传入 reduce 的第二个参数。通过 reduce 内部循环,将符合条件的数组中的属性和属性值添加到对象中,最终返回一个不含空值的对象。
总结
至此,关于如何在 JavaScript 中删除对象或数组中的 null、undefined、空对象及空数组的介绍已完成,更多相关 js 删除对象数组中 null、undefined、空对象及空数组的内容请搜索本站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持本站!