检查租户数组元素首字母，按需设置过滤器对象的disabled属性

我来帮你搞定这个逻辑！根据你描述的需求，我们可以通过JavaScript来实现这个首字母匹配并更新过滤器的功能，下面是具体的实现方案：

实现步骤 #

1. 提取租户的首字母集合：先从租户数组中取出所有元素的首字母，统一大小写（和过滤器的text格式对齐），并用集合去重，避免重复判断。
2. 遍历更新过滤器数组：对每个过滤器项进行判断，根据首字母是否存在来设置disabled属性。

完整代码示例 #

// 你的租户数组
const tenants = ['foo','bar','boo','baz'];
// 初始过滤器状态数组
const initialFilters = [ 
  { text: 'ALL', disabled: false }, 
  { text: 'A', disabled: true }, 
  { text: 'B', disabled: true }, 
  { text: 'C', disabled: true }, 
  { text: 'D', disabled: true }, 
  { text: 'E', disabled: true }, 
  { text: 'F', disabled: true }, 
  { text: 'G', disabled: true }, 
  { text: 'H', disabled: true }
];

// 第一步：提取所有存在的首字母（转大写，去重）
const existingFirstLetters = new Set(
  tenants.map(tenant => tenant.charAt(0).toUpperCase())
);

// 第二步：更新过滤器状态
const updatedFilters = initialFilters.map(filterItem => {
  // 特殊处理ALL项：这里保持它的初始disabled状态，你也可以根据需求调整（比如无租户时禁用）
  if (filterItem.text === 'ALL') {
    return { ...filterItem };
  }
  // 其他首字母项：存在则启用（disabled=false），不存在则禁用（disabled=true）
  return {
    ...filterItem,
    disabled: !existingFirstLetters.has(filterItem.text)
  };
});

// 输出结果看看
console.log(updatedFilters);

代码说明 #

• 首字母提取：用map获取每个租户的首字母，toUpperCase()确保和过滤器的大写字母匹配，Set自动帮我们去重，避免重复处理同一个字母。
• 过滤器更新：用map遍历原过滤器数组，返回新的对象（不修改原数组，保持纯函数风格）：
  • ALL项这里默认保留初始状态，如果你需要根据租户是否存在来控制它的禁用状态，可以修改这部分逻辑（比如disabled: tenants.length === 0）。
  • 其他项通过has()方法检查首字母是否存在，反向设置disabled值——存在的字母对应的过滤器就启用，不存在的保持禁用。

扩展场景 #

如果你的租户首字母可能是小写，或者过滤器的text是小写，只需要统一转换大小写即可，比如把toUpperCase()改成toLowerCase()，同时确保过滤器的text匹配这个格式。

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