JavaScript与React复杂数组场景下移除空对象的实现方法

之前直接使用原生filter方法未达到预期效果，核心原因是待移除的元素本身不是null引用、也不是空对象字面量，只是它的所有属性值都为null，属于具备有效引用的非空对象，直接判断对象本身的真假、是否为null根本无法识别出这类元素。

常见失效写法 #

这类写法之所以没法筛掉目标元素，是因为对全null属性的对象而言，判断对象本身的真假永远为真：

// 完全无法过滤全null属性的对象
input.filter(item => item)
input.filter(item => item !== null)

正确实现逻辑 #

遍历数组每个元素，提取对象的所有属性值，只要存在至少一个非null属性值就保留该元素，否则将其过滤。

const input = [
  { daysIn: 1, daysOut: 1, category: "Day Shift" },
  { daysIn: 1, daysOut: 1, category: "Day Shift" },
  { daysIn: null, daysOut: null, category: null }
];

const filteredResult = input.filter(item => {
  // 检查对象中是否存在非null的属性值
  return Object.values(item).some(value => value !== null);
});

执行上述代码后，最终的filteredResult会保留前两个带有有效业务值的对象，末尾全null的对象会被自动移除。

通用场景扩展 #

如果后续需要兼容更多空值类型（比如undefined、空字符串、空数组这类同样代表空的取值），可以将校验逻辑替换为通用空值判断：

// 定义通用空值校验规则
const isEmptyValue = (val) => {
  if (val === null || val === undefined || val === '') return true;
  if (Array.isArray(val) && val.length === 0) return true;
  return false;
}

const filteredResult = input.filter(item => {
  return Object.values(item).some(value => !isEmptyValue(value));
});

内容的提问来源于stack exchange，提问作者maxspan