几种简单应用场景的优化

前言

总结了几种开发时常见的场景优化,我会写出我以前和现在不同的做法让大家更容易理解,希望大家能有所收获。

查找值是否存在

先写一个最简单的

新手的写法

js 复制代码
const target = "1";
if (target === "1") {
  // ...
} else if (target === "2") {
  // ...
} else if (target === "3") {
  // ...
}

优点:写起来简单,容易理解

缺点:不利于维护,不利于代码的复用

中手的写法

js 复制代码
const target = "1";
const arr = ["1", "2", "3", "4", "5"];
if (arr.find(v => v === target)) {
  console.log(`存在${target}`)
} else {
  console.log(`不存在${target}`)
}

优点:提高了代码的复用性,可维护性

缺点:在数据量大且需要重复查询的情况因为需要遍历所以会花费更多的时间计算

老手的写法

js 复制代码
const target = "1";
const hashSet = new Set(["1", "2", "3", "4", "5"]);
if (hashSet.has(target)) {
  console.log(`存在${target}`)
} else {
  console.log(`不存在${target}`)
}

优点:查找速度极快,因为Set是一种基于哈希表的数据结构,它可以快速地根据键值查找元素,其时间复杂度是O(1)

在一个数组对象的结构中多次查找某个对象

新手的写法

js 复制代码
const target = "李四";
const arrUserInfo = [{
  name: "张三",
  age: "10"
}, {
  name: "李四",
  age: "20"
}, {
  name: "王五",
  age: "30"
}]
arrUserInfo.map(v => {
  if (v.name === target) {
    console.log(v)
  }
})

优点:好理解

缺点: 在数据量大且需要重复查询的情况因为需要遍历所以会花费更多的时间计算

老手的写法

js 复制代码
const target = "李四";
const arrUserInfo = [{
  name: "张三",
  age: "10"
}, {
  name: "李四",
  age: "20"
}, {
  name: "王五",
  age: "30"
}]
const nameMap = {}
for (let i = 0; i < arrUserInfo.length; i++) {
  const userInfo = arrUserInfo[i]
  nameMap[userInfo.name] = userInfo
}
console.log(nameMap["target"])

用需要查询的key建一个倒排索引

优点:极快,不需要遍历,从map取值,其时间复杂度是O(1)

上个案例的扩展

如果需要查询的字段是重复的

js 复制代码
const target = "李四";
const arrUserInfo = [{
  name: "张三",
  age: "10"
}, {
  name: "李四",
  age: "20"
}, {
  name: "王五",
  age: "30"
}, {
  name: "王五",
  age: "20"
}]
const nameMap = {}
for (let i = 0; i < arrUserInfo.length; i++) {
  const userInfo = arrUserInfo[i]
  const n = userInfo.name;
  if (nameMap.hasOwnProperty(n)) {
    // 存在相同key
    nameMap[n].push(userInfo)
    continue;
  }
  // 不存在相同key
  nameMap[n] = [userInfo]
}
console.log(nameMap[target])

根据上面的案例做了一些改动,倒排表存储的值为一个数组,如果对应的key有多个就存到数组里

一个列表某一项loading状态

新手的写法

js 复制代码
const list = [
  {
    id: 0
  },
  {
    id: 1
  }
]
list.map(v => {
  v["isLoading"] = false;
})
// 渲染:<li v-for="item in list" v-loading="item.isLoading"></li>

// 更改状态:list[n].isLoading = true

// 移除状态:list.map(v => v.isLoading = false) 或者 list[n] = false

缺点:占用更多的内存

老手的写法

js 复制代码
const list = [
  {
    id: 0
  },
  {
    id: 1
  }
]
const loadingSet = new Set();

// 渲染:<li v-for="item in list" v-loading="loadingSet.has(item.id)"></li>

// 更改状态:loadingSet.add(id)

// 移除状态:loadingSet.delete(id);
相关推荐
这里有鱼汤5 小时前
miniQMT下载历史行情数据太慢怎么办?一招提速10倍!
前端·python
用户21411832636025 小时前
dify案例分享-免费玩转 AI 绘图!Dify 整合 Qwen-Image,文生图 图生图一步到位
前端
IT_陈寒6 小时前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
mCell12 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip12 小时前
Node.js 子进程:child_process
前端·javascript
excel15 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel16 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼18 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping18 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙19 小时前
[译] Composition in CSS
前端·css