Vue+TypeScript中用forEach查找JSON值的键并修改对应值

直接通过遍历checkedData提取掩码前缀与目标键，完成映射计算后更新tracelogMaskData，Vue+TypeScript环境下的实现代码如下：

// 初始化数据
const checkedData = { 0: 'infoclient', 1: 'warnmanager', 2: 'errorserver', 3: 'warnpublic', 4: 'errornetwork' };
const masks = ['info', 'warn', 'error', 'threadentry', 'tracefunc'];
const tracelogMaskData = { client: 8, manager: 15, server: 7, public: 18, network: 6 };

// 遍历处理每个checkedData项
Object.values(checkedData).forEach(item => {
  // 匹配当前项对应的mask前缀
  const matchedMask = masks.find(mask => item.startsWith(mask));
  if (!matchedMask) return; // 无匹配项则跳过

  // 获取mask索引并计算新值
  const maskIndex = masks.indexOf(matchedMask);
  const newValue = 2 ** maskIndex;

  // 提取tracelogMaskData对应的键并更新值
  const targetKey = item.replace(matchedMask, '') as keyof typeof tracelogMaskData;
  tracelogMaskData[targetKey] = newValue;
});

console.log(tracelogMaskData);
// 输出结果：{ client: 1, manager: 2, server: 4, public: 2, network: 4 }

核心逻辑说明 #

• 遍历简化：用Object.values()直接获取checkedData的所有值，跳过无意义的数字键，简化遍历流程
• 掩码匹配：通过startsWith()快速定位当前项对应的掩码前缀，再用indexOf()拿到掩码索引
• 类型安全：用as keyof typeof tracelogMaskData做TypeScript类型断言，确保提取的目标键符合tracelogMaskData的键类型
• 值更新：直接通过对象键赋值完成替换，用ES6指数运算符**替代Math.pow，代码更简洁

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