动态缓存查找

在这个解决方案中，当我们搜索某个对象时，我们将其保存在缓存中。这是“始终搜索解决方案”和“为预先计算的每个对象创建哈希图”之间的中间点。

让cachedFind=（（）=>{let cache=new Map（）；return（arr，id，el=null）=>cache.get（id）||（el=arr.find（o=>o.id==id），cache.set（id，el），el）；})();// ---------//测试// ---------let myArray=[…Array（100000）].map（（x，i）=>（｛‘id‘：‘$｛i｝‘，‘foo‘：‘bar_$｛i｝‘｝））；//示例用法console.log（cachedFind（myArray，'1234'）.foo）；//基准让板凳=（id）=>{console.time（'time for'+id）；console.log（cachedFind（myArray，id）.foo）；//查找console.timeEnd（'time for'+id）；}console.log（'-----无缓存-----'）；工作台（50000）；工作台（79980）；工作台（99990）；console.log（'-----缓存-----'）；工作台（79980）；//高速缓存的工作台（99990）；//高速缓存的

上述findById函数的通用和更灵活版本：

// array = [{key:value},{key:value}]
function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

var array = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var result_obj = objectFindByKey(array, 'id', '45');

ECMAScript 2015（JavaScript ES6）提供find（）数组上的方法：

var myArray=[｛id:1，name:“bob”｝，｛id:2，名称：“dan”｝，｛id:3，名称：“barb”｝，]//抓取与id“2”匹配的Array项var item=myArray.find（item=>item.id===2）；//打印console.log（item.name）；

它在没有外部库的情况下工作。但是，如果您想要更旧的浏览器支持，您可能需要包含此polyfill。

动态缓存查找

在这个解决方案中，当我们搜索某个对象时，我们将其保存在缓存中。这是“始终搜索解决方案”和“为预先计算的每个对象创建哈希图”之间的中间点。

让cachedFind=（（）=>{let cache=new Map（）；return（arr，id，el=null）=>cache.get（id）||（el=arr.find（o=>o.id==id），cache.set（id，el），el）；})();// ---------//测试// ---------let myArray=[…Array（100000）].map（（x，i）=>（｛‘id‘：‘$｛i｝‘，‘foo‘：‘bar_$｛i｝‘｝））；//示例用法console.log（cachedFind（myArray，'1234'）.foo）；//基准让板凳=（id）=>{console.time（'time for'+id）；console.log（cachedFind（myArray，id）.foo）；//查找console.timeEnd（'time for'+id）；}console.log（'-----无缓存-----'）；工作台（50000）；工作台（79980）；工作台（99990）；console.log（'-----缓存-----'）；工作台（79980）；//高速缓存的工作台（99990）；//高速缓存的

使用find（）方法：

myArray.find(x => x.id === '45').foo;

来自MDN：

如果数组中的元素满足所提供的测试函数，find（）方法将返回数组中的第一个值。否则返回undefined。

如果要查找其索引，请使用findIndex（）：

myArray.findIndex(x => x.id === '45');

来自MDN：

findIndex（）方法返回数组中满足所提供测试函数的第一个元素的索引。否则返回-1。

如果要获取匹配元素的数组，请改用filter（）方法：

myArray.filter(x => x.id === '45');

这将返回一个对象数组。如果要获取foo财产数组，可以使用map（）方法：

myArray.filter(x => x.id === '45').map(x => x.foo);

附带说明：旧浏览器（如IE）不支持find（）或filter（）和arrow函数等方法，因此如果您想支持这些浏览器，应该使用Babel（带有polyfill）来转换代码。

表演

今天2020.06.20我在Chrome 81.0、Firefox 77.0和Safari 13.1上对MacOs High Sierra进行了测试，以获得所选的解决方案。

使用预先计算的解决方案的结论

具有预计算（K，L）的解决方案比其他解决方案（快得多），不会与它们进行比较-可能它们使用了一些特殊的内置浏览器优化

