几种简单应用场景的优化

前言

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

查找值是否存在

先写一个最简单的

新手的写法

const target = "1";
if (target === "1") {
  // ...
} else if (target === "2") {
  // ...
} else if (target === "3") {
  // ...
}

优点：写起来简单，容易理解

缺点：不利于维护，不利于代码的复用

中手的写法

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

优点：提高了代码的复用性，可维护性

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

老手的写法

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)

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

新手的写法

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

优点：好理解

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

老手的写法

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)

上个案例的扩展

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

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状态

新手的写法

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

缺点：占用更多的内存

老手的写法

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);