如何从JavaScript数组中移除扩展自原字符串的多余层级字符串

你要的筛选规则本质是按.作为层级分隔符时，仅保留总层级数为3的项：固定前缀total.color占2个层级，后面跟1级颜色名刚好是3层，只要层级数大于3的，就是后缀带更多子属性、需要剔除的内容。

1. 通用简洁写法（推荐） #

直接用字符串分割后判断段数，不需要绑定固定前缀，适配所有同规则的点分层级筛选场景：

const sourceArr = ['total.color.violet', 'total.color.violet.truefont', 'total.color.red', 'total.color.red.circle', 'total.color.red.circle.elefant', 'total.color.blue', 'total.color.yellow', 'total.color.yellow.dotted'];

const filterResult = sourceArr.filter(item => item.split('.').length === 3);

这个写法的优势是逻辑直白可读性强，后续如果要调整保留的层级，比如要保留第4层的项，只需要把判断条件里的3改成对应数字即可，维护成本极低。

2. 带前缀校验的高鲁棒性写法 #

如果你的数组可能混入不符合total.color前缀的脏数据，可以加一层前缀校验，避免误保留无关项：

const FIXED_LEVEL_PREFIX = 'total.color.'; // 末尾带点，避免误匹配total.colorxxx这类异常值
const filterResult = sourceArr.filter(item => {
  // 先判断前缀合规，再判断去掉前缀后的剩余内容没有多余的点（即只有1级）
  return item.startsWith(FIXED_LEVEL_PREFIX) && !item.slice(FIXED_LEVEL_PREFIX.length).includes('.');
});

这个写法可以自动过滤掉比如other.attr.green、total.colorxx.test这类不符合规则的异常数据，适合数据源不完全可控的场景。

• 不要硬编码枚举颜色值做匹配，比如手动判断项是否等于total.color.red/total.color.blue这类值，后续新增颜色属性时必须同步改判断逻辑，很容易漏改出bug。
• 如果数据源可能存在首尾带点、连续点的脏格式（比如total.color..violet、.total.color.red），可以在判断前先做一次格式清洗，避免split出空字符串段导致层级判断错误。
• 不要用正则写过于复杂的匹配规则，这类简单层级判断用字符串原生API性能更好，也更方便其他同事读懂逻辑。

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