如何实现路由名称与字符串数组匹配时仅返回单个目标结果？

你现在的问题出在forEach循环的特性上——它会遍历数组里的每一项，每一项都会触发一次判断和输出。比如当routeName是"blogPost-slug"时，第一个类型blogPost匹配上了，输出blogPost，但第二个类型work没匹配，又输出了page，所以才会出现两个结果。

要实现只返回单个正确结果，我们可以用数组的find方法，它找到第一个匹配项就会停止遍历，不会继续处理后面的元素，完美符合需求。

修改后的代码实现 #

const listOfTypes = ['blogPost', 'work'];
// 动态获取的routeName，示例值可以是"blogPost"、"blogPost-slug"或"work-slug"

// 先查找是否有类型匹配前缀（比如"blogPost-"开头的路由）
const matchedType = listOfTypes.find(type => routeName.startsWith(`${type}-`));

if (matchedType) {
    // 匹配到前缀路由，返回对应类型
    console.log(matchedType);
} else if (listOfTypes.includes(routeName)) {
    // 路由名完全匹配数组中的类型，返回"page"
    console.log('page');
} else {
    // 无任何匹配，默认返回"page"
    console.log('page');
}

代码逻辑说明 #

1. 前缀匹配优先：先用find检查是否有类型加上-后是路由名的开头，找到就直接返回该类型，停止后续检查；
2. 完全匹配判断：如果没有前缀匹配的情况，再检查路由名是否和数组中的某个类型完全相等，是就返回page；
3. 默认返回：如果以上两种情况都不满足，默认返回page。

这样不管routeName是什么值，只会输出一次正确的结果，不会出现重复输出的问题。

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