如何遍历深克隆后的复杂React State移除所有空字符串？

既然你已经通过JSON.parse(JSON.stringify(state))完成了深克隆，接下来只需要写一个递归遍历的清理函数，就能处理嵌套的对象、数组，把所有空字符串都移除掉——毕竟你的状态结构里既有多层对象，又有数组，必须逐层处理才行。

核心思路 #

1. 区分当前处理的是数组还是对象：
   • 数组：先过滤掉空字符串元素，再对剩下的元素递归处理（比如数组里嵌套的对象）
   • 对象：遍历每个键值对，空字符串直接跳过不保留，非空值如果是对象/数组就递归清理，否则直接保留
2. 注意边界情况：比如null（因为typeof null会返回object，要排除掉避免报错），还有非对象/数组的基础类型（比如字符串、数字、布尔）直接返回即可。

具体实现代码 #

先写清理函数：

function removeEmptyStrings(obj) {
  // 处理数组类型
  if (Array.isArray(obj)) {
    return obj
      .filter(item => item !== '') // 过滤掉数组里的空字符串
      .map(item => {
        // 如果元素是对象/数组，递归清理
        if (typeof item === 'object' && item !== null) {
          return removeEmptyStrings(item);
        }
        return item;
      });
  }

  // 处理对象类型
  if (typeof obj === 'object' && obj !== null) {
    const cleanedObj = {};
    for (const key in obj) {
      const value = obj[key];
      // 空字符串直接跳过，不加入新对象
      if (value === '') {
        continue;
      }
      // 嵌套的对象/数组递归处理
      if (typeof value === 'object' && value !== null) {
        cleanedObj[key] = removeEmptyStrings(value);
      } else {
        cleanedObj[key] = value;
      }
    }
    return cleanedObj;
  }

  // 基础类型直接返回
  return obj;
}

然后调用这个函数处理你的克隆对象：

// 你已经克隆好的状态对象
const clonedState = JSON.parse(JSON.stringify(originalState));
// 执行清理
const cleanedState = removeEmptyStrings(clonedState);

效果验证 #

拿你给出的原始状态举例：

const originalState = {
  a: [ { a: ['b','',] } ],
  b: { a: ['b',''], b: {c:'e',f:''} },
  c: 'd',
  e: '',
  f: ['g',''],
  date: new Date()
};

清理后的cleanedState会变成：

{
  a: [ { a: ['b'] } ],
  b: { a: ['b'], b: { c: 'e' } },
  c: 'd',
  f: ['g'],
  date: "2024-05-20T12:34:56.789Z" // 这里是Date对象转成的ISO字符串
}

小提示 #

如果你希望保留date的Date对象类型，而不是转成字符串，那JSON.parse(JSON.stringify())的深克隆方式就不适用了——因为JSON无法序列化Date对象，会自动转成字符串。这种情况下可以用第三方库（比如lodash的cloneDeep），或者自己实现一个能保留Date类型的深克隆函数，但这属于额外需求，你的问题里已经完成了克隆，所以上面的方案完全够用。

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