如何修改数组内对象的属性？修复JS卡片翻转功能matched字段不更新问题

核心问题点 #

• 现有逻辑仅在单次翻牌后刚好有2张可见卡片时触发匹配校验，没有补充匹配失败后的卡片隐藏逻辑，也没有处理多卡连续翻开后的状态重置问题
• 你单次调用cardFlip(3)仅激活了1张卡片的可见状态，自然不会触发匹配判断分支，属于符合当前逻辑的表现
• 原函数直接操作全局state变量，不符合纯函数规范，多次调用容易出现状态污染问题

修复后代码 #

// 原始状态定义不变
let state = [
  {id: 0, contents: 'Provider', visible: false, matched: false}, 
  {id: 1, contents: 'Provider', visible: false, matched: false}, 
  {id: 2, contents: 'selector', visible: false, matched: false}, 
  {id: 3, contents: 'selector', visible: false, matched: false}, 
  {id: 4, contents: 'useSelector()', visible: false, matched: false}, 
  {id: 5, contents: 'useSelector()', visible: false, matched: false}, 
  {id: 6, contents: 'useDispatch()', visible: false, matched: false}, 
  {id: 7, contents: 'useDispatch()', visible: false, matched: false}, 
  {id: 8, contents: 'Pure Function', visible: false, matched: false}, 
  {id: 9, contents: 'Pure Function', visible: false, matched: false}, 
  {id: 10, contents: 'react-redux', visible: false, matched: false}, 
  {id: 11, contents: 'react-redux', visible: false, matched: false}, 
]; 

// 改造后的翻牌函数，将state作为入参，保证纯函数特性
const cardFlip = (currentState, id) => {
  const flipState = currentState.map(item => ({...item}));
  // 翻转当前选中卡片可见状态
  flipState[id].visible = true;

  // 筛选所有已翻开且未匹配的卡片
  const visibleUnmatched = flipState.filter(card => card.visible && !card.matched);
  
  // 凑够2张时执行匹配逻辑
  if (visibleUnmatched.length === 2) {
    const [cardA, cardB] = visibleUnmatched;
    if (cardA.contents === cardB.contents) {
      // 匹配成功：标记为已匹配
      flipState[cardA.id].matched = true;
      flipState[cardB.id].matched = true;
      // 匹配成功后可按需选择是否保持可见，这里统一隐藏符合常规翻牌逻辑
      flipState[cardA.id].visible = false;
      flipState[cardB.id].visible = false;
    } else {
      // 匹配失败：两张都翻回隐藏状态
      flipState[cardA.id].visible = false;
      flipState[cardB.id].visible = false;
    }
  }

  return flipState;
}

// 测试方法：连续翻id为2和3的两张卡片
state = cardFlip(state, 2);
state = cardFlip(state, 3);
console.log(state);

效果说明 #

连续调用两次翻牌函数后，id为2和3的两张内容相同的卡片matched属性会自动设置为true，符合翻牌匹配的预期效果。

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