Angular 5输入框动态过滤表格数据的优化需求

嘿，我完全懂你现在的困扰——靠一堆重复的if语句逐个字符判断前缀匹配，要是要支持20个字符就得写20个if，不仅代码冗余到爆炸，后续维护也头疼。针对你这个Angular 5里的表格动态过滤需求，我给你整理了两个简洁高效的优化方案：

方案一：用原生startsWith()方法（最推荐） #

JavaScript字符串本身就有startsWith()方法，专门用来判断一个字符串是否以指定前缀开头，完美替代你那些重复的if判断逻辑。

修改后的代码超简洁：

// state就是你输入框里的内容，比如输入"AB"就传"AB"
const filteredDesserts = this.desserts.filter(dessert => 
  dessert.name.startsWith(state)
);

// 把过滤后的结果赋值给表格绑定的变量
this.sortedData = filteredDesserts.slice();
this.showClearImage = true;
this.placeholderText = '';

额外优化：支持不区分大小写 #

如果需要忽略大小写匹配（比如输入"ab"也能匹配"Apple Pie"），只需要把两者都转成小写（或大写）再判断：

const filteredDesserts = this.desserts.filter(dessert => 
  dessert.name.toLowerCase().startsWith(state.toLowerCase())
);

方案二：用正则表达式（适合更复杂的匹配场景） #

如果你之后需要更灵活的匹配规则（比如中间模糊匹配，不过你的需求是前缀匹配，这个算是备选方案），可以用正则表达式：

// 构建前缀匹配的正则：^表示字符串开头，'i'表示不区分大小写（可选）
const prefixRegex = new RegExp(`^${state}`, 'i');
const filteredDesserts = this.desserts.filter(dessert => 
  prefixRegex.test(dessert.name)
);

this.sortedData = filteredDesserts.slice();
this.showClearImage = true;
this.placeholderText = '';

小提醒： #

如果输入内容里可能包含正则特殊字符（比如*、+这类），记得先对state做转义处理，不过如果只是普通字母输入，这个问题可以忽略。

为啥这俩方案比原来的好？ #

• 代码量骤减：不管输入多少字符，几行代码搞定，再也不用写N个重复的if
• 可读性拉满：逻辑一目了然，后续维护自己或者同事都能快速看懂
• 性能更优：原生方法和正则引擎的效率比手动逐个字符判断高多了

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