分享四个JS 超级实用的小技巧

柔情只为你懂 2024-03-23 18:58 75阅读 0赞

![db86e2c5e2e2845d2042d66875b82bf8.jpeg][]

JS有很多小技巧可以使代码更精简、更简单。今天主要分享4个技巧，在平时的工作中可以大大的缩短代码量和开发时间。

### 1、短路判断 ###

**当只需要简单的if条件时，可使用此方法**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>let x = 0;</code> <code>let foo = () =&gt; console.log(</code><code>'执行了'</code><code>);</code> <code>if</code><code>(x === 0){ </code> <code>&nbsp;&nbsp;</code><code>foo()</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

通过使用`&&`运算符来实现同样的if功能，如果&&之前的条件为`false`，则&&之后的代码将不会执行。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>let x = 0;</code> <code>let foo = () =&gt; console.log(</code><code>'执行了'</code><code>);</code> <code>x === 0 &amp;&amp; foo()</code> </td> 
 </tr> 
 </tbody> 
</table>

还可增加更多的if条件，不过这也会增加语句的复杂性，不建议超过2个以上条件。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>let x = 0;</code> <code>let y = 0;</code> <code>let foo = () =&gt; console.log(</code><code>'执行了'</code><code>);</code> <code>x === 0 &amp;&amp; y === 0 &amp;&amp; foo()</code> </td> 
 </tr> 
 </tbody> 
</table>

### 2、可选链操作符 ( ? ) ###

我们经常会判断JS对象中是否存在某个`key`，因为有时不确定后台API返回的数据是否是正确的。

`user`对象中包含一个属性`name`的对象，`name`对象有一个属性`firstName`，使用`user.name.firstName`直接进行判断的话，如果name属性不存在的话就会报错，所以在判断之前还需要判断user.name是否存在，需要嵌套两层if判断。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>let user = { </code> <code>&nbsp;&nbsp;</code><code>name : { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>firstName : </code><code>'傲夫靠斯'</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>if</code><code>(user.name){ </code> <code>&nbsp;&nbsp;</code><code>if</code><code>(user.name.firstName){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'user对象 包含 firstName 字段'</code><code>)</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

这时我们可以使用?操作符进行简化操作，如果`user.name`不存在，也将返回`false`，所以直接使用一层判断

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>let user = { </code> <code>&nbsp;&nbsp;</code><code>name : { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>firstName : </code><code>'傲夫靠斯'</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>if</code><code>(user.name?.firstName){ </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>'user对象 包含 firstName 字段'</code><code>)</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 3、空值合并操作符 ( ?? ) ###

与if/else相比来说，三元运算符更加简短。如果逻辑简单，使用起来很方便。

**例如：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>let user = { </code> <code>&nbsp;&nbsp;</code><code>name : { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>firstName : </code><code>'傲夫靠斯'</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>let foo = () =&gt; { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>user.name?.firstName ? </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>user.name.firstName : </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'firstName 不存在'</code> <code>}</code> <code>console.log(foo())</code> </td> 
 </tr> 
 </tbody> 
</table>

首先使用?运算符来判读是否存在，存在即返回，不存在则返回false，进入后面的逻辑

**使用??运算法使代码更加精简**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>let user = { </code> <code>&nbsp;&nbsp;</code><code>name : { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>firstName : </code><code>'傲夫靠斯'</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>let foo = () =&gt; { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>user.name?.firstName ?? </code> <code>&nbsp;&nbsp;</code><code>'firstName 不存在'</code> <code>}</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>console.log(foo())</code> </td> 
 </tr> 
 </tbody> 
</table>

### 4、return终止函数 ###

下面函数判断x的值，使用大量`if else`嵌套

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>let x </code><code>=</code> <code>1</code><code>;</code> <code>let foo </code><code>=</code> <code>() </code><code>=</code><code>&gt; { </code> <code>&nbsp;&nbsp;</code><code>if</code><code>(x &lt; </code><code>1</code><code>){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>'x 小于 1'</code> <code>&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(x &gt; </code><code>1</code><code>){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>'x 大于 1'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code><code>else</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>'x 等于 1'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>console.log(foo())</code> </td> 
 </tr> 
 </tbody> 
</table>

这种`if else`嵌套可以删除`else`条件来简化代码，因为`return`语句将终止代码执行并返回函数。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>let x = 1;</code> <code>let foo = () =&gt; { </code> <code>&nbsp;&nbsp;</code><code>if</code><code>(x &lt; 1){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>'x 小于 1'</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>if</code><code>(x &gt; 1){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>'x 大于 '</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>'x 等于 1'</code> <code>}</code> <code>console.log(foo())</code> </td> 
 </tr> 
 </tbody> 
</table>

到此这篇关于JS 4个超级实用的小技巧 提升开发效率的文章就介绍到这了,希望可以帮助你。

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[db86e2c5e2e2845d2042d66875b82bf8.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/97d9b773bce5426da0568a158be05402.png
[Link 1]: https://m.weidianyuedu.com/
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com