JS数组怎么安全删除undefined和null空值

一、假值陷阱与精准判空判定原理

很多初学者在清理数组时，往往习惯直接调用 arr.filter(Boolean)。这种做法在数组仅包含常规对象或非零数字时似乎能正常工作，但在健壮的工程开发中却潜藏着巨大的数据损坏隐患。

在 JavaScript 的隐式类型转换规则中，除了 null 与 undefined 之外，0、-0、0n、""（空字符串）、false 以及 NaN 同样会被强制转换为布尔值 false。如果数组存储的是传感器读数、表单字段、状态开关或数值坐标，盲目使用布尔强转会导致有效业务数据被连带抹除。

// 危险示例：使用 Boolean 进行全量假值过滤
const rawScores = [100, null, 0, "合格", undefined, "", false];
const unsafeResult = rawScores.filter(Boolean);
console.log(unsafeResult);

要实现“仅删除 null 和 undefined”的目标，必须理解 ECMAScript 规范中的抽象相等比较规则（Abstract Equality Comparison）。在标准规则中，null == undefined 返回 true，且它们两个与任何其他值（包括 0、false、""）进行宽松比较时，结果均为 false。因此：

• 表达式 item != null 严格等价于 item !== null && item !== undefined。
• 同理，item != undefined 也能达成相同效果，但业界通行标准更倾向于使用 != null，书写更为简短。

二、不可变模式：filter 的标准实践与类型守卫

在现代前端开发（如 React、Vue 与 Redux 数据流）中，遵循不可变数据原则（Immutability）至关重要。过滤操作应当生成一个全新的数组引用，而不是直接修改输入数据，这样能确保视图响应式监听不失效，同时避免副作用穿透到其他模块。

1. 标准单行过滤（推荐语法）

利用 Array.prototype.filter 与 item != null，这是 JavaScript 清除双空值最简洁且符合规范的标准写法：

const list = ["apple", null, 0, undefined, false, "", "banana"];

// 安全清洗：保留 0、false、""，移除 null、undefined
const cleanList = list.filter(item => item != null);

console.log(cleanList);
console.log(list !== cleanList); // true，保持原数组未被修改

2. 稀疏数组（空槽 Empty Slot）的天然处理能力

JavaScript 数组可能包含未赋值的“空槽”（例如通过 new Array(3) 或字面量 [1, , 3] 创建的稀疏数组）。空槽在读取时返回 undefined，但在底层哈希结构中并不存在索引键。Array.prototype.filter 在执行时遵循 ECMAScript 规范，会自动跳过这些未初始化的空槽（即内部的 HasProperty 检查为 false），因此该方法不仅能剔除显式的 null 与 undefined，还能顺带将稀疏数组压实为密集数组。

3. TypeScript 中的类型安全：自定义类型守卫（Type Guard）

在 TypeScript 项目中，如果直接执行 list.filter(x => x != null)，编译器推导出的结果类型依然是 (string | number | boolean | null | undefined)[]。这是因为 TypeScript 无法从箭头函数体内直接推断出过滤收窄关系，导致后续使用必须频繁加上非空断言操作符 !。

彻底解决该问题的方案是提供一个类型谓词函数（Type Predicate）：

// 定义通用的空值类型守卫
function isNonNullable<T>(val: T): val is NonNullable<T> {
  return val !== null && val !== undefined;
}

// 待清洗的混合数据源
const rawItems: (string | null | undefined | number)[] = ["Alpha", null, 2026, undefined];

// 经过守卫过滤后，safeItems 的类型被收窄为 (string | number)[]
const safeItems = rawItems.filter(isNonNullable);

safeItems.forEach(item => {
  // 此时 item 不存在 null / undefined 类型风险，无需可选链或非空断言
  console.log(item.toString());
});

三、原地修改：避免索引漂移的安全算法

虽然 filter 是最推荐的通用做法，但在以下特殊场景中，你可能必须就地修改（In-place Mutation）原数组：

