JavaScript中map返回含undefined数组 如何仅输出正确计算结果10

开发贴近人类自然表述的数学运算逻辑时，传入计算6加4的指令add 6 and 4，预期返回计算结果10，实际运行输出如下：

[undefined, undefined, undefined, 10]

原有实现代码如下：

function output(func) {
  console.log(func)
}
var dl = []
const read = str => {
  return str.split(' ').map(item => {
    dl.push(item.trim())
    if (dl.length >= 4) {
      const operator = dl.find(x => x.includes("add", "sub", "mul", "div"))
      const numbers = dl.filter(x => Number(x))
      switch (operator) {
        case "add":
          return numbers.reduce((a, b) => Number(a) + Number(b));
      }
    }
  })
}
var main = read(
  `add 6 and 4`
)
output(main)

• 核心逻辑错误：使用Array.map()遍历拆分后的字符串片段时，map会为每一个遍历元素返回对应值，最终返回和原数组长度一致的结果数组。输入字符串按空格拆分后共4个片段（add/6/and/4），前3次遍历时暂存数组dl长度不足4，没有显式返回值，对应位置默认返回undefined，仅第4次遍历满足长度条件返回计算结果10，最终就得到了包含3个undefined的长度为4的数组。
• 运算符判断逻辑bug：String.includes()仅接收第一个参数作为匹配目标，传入的"sub"/"mul"/"div"会被识别为搜索起始位置，不会参与匹配，后续扩展减法、乘法、除法逻辑时会失效。
• 数值提取逻辑隐患：用x => Number(x)作为过滤条件时，合法数值0会因为转成数字后为falsy值被错误过滤。

• 移除遍历过程中做计算的逻辑，先完成输入内容的解析，提取到完整的运算符、操作数后再统一计算，直接返回最终计算值，而非遍历生成的中间数组。
• 修正运算符匹配逻辑，遍历预设的运算符列表判断当前片段是否为合法运算符。
• 修正数值识别逻辑，用!isNaN(Number(x))判断合法数字，避免0被误过滤。

function output(res) {
  console.log(res)
}
const read = str => {
  const itemList = str.split(' ').map(item => item.trim())
  // 匹配运算符
  const operator = itemList.find(x => ['add', 'sub', 'mul', 'div'].includes(x))
  // 提取所有数字参数
  const numbers = itemList.filter(x => !isNaN(Number(x))).map(Number)
  // 执行对应运算
  switch (operator) {
    case "add":
      return numbers.reduce((a, b) => a + b);
    // 可在此处扩展sub、mul、div的运算逻辑
  }
}
var main = read(`add 6 and 4`)
output(main)

运行后将直接输出正确结果10。

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