如何从对象数组中移除值为 null 的指定键-js教程-PHP中文网

如何从对象数组中移除值为 null 的指定键

本文介绍如何高效地从数组中的每个对象里删除值为 null 的字段（如 start_time、end_time），支持原生 JavaScript 和 Lodash 两种方案，代码简洁、可读性强，适用于 Vue.js、React 等前端场景。

本文介绍如何高效地从数组中的每个对象里删除值为 `null` 的字段（如 `start_time`、`end_time`），支持原生 javascript 和 lodash 两种方案，代码简洁、可读性强，适用于 vue.js、react 等前端场景。

在实际开发中，后端返回的数据常包含大量 null 值字段（如时间戳未设置时为 null），而前端渲染或提交时往往需要剔除这些冗余键以保持数据精简、避免意外逻辑错误。值得注意的是：Array.filter() 本身用于过滤数组元素，无法直接用于过滤对象内部的属性；真正适用的是 对象属性筛选 + 数组映射 的组合操作。

✅ 推荐方案一：使用 Lodash（简洁优雅）

Lodash 提供了 pickBy 配合 map 的链式组合，语义清晰、一行核心逻辑即可完成：

import { map, pickBy } from 'lodash';

const data = [
  { "name": "Homer Simpson", "age": "43", "start_time": null, "end_time": null },
  { "name": "Bart Simpson", "age": "14", "start_time": "2023-11-10T20:08:10Z", "end_time": "2023-11-10T20:08:10Z" }
];

const cleaned = map(data, obj => pickBy(obj, (value, key) => value !== null));
console.log(cleaned);
// → [{ "name": "Homer Simpson", "age": "43" }, { "name": "Bart Simpson", "age": "14", "start_time": "...", "end_time": "..." }]

? pickBy(obj, predicate) 会遍历对象所有键值对，仅保留使 predicate(value, key) 返回 true 的键值对。此处 value !== null 精准排除 null，但保留 undefined、""、0、false 等 falsy 值——符合常见需求（例如 0 年龄或 false 开关状态不应被误删）。

✅ 推荐方案二：原生 JavaScript（零依赖）

若项目未引入 Lodash，可用 Object.entries() + Object.fromEntries() 实现同等效果，兼容现代浏览器（ES2019+）：

const cleaned = data.map(obj =>
  Object.fromEntries(
    Object.entries(obj).filter(([_, value]) => value !== null)
  )
);

该写法完全不依赖外部库，逻辑透明：先将对象转为 [key, value] 键值对数组，过滤掉 value === null 的项，再还原为新对象。

⚠️ 注意事项与边界说明

null vs undefined：上述方案仅移除 null，若需同时剔除 undefined，请将条件改为 value != null（即 value !== null && value !== undefined）；
严格相等判断：使用 === 或 !== 可避免类型转换陷阱（如 0 == false 为 true，但 0 !== null 安全）；
性能考量：对于超大数据集（>10,000 条），可考虑 for...of 手动构建对象以减少中间数组开销；
Vue 响应式注意：在 Vue 2 中，动态新增/删除响应式对象属性需用 Vue.set() / Vue.delete()；但本例属于创建全新对象，无需额外处理，天然响应式。