JavaScript提示有效地搜索长数组并保存性能
#javascript #react #arrays #objects

让我们假设我们有100个元素

const arr = [
  {
    id: 1,
    value: "Hello 1",
  },
  {
    id: 2,
    value: "Hello 2",
  },
  .....
  {
    id: 100,
    value: "Hello 100",
  },
];

当我们尝试通过ID中搜索此数组中的任何元素时,例如

const element50 = arr.find(el => el.id === 50);

这里的时间复杂性是 o(n) n 是数组元素的数量,这意味着在最坏的情况下,如果我要寻找最后一个元素,它将在所有数组元素上循环循环以找到最后一个元素,如果我们在此数组中进行了很多搜索,它将非常严重地影响应用程序性能。

我们在这里可以做的是将此数组映射为键和值的对象,密钥是我们搜索的项目,在我们的情况下,它是 id ,值是其余的属性。 ..

所以让我们创建我们的新对象

const arr = [
  {
    id: 1,
    value: "Hello 1",
  },
  {
    id: 2,
    value: "Hello 2",
  },
  {
    id: 100,
    value: "Hello 100",
  },
];
let arrayMap = {};
arr.forEach(el => {arrayMap[el.id] = el});

现在我们的对象 arraymap 将像这样

{
  1: {
    id: 1,
    value: "Hello 1",
  },
  2: {
    id: 2,
    value: "Hello 2",
  },
  ....
  100: {
    id: 100,
    value: "Hello 2",
  },
}

所以现在,如果我们想要第50个元素,我们将执行此操作

const element50 = arrayMap[50];

现在的时间复杂性将为o(1),它不会在其他元素上循环以找到我们想要的元素,它将它作为来自我们新对象的属性。.通过此,我们将保存一个很多操作,特别是如果我们在大型数组中进行了很多搜索。

因此,在这里,我们遵循的步骤以使阵列更有效地进行搜索

  1. 创建一个新的空对象
  2. 将我们的数组映射为对象中的键和值,键是我们通过搜索的,而值是对象本身
  3. 我们使用对象方括号搜索, ex:obj [id]

使用此技巧时唯一的一个限制是我们只能搜索一个确切的值,例如,我们不能使用它来搜索包含特定文本的元素,但是我们可以为一个准确的元素做等于特定的文本。

结论:

  1. 在数组中搜索的时间复杂性为o(n)
  2. 索引对象属性的时间复杂性为o(1)
  3. 通过将我们的数组映射到一个对象,然后通过索引此对象找到元素,我们将时间复杂性从O(n)降低到O(1)

快乐编码!