js性能优化技巧,js代码优化的方法

　　在工作中，我们往往可以通过一些小细节来增加代码的可读性，让代码看起来更加优雅。本文将和大家分享几个一眼就能看出来的实用JavaScript优化小技巧。希望对你有帮助！

　　「难度：?」「推荐阅读时长：5min」

正片

减少if...else面条代码

　　一旦我们写出两个以上的if.else函数，要想一想有没有更好的优化方法。【相关推荐：javascript学习教程】比如现在我们需要根据麦磨捞的名字来计算它的食物价格，你可能会这么做。

　　这样的写法会让函数体有很多条件判断语句，下次我们要添加一个商品的时候，需要修改函数中的逻辑来添加一个if.else语句，这也在一定程度上违背了开闭原则。当我们需要增加一个逻辑时，应该尽量通过扩展软件实体来解决需求变化，而不是修改现有代码来完成变化。这是一个经典的优化方法。我们可以使用类似地图的数据来存储所有商品。在这里，我们直接创建一个对象来存储。

　　这样，下次我们需要添加另一个产品时，就不需要更改getPrice的逻辑了。当然，其实这里更多的人喜欢在使用foodMap的地方直接使用它。我在这里只是举一个例子来表达这个想法。这时候有同学会问，我不想让key只用字符串怎么办？这时候可以用新地图，思路也差不多。扩展一个附加实体来存储更改。

管道操作取代冗余循环

　　有这样一份麦磨捞美食清单。

　　如果你想找出属于套餐1的食物，你会怎么找？以上方法是我们之前经常使用的。显然，用filter和map代替for循环，不仅可以使代码更加简洁，而且可以使语义更加清晰，让我们一下子就能看出数组是先过滤再重组的。

find取代冗余循环

　　还是上面的例子。如果我们想根据这个food对象数组中的属性值找到某个特定的食物，find的用法就出来了。

includes取代冗余循环

　　和上面两个细节类似。这些都是已经存在的函数，也就是内置的函数，我们不用重写。熟练使用它们会节省很多时间。众所周知，一碗康某傅老坛酸菜牛肉面由酸菜、面、牛肉粒、烟头和脚皮组成。所以我们想用函数来确认这个面里面有没有脚皮。怎样才能写得更简洁？

　　同样，不仅康某傅的酸菜牛肉面可以这样玩，所有查找数组中特定元素的类似操作都可以用includes函数调用。

result返回值

　　当我们编写一些带有返回值的函数时，经常会纠结于返回值变量的命名。甚至对于一些长函数，我们不使用变量而是直接返回。这个习惯其实是不好的，因为下次引用这段代码的时候，我们需要再次理清逻辑。通常，在一个小函数中，我们可以使用result作为返回值。

提前返回

　　然而，使用result作为上面的返回值并不适用于所有情况。有时候我们需要提前结束函数体，避免后面的同事读到多余的程序。

　　在下面的例子中，当我们的selectedKey不存在时，我们应该立即返回它，这样我们就不必继续读取下面的代码，否则在面对更复杂的函数时会增加读取成本。

保持对象完整

　　很多时候，当我们通过请求得到后端返回的数据时，我们会根据其中的一些属性进行处理。如果要处理的属性很少，许多学生会习惯使用第一种方法。但其实这个习惯是不好的，因为你在不确定这个函数以后是否需要添加依赖属性的时候，就应该保持对象不变，就像我上一篇文章提到的，学会拥抱变化。如果getDocDetail需要使用的不仅仅是图标和内容，未来可能还会有标题、日期等属性，那么我们不妨直接传入完整的对象，不仅增加了缩短的参数列表，还可以让代码更具可读性。

巧用运算符

　　当我们需要创建一个新的变量时，有时我们需要检查其值所引用的变量是null还是未定义的，我们可以使用简单的写法。

写在最后

　　首先，我要感谢大家看到这一点。这篇文章就分享到这里，总结了几种基本的优化方法。希望能帮到你。【相关视频教程推荐：web前端】以上是几个值得了解的实用JavaScript优化技巧的细节。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。