几种简单应用场景的优化

前言

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

查找值是否存在

先写一个最简单的

新手的写法

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);
相关推荐
浏览器API调用工程师_Taylor7 分钟前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
东哥很忙XH31 分钟前
flutter开发的音乐搜索app
android·javascript·flutter
前端Hardy1 小时前
HTML&CSS&JS:抖音爆火的满屏“关心弹幕”酷炫卡片,已经帮你打包好了,快来体验吧!
前端·javascript·css
江城开朗的豌豆1 小时前
我的Vue项目胖成球了!用Webpack给它狠狠瘦个身
前端·javascript
WebInfra1 小时前
Rspack 1.6 发布:让打包产物更小、更纯净
前端·javascript·前端框架
Mintopia1 小时前
⚙️ Next.js 接口限流与审计全攻略 —— 用 @upstash/ratelimit 打造优雅“闸门”
前端·javascript·全栈
Mintopia1 小时前
🌐 实时翻译 + AIGC:Web跨语言内容生成的技术闭环
前端·javascript·aigc
Cache技术分享1 小时前
225. Java 集合 - List接口 —— 记住顺序的集合
前端·后端
前端开发爱好者1 小时前
Vite+ 获得 1250万美元的 A 轮融资,生态加速!
前端·javascript
Larcher1 小时前
JS 变量声明避坑指南:彻底搞懂 var/let/const 的 3 大核心区别与最佳实践
前端·javascript·node.js