发布它们的介绍后&＃xff0c;.map&＃xff08;&＃xff09;和.filter&＃xff08;&＃xff09;如今在代码中与死亡大忌结合使用&＃xff0c;因为“很简单”。 但是盲目使用这些方法是否会在代码中引起性能问题&＃xff1f; 让我们深入了解。 我不会详细介绍这些功能的工作原理&＃xff0c;因为有大量材料可供选择。
[理论警报] 那些熟悉Big&＃39;O&＃39;表示法的人可能知道.map&＃xff08;&＃xff09;和.filter&＃xff08;&＃xff09;在O&＃xff08;n&＃xff09;执行&＃xff0c;其中n是所讨论数组的元素数。
因此&＃xff0c;链接filter&＃xff08;&＃xff09;。map&＃xff08;&＃xff09;表示该执行链的运行时间在最坏的情况下为O&＃xff08;n&＃xff09;&＃43; O&＃xff08;n&＃xff09;。
该死的&＃xff0c;这些现代的扩展使编写性能差的代码变得更加容易。
那么我们该怎么办&＃xff1f;
好吧&＃xff0c;很明显&＃xff0c;这里的问题是原始数组&＃xff08;或其过滤结果&＃xff09;被循环了两次。 弄清楚如何减少&＃xff08;循环…… 提示&＃xff0c;眨眼眨眼 &＃xff09;循环次数&＃xff0c;问题得以解决。
如果您现在要问的是&＃xff0c;这有多困难&＃xff0c;以及如果最终要编写很多样板代码&＃xff0c;请不要担心。
.reduce&＃xff08;&＃xff09;进行救援
reduce方法在数组的每个元素上执行&＃xff08;提供的&＃xff09;reduce函数&＃xff0c;从而产生单个输出值。 但是&＃xff0c;有趣的部分是&＃xff0c;该单个输出值也可以是数组。
因此&＃xff0c;对于我们来说&＃xff0c;实现一个遍历原始数组并一次执行filter&＃xff08;&＃xff09;和map&＃xff08;&＃xff09;动作的函数变得容易。 最好是在映射之前进行过滤&＃xff0c;以提高性能&＃xff08;提示&＃xff1a;要经过的项目数量减少&＃xff09;&＃xff0c;除非有其他原因需要这样做。
因此&＃xff0c;如果我们为此编写一些代码&＃xff0c;它将看起来如下。
function filterAndMap ( arr, filterCallback, mapCallback ) {let reduced &＃61; arr.reduce( function ( filteredAndMapped, item ) {if (filterCallback(item)) {let mappedItem &＃61; mapCallback(item);filteredAndMapped.push(mappedItem);}return filteredAndMapped;}, []);return reduced;
}
现在&＃xff0c;您有一个需要3个参数的函数。 您要处理的数组&＃xff0c;用于测试过滤条件的回调以及将结果转换为所需内容的回调。 阅读代码&＃xff0c;您可以看到Array仅迭代了一次&＃xff0c;从而为我们提供了所需的性能提升。
现在&＃xff0c;使它成为Array对象的扩展方法。 通过为Array设计原型方法可以很容易地做到这一点。
沃伊拉
为了使上述功能成为原型方法&＃xff0c;我们必须做一些事情。 首先&＃xff0c;我们必须处理“ this ”的情况&＃xff0c;这可能在不同的上下文中表示不同的东西-想想nodejs&＃xff0c;基于浏览器的Javascript。 因此&＃xff0c;我们的原型方法如下所示。
Array .prototype.filterMap &＃61; function ( filterCallback, mapCallback ) {let obj &＃61; Object ( this );if (obj.length &＃61;&＃61;&＃61; 0 ) return null ;
if ( typeof filterCallback &＃61;&＃61;&＃61; "undefined" ) throw ;if ( typeof mapCallback &＃61;&＃61;&＃61; "undefined" ) throw ;
let reduced &＃61; this .reduce( function ( filteredAndMapped, item ) {if (filterCallback(item)) {let mappedItem &＃61; mapCallback(item);filteredAndMapped.push(mappedItem);}return filteredAndMapped;}, []);
return reduced;
};
那就是所有的人。 呈现Array.prototype.filterMap&＃xff08;&＃xff09;
这就是我们有一个简单的代码段的方式&＃xff0c;该代码段使我们可以同时使用.filter&＃xff08;&＃xff09;和.map&＃xff08;&＃xff09;&＃xff0c;而不会损失代码性能。
干杯&＃xff0c;敬请期待更多类似这些的摘要。 为那些不想复制和粘贴代码的人创建了.filterMap&＃xff08;&＃xff09;的npm模块并将其发布后&＃xff0c;我将更新本文。
先前发布在https://medium.com/&＃64;deepak.mani.0211/filtermap-in-Javascript-solving-performance-issues-with-filter-and-map-used-in-conjunction-f814da71faf
From: https://hackernoon.com/solving-performance-issues-with-filter-and-map-used-in-conjunction-gs4l365p
京公网安备 11010802041100号