几种简单应用场景的优化

前言

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

查找值是否存在

先写一个最简单的

新手的写法

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);
相关推荐
mapbar_front41 分钟前
面试问题—上家公司的离职原因
前端·面试
昔人'1 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'1 小时前
css `dorp-shadow`
前端·css
流***陌1 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
可触的未来,发芽的智生2 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
烛阴2 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python
前端开发爱好者2 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
why技术2 小时前
从18w到1600w播放量,我的一点思考。
java·前端·后端
欧阳呀2 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
清风徐来QCQ2 小时前
css总结
前端