使数组上的值匹配更快？

Question

这是我的代码

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  devices = ['x', 'y', 'z'];
  device;
  constructor(public navCtrl: NavController) {
    this.device = 'a';
    for(let i = 0; i<this.devices.length; i++){
      if(this.device == this.devices[i]){
        console.log('Match');
      } else {
        console.log('No matches');
      }
    }
  }
}

我在想，如果我的设备列表变得太长，那么匹配会明显变慢。所以想问问有没有更好更快更有效的方法来检查数组中是否存在值。

我想要实现的是出勤率。

我的应用会扫描 id，然后检查它是否在我的列表中。 如果匹配，我会将布尔值设置为 true（用于测试目的） 所说的布尔值将在我的列表中。 像这样的

device = {
 name: '-K8d34fsd2',
 attendance: true
};

这是我尝试过的

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  devices = [
    {
      id: 'qwerty123',
      attendance: false
    },
    {
      id: 'zxcvb123',
      attendance: false
    },
  ];
  device;
  constructor(public navCtrl: NavController) {
    this.device = 'qwerty123';
    // for(let i = 0; i<this.devices.length; i++){
    //   if(this.device == this.devices[i]){
    //     console.log('Match');
    //   } else {
    //     console.log('No matches');
    //   }
    // }

      if(this.devices.id.indexOf(this.device) > -1){
        console.log('Match');
      } else {
        console.log('No matches');
      }
  }
}

Answer 1

您可以使用 Array.prototype.map() 在 O(n) time complexity 创建一个更新的出勤列表。

请参阅下面的实际示例。

// Input.
const devices = [{id: 'A', attendance: false}, {id: 'B', attendance: false}, {id: 'C', attendance: false}]
const deviceId = 'B'

// Update Device Attendance.
const updateDeviceAttendance = (devices, deviceId) => devices.map(x => {
  if (x.id == deviceId) return {...x, attendance: true}
  return x
})

// Ouput + Proof.
const output = updateDeviceAttendance(devices, deviceId)
console.log(output)

尽管使用对象而不是数组可以实现 O(1) 时间复杂度。

// Input.
const devices = {'A': {attendance: false}, 'B': {attendance: false}, 'C': {attendance: false}}
const deviceId = 'B'

// Update Device Attendance.
const updateDeviceAttendance = (devices, id) => ({...devices, [id]: {id, attendance: true}})

// Ouput + Proof.
const output = updateDeviceAttendance(devices, deviceId)
console.log(output)

Answer 2

由于您尝试根据特定 ID 查找项目，因此最快的数组不是数组，而是对象：

devices = {
   qwerty123: {attendance: true, otherData: "whatever"}, 
   zxcvb123:  {attendance: false, etcetera: "etcetera"}
}

现在您的“搜索”只是一个键查找：

devices.querty123  // returns {attendance: true, otherData: "whatever"}
devices.notarealkey // returns undefined

// when searching with a variable:
this.device = 'qwerty123';
devices[this.device] // returns the same as devices.querty123

Answer 3

虽然该社区的乐于助人的人输入并提交了答案，但我也试图找到一个来贡献。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  devices = [
    {
      id: 'qwerty123',
      attendance: false
    },
    {
      id: 'zxcvb123',
      attendance: false
    },
  ];
  device;
  constructor(public navCtrl: NavController) {
    this.device = 'qwerty123';

    let result = this.devices.find( device => device.id === this.device);
    console.log(result);
  }
}

find 方法返回请求的对象，如果没有，则返回未定义的对象。 至于速度，我还没有测试过。我想其他人可能也想知道。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Answer 4

你有一些选择。

Array.indexOf() 这比遍历整个数组并检查每个元素是否符合条件要好得多（slighthly faster using your example on a benchmark）。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  devices = ['x', 'y', 'z'];
  device;
  constructor(public navCtrl: NavController) {
    this.device = 'a';
    if(this.devices.indexOf(this.device) > -1){
        console.log('Match');
    } else {
        console.log('No matches');
    }

  }
}

如果你可以支持 ES2016，Array.includes() 比 indexOf() (see the same benchmark) 稍好，并且在语法上更容易阅读。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  devices = ['x', 'y', 'z'];
  device;
  constructor(public navCtrl: NavController) {
    this.device = 'a';
    if(this.devices.includes(this.device)){
        console.log('Match');
    } else {
        console.log('No matches');
    }

  }
}

编辑：由于 OP 对原始问题的编辑，我将列出使用对象进行搜索的可能方法：

1 - for 循环：

var test = [{name:'asdfasafdx', attendance: true}, {name:'fdsafdsay', attendance: true}, {name:'sdfasdfasz', attendance: true}];

var device = {name:'fdwoierqea'};

for(let i = 0; i < test.length; i++){
      if(device.name == test[i].name){
        console.log('Match');
      } else {
        console.log('No matches');
      }
}

2 - Array.filter() (faster)

var test = [{name:'asdfasafdx', attendance: true}, {name:'fdsafdsay', attendance: true}, {name:'sdfasdfasz', attendance: true}];

var device = {name:'fdwoierqea'};

if(test.filter(value => value.name === device.name).length > 0){
        console.log('Match')

} else {
        console.log('No matches');
}