如何比对两个数组同索引位置元素并统计匹配项数量？

需要统计两个数组中，索引位置相同且值相等的元素总个数，将最终统计得到的匹配总数存入React state中。
参考示例：

const [score, setScore] = React.useState(0)

const selections = ["one", "two", "three"]
const allCorrectAnswers = ["four", "two", "three"]
// 上述示例预期匹配总数为2

你写的实现存在三个核心问题：

• 比较逻辑类型错误：allCorrectAnswers.map(eachAnswer => eachAnswer) 执行后会返回一个和allCorrectAnswers内容完全一致的新数组，你是拿单个字符串类型的选项值，和整个数组做===全等比较，二者数据类型完全不同，判断结果永远为false，计分逻辑根本不会触发。
• 遍历方法使用不当：Array.map的设计目的是遍历原数组、返回映射后的新数组，不适合用来执行state更新这类带副作用的操作。就算比较逻辑写对，每匹配到一个元素就调用一次setScore，会触发多次组件重渲染，存在不必要的性能损耗。
• 缺少索引匹配逻辑：你遍历selections时没有获取当前遍历项的索引，根本取不到allCorrectAnswers同索引位置的元素做对比，无法实现「同位置元素匹配」的要求。

推荐先一次性统计出所有匹配的总数量，再单次调用state更新方法完成赋值，只触发一次重渲染，逻辑更清晰性能更好：

const [score, setScore] = React.useState(0)

const selections = ["one", "two", "three"]
const allCorrectAnswers = ["four", "two", "three"]

function checkSelectedAnswer(selections, allCorrectAnswers) {
  // 遍历selections，筛选出同索引位置值相等的元素，数组长度就是匹配总数
  const matchTotal = selections.filter((choice, idx) => choice === allCorrectAnswers[idx]).length
  // 单次更新state即可
  setScore(matchTotal)
}

// 调用校验函数
checkSelectedAnswer(selections, allCorrectAnswers)
// 执行后score的值为2，符合预期

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