前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，
求个收藏 + 关注啦～后续还有超多惊喜，别错过！
目录
在 JavaScript 的编程旅程中，我们常常会遇到数据中夹杂着各种 “空” 项的情况，这些空项就像隐藏在代码里的小麻烦，可能会给数据处理和程序逻辑带来不必要的困扰。无论是空字符串、null、undefined，还是空数组、空对象，它们都可能在不经意间影响我们代码的健壮性和效率。今天，就让我们一起探索如何巧妙地将这些空项从数据中剔除，让代码更加清爽、高效。
一、数组 “净化”：赶走空元素
（一）简单空值过滤
在处理数组时，最常见的空值就是空字符串、null 和 undefined。它们就像混入珍珠里的沙粒，破坏了数组数据的纯粹性。幸运的是，JavaScript 给我们提供了强大的 filter 方法，它就像是一个智能筛选器，能帮助我们轻松去除这些不想要的空值。
const arr = ['apple', '', null, 'banana', undefined, 'cherry'];
const newArr = arr.filter(item => item!== null && item!== undefined && item!== '');
console.log(newArr); // 输出: ['apple', 'banana', 'cherry']在这段代码里，filter 方法遍历数组的每一个元素，通过回调函数对每个元素进行检查。如果元素既不是 null，也不是 undefined，更不是空字符串，就会被保留下来，进入我们的新数组。这就好比在一个水果篮里挑选水果，把那些烂掉的（空值）挑出去，只留下新鲜完好的（有效数据）。
（二）深度过滤：数组中的空数组与空对象
数组中的元素不仅仅是简单的数据类型，还可能是数组或对象。当遇到空数组和空对象时，我们需要更细致的处理方式。
const arr2 = [1, [], {}, 2, { name: 'John' }, []];
const newArr2 = arr2.filter(item => {
if (Array.isArray(item)) {
return item.length > 0;
} else if (typeof item === 'object' && item!== null) {
return Object.keys(item).length > 0;
}
return true;
});
console.log(newArr2); // 输出: [1, 2, { name: 'John' }]这里的回调函数就像是一个智能探测器，当检测到元素是数组时，它会检查数组的长度，如果长度大于 0，说明数组有内容，予以保留；如果是对象，就通过 Object.keys 获取对象的属性键，若属性键的数量大于 0，表明对象有属性，也会被保留。而对于其他类型的元素，直接放行，这样就能确保数组中没有无用的空数组和空对象。
二、对象 “瘦身”：移除空属性
对象作为 JavaScript 中重要的数据结构，也难免会有空属性的问题。这些空属性就像房间里闲置的杂物，占据空间却没有实际作用。
const obj = {
name: 'John',
age: null,
address: '',
hobbies: ['reading','swimming']
};
const newObj = Object.fromEntries(
Object.entries(obj).filter(([key, value]) => value!== null && value!== undefined && value!== '')
);
console.log(newObj); // 输出: { name: 'John', hobbies: ['reading','swimming'] }这段代码的操作就像是一次房间整理。首先，Object.entries(obj) 把对象转换成一个个键值对数组，就像是把房间里的物品都列出来；然后，filter 方法对这些键值对进行筛选，把值为空的键值对（空属性）挑出去；最后，Object.fromEntries 把筛选后的键值对重新组装成一个新的对象，这样就得到了一个没有空属性的 “整洁” 对象。
三、深度探索：嵌套数据结构的净化
在实际开发中，数据结构往往是复杂嵌套的，就像一个层层嵌套的俄罗斯套娃。处理这种情况时，我们需要更强大的工具 —— 递归函数。
const nestedData = {
name: 'John',
details: {
age: null,
address: '',
contacts: [
{ phone: null },
{ email: '[email protected]' }
]
}
};
function removeEmptyValues(data) {
if (Array.isArray(data)) {
return data.filter(item => {
if (typeof item === 'object' && item!== null) {
return Object.keys(removeEmptyValues(item)).length > 0;
}
return item!== null && item!== undefined && item!== '';
});
} else if (typeof data === 'object' && data!== null) {
return Object.fromEntries(
Object.entries(data).filter(([key, value]) => {
if (typeof value === 'object' && value!== null) {
const newValue = removeEmptyValues(value);
return Object.keys(newValue).length > 0;
}
return value!== null && value!== undefined && value!== '';
})
);
}
return data;
}
const newNestedData = removeEmptyValues(nestedData);
console.log(newNestedData);
// 输出: { name: 'John', details: { contacts: [ { email: '[email protected]' } ] } }这个 removeEmptyValues 函数就像是一个熟练的工匠，能够一层一层地打开嵌套的数据结构。如果遇到数组，就对数组中的每个元素进行检查和处理；如果是对象，就对对象的每个属性进行筛选。对于嵌套的对象和数组，递归调用自身，就像不断打开俄罗斯套娃一样，直到把所有层级的数据都处理完，最终得到一个纯净的、没有空项的数据结构。
结语
在 JavaScript 的世界里，掌握去除数据中空项的技巧，能让我们的代码更加健壮、高效。无论是简单的数据类型，还是复杂的嵌套结构，只要运用合适的方法，就能轻松应对。希望这些方法能成为你编程路上的得力助手，帮助你打造更优质的代码。
到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。创作这篇内容花费了不少心血，要是它帮你解决了问题，或者带来了启发，就多多支持下 “码上前端” 吧～要是想转载，麻烦一定注明本文链接，感谢大家！ 💕