• 内存极其严苛的环境：数组包含几十万个大型对象，重新分配一个等长新数组会触发垃圾回收抖动（GC Thrashing）或内存溢出。
• 保持原引用不变：外部多个模块持有了该数组的唯一引用，无法通过重新赋值更新指针。

1. 正序 splice 的“索引漂移”灾难

很多开发者在尝试原地删除时，直觉性地写出如下代码：

// 错误示范：正序遍历 + splice
const badArray = ["A", null, null, "B"];

for (let i = 0; i < badArray.length; i++) {
  if (badArray[i] == null) {
    badArray.splice(i, 1);
  }
}
console.log(badArray);

产生漏删的根本原因在于索引漂移（Index Shifting）：当 i = 1 处的第一个 null 被删除后，后面的所有元素立刻向前补位。原先处于 i = 2 的第二个 null 瞬间滑动到了 i = 1 的位置。而紧接着 for 循环执行 i++，下一次检查的是 i = 2（即 "B"），刚刚向前补位的 null 直接逃脱了检查！

2. 简单修复：逆序循环（从后往前遍历）

若依然希望使用 splice，最直观的修复方式是将循环方向改为逆序。因为从数组尾部往前删除时，发生前移的只有已经被检查过的尾部元素，前方待检查元素的索引完全不受影响：

const data = ["A", null, null, "B", undefined, 0];

for (let i = data.length - 1; i >= 0; i--) {
  if (data[i] == null) {
    data.splice(i, 1);
  }
}

console.log(data);

3. 高性能极致方案：双指针快慢移动与 length 截断

虽然逆序 splice 能解决漏删，但每次调用 splice 都会导致底层内存块向前搬移，如果数组元素有 10 万个且包含大量空值，其时间复杂度为 O(n²)，耗时显著上升。

工业级高性能的原地清洗算法是双指针快慢覆盖法（Two-Pointer Invariant）：

1. 定义慢指针 write（写入位置）和快指针 read（读取位置），均从 0 开始。
2. 快指针 read 遍历整个数组：若当前元素不是空值（arr[read] != null），则将其覆盖写入到慢指针 write 所在槽位，并将 write 加 1。
3. 当快指针扫描完毕后，直接将 arr.length = write。JavaScript 引擎会高效地将多余的尾部空间瞬间截断丢弃。

// 高性能 O(n) 原地清洗算法
function compactInPlace(arr) {
  let write = 0;
  const len = arr.length;

  for (let read = 0; read < len; read++) {
    const val = arr[read];
    // 精准判空，保留 0, false, ""
    if (val != null) {
      arr[write] = val;
      write++;
    }
  }

  // 一步截断后续无效槽位
  arr.length = write;
  return arr;
}

const buffer = [0, null, null, "safe", undefined, false];
compactInPlace(buffer);
console.log(buffer);

四、清洗策略选择与性能工程对比

为了在具体业务开发中选择最恰当的方案，下面对常见的四种空值清理手段在功能特性、边界保护与执行效率方面做横向对比：

五、边界处理与验证清单

在将清洗逻辑集成到生产环境前，建议按照以下清单对边缘场景进行回归验证：

• 假值完整度验证：确保测试用例包含 0、""（空字符串）、false 和 NaN，确认清洗后这些值依然存在，未被隐式转换误杀。
• 连续空值边界测试：针对原地修改逻辑，输入 [null, null, undefined, undefined] 等连续空值，验证算法不会发生索引跳过。
• 稀疏数组压实：测试带有空槽的数组 [1, , 2]，确认处理后的数组为连续紧凑结构，且 length 正确缩减。
• 深层嵌套对象处理：本文讨论的所有方法均针对一维数组。如果数组中存放的是对象，且需要清除对象属性中的 null 或 undefined，应配合 map() 进行深层键值过滤或递归清理，而非仅对顶层数组过滤。

总结而言，在 JavaScript 中安全删除 undefined 和 null 并不复杂，关键在于恪守精确匹配原则：常规业务直接使用 arr.filter(item => item != null)，TypeScript 工程使用 isNonNullable 守卫，极端原地性能场景使用双指针快慢覆盖，即可彻底杜绝静默数据丢失与索引错位隐患。