在数组中查找元素的最佳方法是什么？

Question

我有一个包含患者列表的数组，他们都有唯一的 ID。

 this.state = { 
  patients = [
        {id: "1", name: "Joe", age: 6, location: ''},
        {id: "12", name: "Her", age: 2, location: ''},
        {id: "1123", name: "Jin", age: 10, location: ''},
        {id: "11234", name: "Nick", age: 23, location: ''},
        {id: "12345", name: "Fil", age: 50, location: ''},
    ];

当用户点击按钮时，它会在回调中发送患者唯一 ID 和位置。然后，我使用唯一 ID 在患者数组中查找患者并更新该患者的位置。我在数组中找到患者的方式是使用 map 循环遍历患者数组，检查是否 patientId 匹配数组中的 id 并添加该患者的位置。然而，地图总是会遍历每一个 patients array 中的耐心，所以如果数组变大，不必要的循环也会很昂贵。我知道还有其他方法可以在 数组，即findIndex() method，但它比地图更好吗？这个用例的最佳方法是什么？

 <Button 
    id={location} 
    onClick={() => addPatientLocation(patientId, location}
 > 
    {location}
</Button>

检查患者 ID 是否匹配并更新患者详细信息的功能

  addPatientLocation(patientId, location) {
        this.setState(prevState => ({

            patients: prevState.patients.map(p => {
                if (p.id === patientId) {
                    return { ...p, location: location };
                }
                return p;
            }),
        }));
    }

Answer 1

我的示例使用了findIndex。我对 findIndex 与 map 函数进行了基准测试，请参见下面的结果。基准测试表明 findIndex 要快得多。

var t1 = performance.now();
const patients = [
        {id: "1", name: "Joe", age: 6, locaiton: ''},
        {id: "12", name: "Her", age: 2, locaiton: ''},
        {id: "1123", name: "Jin", age: 10, locaiton: ''},
        {id: "11234", name: "Nick", age: 23, locaiton: ''},
        {id: "12345", name: "Fil", age: 50, locaiton: ''},
    ];
 
const index = patients.findIndex((elem) => elem.id =="11234");
patients[index].location="Location";
console.log(patients[index]);
var t2 = performance.now();   
console.log("time consumption", (t2 - t1));

var t1 = performance.now();
const patients = [
        {id: "1", name: "Joe", age: 6, locaiton: ''},
        {id: "12", name: "Her", age: 2, locaiton: ''},
        {id: "1123", name: "Jin", age: 10, locaiton: ''},
        {id: "11234", name: "Nick", age: 23, locaiton: ''},
        {id: "12345", name: "Fil", age: 50, locaiton: ''},
    ];
 
const obj = patients.map((elem, index) => {
  if (elem.id =="11234") {
    return { ...elem, locaiton: "Location" };
  }
  return elem;
});
console.log(obj[3]);
var t2 = performance.now();   
console.log("time consumption", (t2 - t1));

Answer 2

你可以使用 findIndex

let patients = [...this.state.patients]
let index = patients.findIndex(t=>t.id == patientId)
patients[index] = { ...patients[index], location: value }
this.setState({patients})

Answer 3

你能用 Map 代替 Array 吗？它将更快地通过 id 获取患者。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map