Vue.js TypeScript遍历JSON关联数组匹配掩码索引及代码优化

核心优化思路 #

1. 预构建Mask索引映射表：将masks转换为键为mask字符串、值为对应索引的对象，把每次查找的时间复杂度从O(n)降到O(1)，大幅提升效率。
2. 明确类型定义：补充TypeScript类型注解，消除类型警告，同时让变量语义更清晰。
3. 简化遍历逻辑：直接遍历checkedData的条目，避免嵌套循环和重复变量声明，让逻辑一目了然。

实现代码（Vue3 + TypeScript） #

import { ref } from 'vue'

// 定义类型，约束变量合法值
type LogKey = 'client' | 'manager' | 'server' | 'public' | 'network'
type MaskType = 'info' | 'warn' | 'error' | 'threadentry' | 'tracefunc'

// 初始化变量
const logkeys = ref<LogKey[]>(['client', 'manager', 'server', 'public', 'network'])
const checkedData = ref<Record<number, string>>({
  0: 'infoclient',
  1: 'warnmanager',
  2: 'errorserver',
  3: 'warnpublic',
  4: 'errornetwork'
})
const masks = ref<MaskType[]>(['info', 'warn', 'error', 'threadentry', 'tracefunc'])

const applyChanges = () => {
  // 预构建mask到索引的映射表，一次构建多次复用
  const maskIndexMap = Object.fromEntries(
    masks.value.map((mask, index) => [mask, index])
  )

  // 存储最终结果：checkedData的键 -> 对应mask的索引
  const result: Record<number, number> = {}

  // 遍历checkedData的每个键值对
  Object.entries(checkedData.value).forEach(([key, value]) => {
    // 找到当前值包含的mask
    const matchedMask = masks.value.find(mask => value.includes(mask))
    if (matchedMask) {
      result[Number(key)] = maskIndexMap[matchedMask]
    }
    // 可选：处理未匹配到mask的情况
    // else {
    //   result[Number(key)] = -1 // 或其他默认值
    // }
  })

  console.log('最终映射结果:', result)
  // 后续可根据result执行业务逻辑
}

代码说明 #

• maskIndexMap：一次性构建映射表，避免每次查找都遍历masks数组，在masks元素较多时性能提升明显。
• 类型注解：通过自定义类型约束变量取值范围，TypeScript会自动检查赋值合法性，消除类型警告的同时减少潜在错误。
• 遍历逻辑：用Object.entries直接遍历键值对，配合find方法快速匹配mask，逻辑简洁无冗余，可读性更强。
• 兼容性：如果不需要TypeScript，去掉类型注解即可直接在JavaScript环境运行。

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