如何筛选对应字符串与数字类型的列字段并生成指定结构数组

需求回顾 #

遍历columns列配置数组，依据data中对应字段的类型，仅保留值为**字符串（string）或数字（number）**类型的字段，最终输出格式为[{fieldName: "字段名"}, ...]的数组。

常见逻辑错误分析 #

函数失效通常源于这些问题：

• 错误判断数据类型（比如误用instanceof而非typeof，或未排除null/undefined）
• 未处理data为空的边界场景
• 输出格式不符合要求（比如字段名拼写错误为fieldname）
• 未基于统一样本数据做类型判断（遍历所有数据导致逻辑冗余或出错）

正确实现代码 #

function searchColumnUpdate(columns, data) {
  // 若数据为空，直接返回空数组
  if (!Array.isArray(data) || data.length === 0) return [];
  
  // 取第一条数据作为类型判断基准（表格数据通常结构统一）
  const sample = data[0];
  
  return columns
    .filter(col => {
      const value = sample[col.fieldName];
      const valueType = typeof value;
      // 只保留字符串或数字类型，自动排除null/undefined/布尔/对象等类型
      return valueType === 'string' || valueType === 'number';
    })
    .map(col => ({ fieldName: col.fieldName }));
}

代码要点说明 #

• 边界处理：先判断data是否为有效数组，为空时直接返回空数组，避免后续报错
• 类型判断：使用typeof判断原始类型，确保原始字符串/数字都能被正确识别，同时自动排除null、undefined、布尔值、对象等不符合要求的类型
• 格式转换：过滤后通过map将列配置转换为需求指定的{fieldName: ...}格式
• 性能优化：基于第一条数据做类型判断，避免遍历所有数据（若业务场景存在字段类型不一致的情况，可调整为检查所有数据的字段类型）

使用示例 #

// 示例输入的列配置
const columns = [
  { fieldName: "ID", label: "编号" },
  { fieldName: "startTable", label: "起始表" },
  { fieldName: "isActive", label: "是否激活" },
  { fieldName: "createTime", label: "创建时间" }
];

// 示例数据
const data = [
  { ID: 123, startTable: "table_a", isActive: true, createTime: new Date() },
  { ID: 456, startTable: "table_b", isActive: false, createTime: new Date() }
];

// 调用函数
const filteredColumns = searchColumnUpdate(columns, data);
console.log(filteredColumns);
// 输出结果：[{fieldName: "ID"}, {fieldName: "startTable"}]

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