分享几个简单实用的 JavaScript 优雅小技巧！

桃扇骨 2023-09-27 10:38 133阅读 0赞

### 前言 ###

在工作中我们经常可以通过一些小细节来增加代码可读性，让代码看起来更加优雅。

今天就给大家分享一些一看就会的实用`JavaScript`优雅小技巧。

### 正片 ###

#### 减少 if...else 面条代码 ####

一旦当我们写到超过两个`if...else`的函数的时候，就该想想是否有更好的优化方法。

比如现在需要让我们根据名称计算出麦某劳的食品价格，你可能会这么做。

![5c3e93fa3780b4b023c95928ddc701f3.png][]

这样的写法会让函数体有很多的条件判断语句，而当我们想下次增加一个商品的时候，就需要修改函数内的逻辑，增加一个`if...else`语句，这在一定程度上也违反了**「开闭原则」**，当我们需要增加一个逻辑的时候要尽量通过扩展软件实体来解决需求变化，而不是通过修改已有的代码来完成变化。

这是很经典的优化方式，我们可以使用一个类似`Map`结构的数据来保存所有商品，这里我们直接建立一个对象来存储。

![0fca4546c4af25bd6080ba4b9d2ac618.png][]

这样我们下次需要再增加一个商品时，就不需要改动`getPrice`的逻辑了，当然了这里其实更多人更喜欢在用的地方直接使用`foodMap`，我这里只是简单举了个例子表述这个思路。

那么这时候就有同学会问了，如果我不想`key`只用字符串呢，这时候你就可以用到`new Map`了，思路也是差不多的，额外扩展一个实体来存储变化。

#### 管道操作取代冗余循环 ####

有这么一个麦某劳食物列表：

![48984d3c8bd2f65cc209b2faf1d2fe01.png][]

如果你想找出属于套餐 1 的食物，你会怎么找呢？

上面这种是我们以前经常使用的方法，显然我们替换成使用`filter`与`map`来取代`for`循环不仅可以使代码更精简，还可以使语义更加明确，这样我们一下就可以看出是先对数组`过滤`再`重组`。

![fc67a2e38f560af12273fcec55f0d334.png][]

#### find 取代冗余循环 ####

还是上面的例子，如果我们要在这个食品对象数组中按照属性值查找特定的食物时，`find`的用处就体现出来了。

![6922573307db6d709bbb5f4be0a4da2f.png][]

#### includes 取代冗余循环 ####

和上面两个细节类似的，这些都是既有的函数，也就是不用我们重新写的内置函数，巧用它会节省很多时间。

众所周知，一碗**「康某傅老坛酸菜牛肉面」**由**「酸菜」**、**「面」**、**「牛肉粒」**组成，如果我们想用函数证实这个面里面是否有脚皮，我们需要怎么写会比较简洁呢？

![3a37b9882e25b46156348b1ff55fa2a6.png][]

同样的，不止是**「康某傅的酸菜牛肉面」**可以这样耍，所有类似的在数组里面找到特定元素的操作都可以使用`includes`函数来调用。

#### result 返回值 ####

我们在写一些拥有返回值的函数的时候，通常会因返回值变量命名而纠结，甚至于一些长函数还不使用变量而是直接`return`，这样的习惯其实是不好的，因为等我们下次再去参照这段代码的时候，还需要重新捋清逻辑。

通常的，在一个小函数中，我们可以使用`result`作为返回值。

![ff55242bc5f019dc8a5f9a5ab2e466bf.png][]

#### 提前返回 ####

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

如下的例子中，当我们`selectedKey`不存在的时候，应该立即`return`，这样就不用继续阅读下面的代码，否则面对更复杂的函数时，会增加很多的阅读成本。

![29c8d6fbf3ccfe8b3e8e0a58b5a09ac3.png][]

#### 保持对象完整 ####

经常在我们通过请求拿到后端返回的数据会根据其中一些属性进行处理，如果需要处理的属性少的时候，很多同学会习惯使用下面示例中的第一种方法。

但其实这种习惯是不好的，因为当你无法确定这个函数以后还需不需要增加依赖属性的时候，应该保持对象的完整，**「学会拥抱变化」**，假如`getDocDetail`不止要用到`icon`和`content`，可能以后还会有`title`、`date`等属性，所以我们不如直接解构完整对象，不仅缩短参数列表还会让代码更易读。

![d4b5d6f4f68301abe90e193046855491.png][]

#### 巧用运算符 ####

当我们需要创建新变量时, 有时需要检查为其值引用的变量是否为`null`或未定义时，就可以使用简便写法。

![5489c4a24d9491c1f127d4d02bc330d6.png][]

### 最后 ###

今天的文章就分享到这里，本文总结了几个很基础的 JavaScript 优化方法，希望可以帮到大家。

[5c3e93fa3780b4b023c95928ddc701f3.png]: https://img-blog.csdnimg.cn/img_convert/5c3e93fa3780b4b023c95928ddc701f3.png
[0fca4546c4af25bd6080ba4b9d2ac618.png]: https://img-blog.csdnimg.cn/img_convert/0fca4546c4af25bd6080ba4b9d2ac618.png
[48984d3c8bd2f65cc209b2faf1d2fe01.png]: https://img-blog.csdnimg.cn/img_convert/48984d3c8bd2f65cc209b2faf1d2fe01.png
[fc67a2e38f560af12273fcec55f0d334.png]: https://img-blog.csdnimg.cn/img_convert/fc67a2e38f560af12273fcec55f0d334.png
[6922573307db6d709bbb5f4be0a4da2f.png]: https://img-blog.csdnimg.cn/img_convert/6922573307db6d709bbb5f4be0a4da2f.png
[3a37b9882e25b46156348b1ff55fa2a6.png]: https://img-blog.csdnimg.cn/img_convert/3a37b9882e25b46156348b1ff55fa2a6.png
[ff55242bc5f019dc8a5f9a5ab2e466bf.png]: https://img-blog.csdnimg.cn/img_convert/ff55242bc5f019dc8a5f9a5ab2e466bf.png
[29c8d6fbf3ccfe8b3e8e0a58b5a09ac3.png]: https://img-blog.csdnimg.cn/img_convert/29c8d6fbf3ccfe8b3e8e0a58b5a09ac3.png
[d4b5d6f4f68301abe90e193046855491.png]: https://img-blog.csdnimg.cn/img_convert/d4b5d6f4f68301abe90e193046855491.png
[5489c4a24d9491c1f127d4d02bc330d6.png]: https://img-blog.csdnimg.cn/img_convert/5489c4a24d9491c1f127d4d02bc330d6.png