使用findindex优化代码 -- 实例

我这个地方的场景是,现在有数组 ,我要点击一个事件发请求获得其中一条里面 ,需要替换的某个元素的值,就是说用响应回来的值替换原有的这一个,原来我就没想到 ,用的就是遍历的方法(map)找到对应的去替换;

使用findindex不需要你去遍历,你找到需要替换的那一条 获取他的索引,然后用这个索引去在原数组找到后再替换

渲染速度极大提升!

before
  const showMessage = async (value: any) => {
      listDetailAll.map(item => {
        if (item.id == value.id) {
          item.eyeLoading = true
        }
      })
      setListDetailAll([...listDetailAll])
    const res = await geteye(value.id)
    if (res != undefined && res.code === 200) {
      let data = res.result
      listDetailAll.map(item => {
        if (item.id == value.id) {
          item.showmessage = true
          item.idCard = data.idCard
        }
      })
      setListDetailAll([...listDetailAll])
    } else {
      console.log(res)
    }
  }  

在优化前的 showMessage 函数中使用了 map 函数遍历数组来更新对应的元素,这样会导致每个元素都会重新渲染,而实际上只需要更新对应元素即可。
优化后的 showMessage 函数中使用了 findIndex 函数来查找对应的元素,并只更新该元素,避免了重复渲染。

after
const showMessage = useCallback(async (value: any) => {
    const index = listDetailAll.findIndex(item => item.id === value.id)
    if (index !== -1) {
      listDetailAll[index].eyeLoading = true
      setListDetailAll([...listDetailAll])
  
      const res = await geteye(value.id)
      if (res != undefined && res.code === 200) {
        let data = res.result
        listDetailAll[index].showmessage = true
        listDetailAll[index].idCard = data.idCard
        setListDetailAll([...listDetailAll])
      } else {
        console.log(res)
      }
    }
  }, [listDetailAll])

解决问题之后再区别一下map和findindex,以便咱们理解
"map"函数的时间复杂度一般为O(n),其中n是要映射的元素个数。这是因为map函数只需要遍历一次待映射的元素即可,在每个元素上执行相同的操作。因此,map函数的时间复杂度与待映射元素的个数成正比。
需要注意的是,如果在map函数中使用了一个复杂度为O(1)的操作,那么整个map函数的复杂度仍然是O(n),因为它仍然需要遍历所有元素。
此外,map函数的空间复杂度也为O(n),因为它需要存储映射后的结果。

"findIndex"函数通常是一个数组方法,用于在数组中查找符合特定条件的元素,并返回该元素在数组中的索引。
其时间复杂度通常为O(n),其中n是数组的长度。这是因为在最坏情况下,需要遍历整个数组才能找到符合条件的元素。
然而,在最好情况下,即第一个元素就满足条件时,复杂度为O(1)。因此,平均来说,"findIndex"函数的时间复杂度可以近似地看作O(n/2),或者简单地记作O(n)。
需要注意的是,复杂度还会受到其他因素的影响,例如搜索条件的复杂度、数组的大小等。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值