JS 清理嵌套的未定义道具

在 JavaScript 中，我们常常遇到需要处理包含嵌套对象的数据结构的情况，这些嵌套对象可能含有未定义的属性。清理嵌套的未定义属性可以使代码更加健壮，避免出现未定义错误。

问题概述

考虑以下 JavaScript 对象：

const data = {
  foo: {
    bar: {
      baz: 1,
      qux: undefined,
    },
    quux: undefined,
  },
  quuz: undefined,
};

在这个对象中，包含了多层嵌套对象和若干未定义属性。我们的目标是清理这个对象中所有未定义的属性，以便简化代码和提高性能。

解决方案

我们可以通过递归遍历对象和数组的方式清理未定义的属性。以下是一个实现：

function cleanUndefinedProps(obj) {
  if (Array.isArray(obj)) {
    for (let i = obj.length - 1; i >= 0; i--) {
      if (obj[i] === undefined) {
        obj.splice(i, 1);
      } else if (typeof obj[i] === 'object') {
        cleanUndefinedProps(obj[i]);
      }
    }
  } else if (typeof obj === 'object') {
    Object.entries(obj).forEach(([key, value]) => {
      if (value === undefined) {
        delete obj[key];
      } else if (typeof value === 'object') {
        cleanUndefinedProps(value);
      }
    });
  }
}

该函数接受一个对象或数组作为参数，会遍历其所有元素并清理未定义属性。具体实现通过判断是否为数组和对象，分别进行处理。在遇到未定义属性时，我们删除该属性；在遇到包含其他对象或数组的元素时，我们递归调用自身以处理这些元素。

示例使用

我们可以使用以下代码清理例子中的 data 对象中所有未定义属性：

cleanUndefinedProps(data);
console.log(data); // {foo: {bar: {baz: 1}}}

可以看到，清理后的 data 对象已经不包含任何未定义属性。

总结

清理嵌套的未定义属性可以使 JavaScript 代码更加健壮，避免出现未定义错误。实现方法可以通过递归遍历对象和数组的方式进行，具体实现需要注意对数组和对象分别进行处理。