如何简化生成下拉选择器选项的dataFilterArray函数，移除Lodash依赖与flat方法并实现空值过滤？

我来帮你重构这个函数，完全去掉Lodash依赖，简化逻辑的同时保留所有你需要的功能——包括空值过滤、属性值分割去重，以及添加"Select All"选项。

原函数的问题分析 #

原函数里有几个可以优化的点：

• 使用_.uniqBy处理split后的字符串数组是无效的（字符串没有你传入的属性名），实际应该用_.uniq，但我们可以用原生Set更高效地去重
• 先生成二维数组再用flat扁平化，完全可以在遍历过程中直接收集元素，避免额外的数组操作
• Lodash依赖完全可以用原生JS API替代

优化后的函数代码 #

const dataFilterArray = (data, prop) => {
  const uniqueValues = new Set();

  for (const item of data) {
    const value = item[prop];
    // 跳过属性值为空的对象
    if (!value) continue;
    // 按空格分割属性值，遍历每个部分
    const parts = value.split(' ');
    for (const part of parts) {
      // 只添加非空的分割片段
      if (part) {
        uniqueValues.add(part);
      }
    }
  }

  // 将Set转为数组，添加"Select All"后返回
  return [...uniqueValues, 'Select All'];
};

优化点说明 #

1. 移除Lodash依赖：用原生Set实现自动去重，性能更优且无需额外库
2. 避免flat操作：直接在遍历过程中收集分割后的元素，不需要先构建二维数组再扁平化
3. 保留空值过滤：
   • 跳过属性值为空的对象（比如crew为空的条目）
   • 跳过分割后为空的字符串（比如属性值包含多个连续空格的情况）
4. 逻辑更清晰：一步到位完成值的收集、去重和过滤，可读性更强

测试验证 #

调用优化后的函数，结果和原函数完全一致：

• dataFilterArray(value.Value, 'Work Group Name') 返回：["PSCF", "PME1", "ES", "MM", "Select All"]
• dataFilterArray(value.Value, 'crew') 返回：["FIN", "Select All"]

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