使用 Lodash 从 JS 对象中删除 undefined、null、NaN?

给定一个 Javascript 对象

x = {'a': 123, 'b': 'hello', 'c': NaN, 'd': null, 'e': undefined}

是否可以使用 Lodash 或没有 Lodash 但以类似的可读方式删除所有具有 NaNnullundefined 的属性?

试过了

_.omitBy(x, _.isNil)

但它没有删除 NaN

{a: 123, b: "hello", c: NaN}

.omitBy 除了 `.isNil` 还可以带多个参数吗?

stack overflow Remove undefined, null, NaN from JS Object using Lodash?
原文答案

答案:

作者头像

因为 isNil 只是检查 null/undefined 值 ( doc )

检查值是否为空或未定义。

因此,您还必须使用 _.isNaN 检查该值是否为 NaN。

_.overSome([_.isNil, _.isNaN])
const x = {'a': 123, 'b': 'hello', 'c': NaN, 'd': null, 'e': undefined}

const res = _.omitBy(x, _.overSome([_.isNil, _.isNaN]))

console.log(res)
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>

或者你也可以在 vanilla JS 中做到这一点。

  • 将对象转换为键值对数组
  • 拒绝具有虚假值的对
  • 将对转换回对象

    
    const x = { a: 123, b: "hello", c: NaN, d: null, e: undefined };

const isNilOrNaN = (val) => val == null || Number.isNaN(val);

const res = Object.fromEntries(
Object.entries(x).filter(([key, value]) => !isNilOrNaN(value))
);

console.log(res);

作者头像

您可以使用 Number.isNaN 来检测 NaNvalue == null 来检测 nullundefined

x = {'a': 123, 'b': 'hello', 'c': NaN, 'd': null, 'e': undefined}

const result = Object.keys(x).reduce((acc, key) => {
  if (x[key] == null || Number.isNaN(x[key])) {
    return acc
  }

  return {
    ...acc,
    [key]: x[key],
  }
}, {})

console.log(result)
作者头像

仅使用 javascript,您可以在使用 Array.filter 创建的数组上使用 Object.entries ,然后使用 Object.fromEntries 将其转回对象。

const sourceObj = {
  'a': 123,
  'b': 'hello',
  'c': NaN,
  'd': null,
  'e': undefined,
  'f': 0,
  'g': ''
}

const result = Object.fromEntries(Object.entries(sourceObj).filter(([key, val]) =>
  val != null && !Number.isNaN(val)
))

console.log(result);

使用 lodash,您可以使用 pickByisNaNisNil

const sourceObj = {
  a: 123,
  b: "hello",
  c: NaN,
  d: null,
  e: undefined,
  f: 0,
  g: ""
};

const result = _.pickBy(sourceObj, (value) => {
  return !_.isNaN(value) && !_.isNil(value)
})

console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

哪一个具有更好的可读性是有争议的。

作者头像

使用 Array.includes 会解决很多这样的问题。

let x = {'a': 123, 'b': 'hello', 'c': NaN, 'd': null, 'e': undefined}

let result =
    Object.fromEntries(
        Object.entries(x).filter(
            v => ![NaN, null, undefined].includes(v[1])))

// result is { a: 123, b: "hello" }
console.log(result)
作者头像

我是这样做的:

const x = {'a': 123, 'b': 'hello', 'c': NaN, 'd': null, 'e': undefined}

const cleaned = _(x).omitBy(_.isNil).omitBy(_.isNaN).value()

console.log(cleaned)
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>