令人惊讶的是，基于Map（K）的Chrome和Safari解决方案比基于对象｛｝（L）的解决方案快得多令人惊讶的是，Safari上基于对象｛｝的小型阵列解决方案（L）比传统的（E）慢令人惊讶的是，Firefox上基于Map（K）的小阵列解决方案比传统的（E）慢

搜索对象始终存在时的结论

使用传统for（E）的解决方案对于小阵列最快，对于大阵列最快对于大型阵列，使用缓存（J）的解决方案是最快的，而对于小型阵列，则是中等速度基于find（A）和findIndex（B）的解决方案对于小阵列很快，对于大阵列则很快基于$.map（H）的解决方案在小型阵列上是最慢的基于reduce（D）的解决方案在大型阵列上最慢

搜索对象从不存在时的结论

基于传统for（E）的解决方案在小型和大型阵列上都是最快的（除了Chrome小型阵列，后者速度第二快）基于reduce（D）的解决方案在大型阵列上最慢使用缓存（J）的解决方案是中等速度的，但如果我们将具有空值的键也保存在缓存中，则可以加快速度（这里没有这样做，因为我们希望避免在搜索许多不存在的键时在缓存中无限制地消耗内存）

细节

对于解决方案

无需预先计算：ABCDEFGH我J（J解决方案使用“内部”缓存，其速度取决于搜索元素重复的频率）带有预先计算KL

我进行了四次测试。在测试中，我希望在10次循环迭代中找到5个对象（对象ID在迭代过程中不会改变）-所以我调用测试方法50次，但只有前5次具有唯一的ID值：

小数组（10个元素）和搜索对象始终存在-您可以在此处执行大数组（10k个元素）和搜索对象始终存在-您可以在此处执行小数组（10个元素）和搜索对象从不存在-您可以在此处执行大数组（10k个元素）和搜索对象从不存在-您可以在这里执行

测试代码如下

函数A（arr，id）{返回arr.find（o=>o.id==id）；}函数B（arr，id）{设idx=arr.findIndex（o=>o.id==id）；返回arr[idx]；}函数C（arr，id）{返回arr.filter（o=>o.id==id）[0]；}函数D（arr，id）{return arr.reduce（（a，b）=>（a.id==id&&a）||（b.id==id&&b））；}函数E（arr，id）{对于（var i=0；i<arr.length；i++）如果（arr[i].id==id）返回arr[i]；返回null；}函数F（arr，id）{var retObj={}；$.each（arr，（索引，obj）=>{如果（obj.id==id）｛retObj=对象；return false；}});返回retObj；}函数G（arr，id）{return$.grep（arr，e=>e.id==id）[0]；}函数H（arr，id）{return$.map（myArray，函数（val）{返回val.id==id？val：空；})[0];}函数I（arr，id）{return _.find（arr，o=>o.id==id）；}设J=（（）=>{let cache=new Map（）；返回函数J（arr，id，el=null）｛返回cache.get（id）||（el=arr.find（o=>o.id==id），cache.set（id，el），el）；}})();函数K（arr，id）{return mapK.get（id）}函数L（arr，id）{返回mapL[id]；}// -------------//测试// -------------console.log（'查找id=5'）；myArray=[…Array（10）].map（（x，i）=>（{'id'：`${i}`，'foo'：`bar_${i}`））；const mapK=新地图（myArray.Map（el=>[el.id，el]））；常量mapL={}；myArray.forEach（el=>mapL[el.id]=el）；[A，B，C，D，E，F，G，H，I，J，K，L].forEach（F=>console.log（`${F.name}:${JSON.stringify（F（myArray，'5'））}`））；console.log（'hole array'，JSON.stringify（myArray））；<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js“></script><script src=“https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js“></script>此代码段仅显示经过测试的代码

搜索对象始终存在的小数组的Chrome测试结果示例