JavaScript中循环/Map返回<spans>时出现undefined问题

尝试拆分输入字符串，遍历音素拼写数组进行匹配，但当前函数返回undefined，无法得到预期的带样式元素。

Redux代码 #

const wordSlice = createSlice({
  name: 'word',
  initialState: { word: '', preppedWord: '' },
  reducers: {
    [...]
    checkPhonemes(state, action) {
      console.log(decoder.phonemeCheck(state.word))
      state.preppedWord = decoder.phonemeCheck(state.word)
    },
  },
})

匹配函数代码 #

export const phonemeCheck = (word) => {
  return phonemeMatcher(word)
}

export const phonemeMatcher = (word) => {
  for (let i = 0; i < word.length; i++) {
    for (let j = 0; j < word.length - i; j++) {
      let chunk = word.substring(i, i + j + 1)
      consonants.map((consonant) => {
        consonant.spellings.map((spelling) => {
          if (chunk === spelling.spelling) {
            console.log(chunk)
            return <span className={'phoneme-class'}>{chunk}</span>
          }
        })
      })
    }
  }
}

音素数据示例（节选） #

export const consonants = [
  // 记得用/ /包裹发音，比如/s/、/c/
  {
    consonantSound: 's',
    spellings: [
      { spelling: 's', example: 'sun' },
      { spelling: 'ss', example: 'class' },
      { spelling: 'c', example: 'cell' },
      { spelling: 'ce', example: 'voice' },
      { spelling: 'se', example: 'house' },
      { spelling: 'sc', example: 'scent' },
    ],
  },
  {
    consonantSound: 'sh',
    spellings: [
      { spelling: 'sh', example: 'ship' },
      { spelling: 'ch', example: 'machine' },
    ],
  },
  {
    consonantSound: 'ch',
    spellings: [
      { spelling: 'tch', example: 'match' },
      { spelling: 'ch', example: 'chips' },
    ],
  },
  [...]
]

问题原因 #

1. 无有效返回值：phonemeMatcher函数本身没有return语句，内部的return仅作用于map的回调函数，不会作为外层函数的返回结果，因此函数默认返回undefined。
2. 匹配逻辑缺陷：当前循环遍历所有可能子串，但未收集匹配结果，也未处理匹配后跳过已匹配字符的逻辑（比如匹配到"sh"后，不应再单独匹配"s"和"h"），且从短子串开始匹配会导致长拼写被优先覆盖。

修正后的代码 #

export const phonemeMatcher = (word) => {
  const result = [];
  let i = 0;
  // 从左到右遍历字符串
  while (i < word.length) {
    let matched = false;
    // 优先尝试最长的可能子串（从剩余长度到1）
    for (let len = word.length - i; len >= 1; len--) {
      const chunk = word.substring(i, i + len);
      // 检查所有辅音的拼写
      for (const consonant of consonants) {
        const foundSpelling = consonant.spellings.find(sp => sp.spelling === chunk);
        if (foundSpelling) {
          // 匹配成功，添加带样式的元素
          result.push(<span className={'phoneme-class'}>{chunk}</span>);
          i += len; // 跳过已匹配的字符
          matched = true;
          break;
        }
      }
      if (matched) break;
    }
    // 如果没有匹配到任何拼写，直接添加原字符
    if (!matched) {
      result.push(word[i]);
      i++;
    }
  }
  return result;
}

修正说明 #

• 新增result数组收集匹配结果，最后返回该数组作为函数输出。
• 使用while循环控制遍历位置，匹配到长拼写后直接跳过对应长度的字符，避免重复匹配。
• 从最长子串开始尝试匹配，优先匹配"ss"、"sh"这类长拼写，符合音素匹配的逻辑。
• 处理未匹配到的字符，直接添加到结果中，避免遗漏原字符串内容。

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