优化JS对象过滤函数：移除特定格式的字符串数组字段

需求说明 #

我有如下JS对象：

{"field1":1,"field3":14,"category":9,"completion":null,"creation":"23-04-26", "settings":"[{\"ip\":\"\"}]"}

需要编写函数返回移除满足以下条件字段的对象：

• 字段值是字符串格式的数组
• 数组仅含一个元素
• 该元素是仅包含一个键值对的对象，且对应值为空字符串

期望结果：

{"field1":1,"field3":14,"category":9,"completion":null,"creation":"23-04-26"}

以下情况的字段不应被过滤：

• 数组元素的值非空：

{"field1":1,"field3":14,"category":9,"completion":null,"creation":"23-04-26", "settings":"[{\"ip\":\"33333not empty\"}]"}

• 数组元素包含多个键值对：

{"field1":1,"field3":14,"category":9,"completion":null,"creation":"23-04-26", "settings":"[{\"ip\":\"345\", \"dns\": \"address\"}]"}

我自己写的函数能正常工作，但if条件过多，想优化：

function filterArrayFields(values) {
  const result = {};

  const fieldNames = Object.keys(values);

  fieldNames.forEach((fieldName) => {
    if (typeof values[fieldName] !== 'string') {
      result[fieldName] = values[fieldName];
      return;
    }

    try {
      const parsedValue = JSON.parse(values[fieldName]);

      if (!Array.isArray(parsedValue)) {
        result[fieldName] = values[fieldName];
        return;
      }

      if (Array.isArray(parsedValue) && parsedValue.length > 1) {
        result[fieldName] = values[fieldName];
        return;
      }

      if (Array.isArray(parsedValue) && parsedValue.length === 1) {
        const arrayTypeFieldValue = parsedValue[0];

        const [arrayTypeFieldValueName] = Object.keys(arrayTypeFieldValue);

        if (arrayTypeFieldValue[arrayTypeFieldValueName] !== '') {
          result[fieldName] = values[fieldName];
          return;
        }
      }
    } catch (error) {
      result[fieldName] = values[fieldName];
    }
  });

  return result;
}

优化方案 #

可以通过提取判断逻辑为独立函数、利用数组方法简化对象操作的方式简化代码，让逻辑更清晰：

function filterArrayFields(values) {
  // 单独提取字段移除规则，逻辑一目了然
  const shouldRemoveField = (value) => {
    if (typeof value !== 'string') return false;
    try {
      const parsed = JSON.parse(value);
      // 复合条件一次性判断所有规则
      return Array.isArray(parsed) 
        && parsed.length === 1 
        && typeof parsed[0] === 'object' 
        && parsed[0] !== null
        && Object.keys(parsed[0]).length === 1 
        && parsed[0][Object.keys(parsed[0])[0]] === '';
    } catch {
      return false;
    }
  };

  // 使用Object.fromEntries+filter替代手动遍历赋值
  return Object.fromEntries(
    Object.entries(values).filter(([key, val]) => !shouldRemoveField(val))
  );
}

优化点说明 #

1. 提取独立判断函数：把原本分散的if条件整合成一个返回布尔值的函数，规则集中且直观，后续修改规则也更方便。
2. 简化对象构建逻辑：用Object.fromEntries配合filter替代手动创建结果对象、逐个赋值的操作，代码更简洁。
3. 补充边界检查：新增parsed[0] !== null的判断，避免null（typeof为'object'）引发的报错，覆盖更多边界场景。
4. 合并条件层级：把多个嵌套的if提前退出逻辑合并成一个复合条件，减少代码嵌套，可读性更强。

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