多级嵌套数组对象更改key-递归比JSON.stringfy操作字符快近20倍

405 阅读1分钟

1.缘来

一直以为递归代码量多,操作字符代码量少,以为操作字符会更快, 故使用数据实际验证,递归更快

2.使用场景

el-cascader层级数据,将后台字段key更改为label,value

3.处理340条数据时间对比如下

递归新增key: 时间在0.3~0.6ms之间

转字符串(JSON.parse(JSON.stringfy())):时间在10~20ms之间

代码片段

方法一:递归更改或者新增key

console.log('%c 处理340条层级数据,2个方法耗费时间对比','color:red')

console.log('340条数据', val)
console.time()

function rewriteKey(val){
    val.forEach(item => {
      item.label = item.permissionName
      item.value = item.permissionId
      if(item.children){
        rewriteKey(item.children)
      }
    })
}
rewriteKey(val)

console.timeEnd()
console.log('%c 上面为递归方法耗时','color:#409EFF')
console.log('%c 转换后一条数据' + JSON.stringify(val[0]), 'color:#409EFF')

方法二:操作字符,将数组stringfy后,替换key,后转为数组

console.time()
let i = val && JSON.stringify(val).replace(/permissionName/g,'label2')
let i2 = i && i.replace(/permissionId/g, 'value2')
this.parentSelectArr = i2 && JSON.parse(i2)
console.timeEnd()
console.log('%c 上面为先将数组转为字符串,使用replace替换字段名,后转为数组方法耗时','color:#00965e')
console.log('%c 转换后一条数据' + JSON.stringify(this.parentSelectArr[0]), 'color:#00965e')