如何用JavaScript Array.find结合正则获取两数组首个匹配元素的索引？

绝对可以实现！虽然Array.find()本身返回的是第一个符合条件的元素而非索引，但我们可以结合正则匹配逻辑，再通过小技巧拿到对应的索引值，完全满足你的需求。

实现思路 #

1. 先把array2中的关键词转换成一个正则表达式，这样可以一次性判断元素是否匹配任意关键词（记得转义正则特殊字符，避免匹配出错）；
2. 用Array.find()遍历array1，找到第一个符合正则匹配的元素；
3. 要么通过元素反向查找索引，要么在find()的回调中直接记录索引（后者更高效）。

代码实现方案1：先找元素再取索引 #

这种方式直观易懂，适合简单场景：

const array1 = ['spinach', 'avocado', 'milk', 'beans', 'ham', 'eggs', 'cheese'];
const array2 = ['cheese', 'milk'];

// 定义正则转义函数，处理关键词中的特殊字符
const escapeRegex = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// 构建匹配任意关键词的正则模式
const keywordPattern = array2.map(escapeRegex).join('|');
// 用^和$确保是完全匹配元素
const matchRegex = new RegExp(`^(${keywordPattern})$`);

// 找到第一个匹配的元素
const matchedItem = array1.find(item => matchRegex.test(item));

// 获取索引（无匹配项时返回-1）
const firstMatchIndex = matchedItem ? array1.indexOf(matchedItem) : -1;

console.log(firstMatchIndex); // 输出：2

代码实现方案2：在find()回调中直接记录索引 #

这种方式不需要额外遍历数组找索引，性能更优：

const array1 = ['spinach', 'avocado', 'milk', 'beans', 'ham', 'eggs', 'cheese'];
const array2 = ['cheese', 'milk'];

const escapeRegex = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const keywordPattern = array2.map(escapeRegex).join('|');
const matchRegex = new RegExp(`^(${keywordPattern})$`);

let firstMatchIndex = -1;
array1.find((item, index) => {
  const isMatch = matchRegex.test(item);
  if (isMatch) {
    firstMatchIndex = index;
    return true; // 找到匹配项后终止遍历
  }
  return false;
});

console.log(firstMatchIndex); // 输出：2

注意事项 #

• 完全匹配vs部分匹配：上面的正则用了^和$，确保是完全匹配元素（比如不会把'milky'误判为匹配'milk'）。如果需要部分匹配（只要元素包含关键词即可），去掉^和$就行；
• 正则特殊字符转义：如果你的关键词里包含.、*这类正则特殊字符，一定要用escapeRegex函数转义，否则会导致匹配逻辑出错。

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