如何用JavaScript的for...of循环处理数组对象并重置val值

需求说明 #

给定对象数组listItem和参数paramId，需完成以下操作：

• 若数组中存在对象满足id === paramId且color === 'red'：
  1. 将该对象的val设为null
  2. 把该对象在数组中之后的所有元素的val依次替换为：原匹配对象的val、原匹配对象的val+1、原匹配对象的val+2……
• 必须使用for...of循环实现逻辑

示例 #

示例1 #

输入代码：

var paramId = 14
const listItem = [
  { id: 10, val: null, color: 'blue' },
  { id: 13, val: 1, color: 'black' },
  { id: 14, val: 2, color: 'red' },
  { id: 25, val: 3, color: 'yellow' }, 
  { id: 43, val: 5, color: 'green' },
];

预期输出：

[
  { id: 10, val: null, color: 'blue' },
  { id: 13, val: 1, color: 'black' },
  { id: 14, val: null, color: 'red' }, // 修改val为null
  { id: 25, val: 2, color: 'yellow' }, // 原val3替换为原匹配对象的val（2）
  { id: 43, val: 3, color: 'green' }, // 原val5替换为原匹配对象的val+1（3）
];

示例2 #

输入代码：

var paramId = 25
const listItem = [
  { id: 10, val: null, color: 'blue' },
  { id: 13, val: 1, color: 'black' },
  { id: 14, val: 2, color: 'yellow' },
  { id: 25, val: 3, color: 'red' }, 
  { id: 23, val: 4, color: 'green' },
  { id: 43, val: 5, color: 'green' },
];

预期输出：

[
  { id: 10, val: null, color: 'blue' },
  { id: 13, val: 1, color: 'black' },
  { id: 14, val: 2, color: 'yellow' },
  { id: 25, val: null, color: 'red' }, // 修改val为null
  { id: 23, val: 3, color: 'green' }, // 原val4替换为原匹配对象的val（3）
  { id: 43, val: 4, color: 'green' }, // 原val5替换为原匹配对象的val+1（4）
];

用户尝试的代码及问题 #

用户初始代码：

const getByIdandColor =  list.find(e=>e.id === paramId and e.color === 'red')

for (const item of listItem) {
   if(item.id === paramId && item.color === 'red') {
     ...item,
     val: null
   } else if(item.color !== 'red' && item.id >= getByIdandColor.id) {
      ...item,
     val: val +1
   }
}

存在的问题：

• JavaScript中逻辑与运算符是&&，不是and
• 直接使用...item, val: null无法修改原对象，需直接赋值item.val = null
• 判断后续元素的条件错误：应按数组顺序（匹配元素之后的所有元素），而非按id大小比较
• 未记录匹配对象的原始val，无法计算后续元素的新val

正确实现代码 #

function updateList(listItem, paramId) {
  let matchVal = null;
  let hasPassedMatch = false;
  let increment = 0;

  // 先获取匹配元素的原始val
  for (const item of listItem) {
    if (item.id === paramId && item.color === 'red') {
      matchVal = item.val;
      break;
    }
  }

  // 遍历修改数组元素
  for (const item of listItem) {
    if (item.id === paramId && item.color === 'red') {
      item.val = null;
      hasPassedMatch = true;
      increment = 0;
    } else if (hasPassedMatch && matchVal !== null) {
      item.val = matchVal + increment;
      increment++;
    }
  }

  return listItem;
}

// 测试示例1
var paramId1 = 14
const listItem1 = [
  { id: 10, val: null, color: 'blue' },
  { id: 13, val: 1, color: 'black' },
  { id: 14, val: 2, color: 'red' },
  { id: 25, val: 3, color: 'yellow' }, 
  { id: 43, val: 5, color: 'green' },
];
console.log(updateList(listItem1, paramId1));

// 测试示例2
var paramId2 = 25
const listItem2 = [
  { id: 10, val: null, color: 'blue' },
  { id: 13, val: 1, color: 'black' },
  { id: 14, val: 2, color: 'yellow' },
  { id: 25, val: 3, color: 'red' }, 
  { id: 23, val: 4, color: 'green' },
  { id: 43, val: 5, color: 'green' },
];
console.log(updateList(listItem2, paramId2));

代码逻辑说明 #

1. 第一次遍历数组，定位符合条件的元素，记录其原始val值
2. 第二次遍历数组：
   • 遇到匹配元素时，将val设为null，开启后续元素修改标记，并初始化递增计数器
   • 标记开启后，依次将后续元素的val设为原始匹配值 + 递增数，每处理一个元素计数器加1
3. 返回修改后的数组

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