JavaScript筛选employeeName含指定串的数组元素问题排查

两种写法没达到预期，分别对应不同的问题：

• map方法用法错误：map的设计用途是做数组等长映射，返回的新数组长度和原数组完全一致。你只在匹配到关键词的分支返回了元素，未匹配的分支没有写返回值，JS函数无显式return时默认返回undefined，自然会在结果里出现大量undefined。这个方法从根上就不适合做筛选场景。
• filter写法逻辑本身是正确的，返回空数组基本都是代码细节问题导致的：
  1. 源数组语法错误：你贴出的示例数组里，对象的两个属性之间没有加逗号分隔（employeeId:1后直接跟employeeName:"ABC"），属于JS语法错误，会导致数组解析不符合预期
  2. 匹配规则问题：indexOf是大小写敏感的，如果你实际存储的员工名是小写ab，匹配大写AB就会匹配失败；如果关键词带了多余空格、或者字段名拼写错误（比如漏写字母写成employName），也会导致匹配不到
  3. 变量引用错误：你调用filter的变量不是实际存储员工数据的数组，自然拿不到结果

数组筛选优先用内置的filter方法，它会自动收集回调返回值为true的元素，跳过不符合条件的项，不会产生undefined值。

基础实现（大小写精确匹配） #

// 替换成你实际存储员工数组的变量名，注意源数组属性之间要加逗号
const employeeList = [
  {
    employeeId: 1,
    employeeName: "ABC"
  },
  {
    employeeId: 2,
    employeeName: "ABD"
  },
  {
    employeeId: 3,
    employeeName: "FEW"
  },
  {
    employeeId: 4,
    employeeName: "JKABL"
  }
]

const searchKeyword = "AB"
// 用includes语义更清晰，和indexOf判断效果完全一致
const filteredResult = employeeList.filter(item => item.employeeName.includes(searchKeyword))

运行后返回的结果和你给出的预期结果完全一致，包含employeeId为1、2、4的三个对象。

优化实现（忽略大小写+自动去除关键词首尾空格） #

如果需要做更鲁棒的模糊搜索，可以加上大小写兼容和空格处理，避免用户输入大小写不匹配、误输空格导致匹配失败：

const searchKeyword = " ab " // 带空格、小写输入也能正常匹配
const formattedKeyword = searchKeyword.trim().toLowerCase()
const filteredResult = employeeList.filter(item => {
  return item.employeeName.toLowerCase().includes(formattedKeyword)
})

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