do{}表达式的详细介绍【与实战结合】

骑猪看日落 2023-05-29 05:12 6阅读 0赞

do\{\}表达式是ES6的最新提案。截止目前测试还未成功,估计是提案浏览器还没跟上,如果朋友们想要项目中使用就需要引入babeljs进行编译。

接下来我们一起来看一下用了这个 **do\{\}** 表达式究竟有哪些好处。它的用法是如何的。

### do\{\}的用法 ###

const test = do { 
    	let a = 2;
    	let b = 4;
    	a * b + 1;
    }
    
    console.log(test) //9

**使用babel编译之后的样子【右边代码是编译后的】：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]

### do\{\}的作用 ###

1.  do \{\}表达式最后会返回内部最后执行的表达式的值
2.  do表达式的好处是可以封装多个语句，让程序更加模块化
3.  do块级作用域提供了单独的作用域，内部操作可以与全局作用域隔绝。
4.  在JSX里使用效果最好，总所周知JSX里面只能写表达式无法写if()\{\}else\{\}语句。想要做判断只能写三元运算符。如果层级过多那么代码理解起来就非常的恼火了。如下react项目所示【笔者随便盲敲的代码，如有不足之处请在下方评论，例子有可能不太恰当，仅仅是示意】：

render(){ 
        const userInfo = sessionStorage.getItem('userInfo');
    	return (
    		<div>
    			{ 
    				userInfo.id 
    					? (
    						{ 
    							userInfo.name 
    								? (
    									userInfo.name
    								) : '- -'
    						}
    					)
    					: ''
    			}
    		</div>
    	)
    }

像上面这种情况，仅仅是俩层逻辑嵌套，用了三元运算之后代码就已经很难读了，如果我们用do\{\}表达式改写会变成什么样呢？我们一起来改一下：

render(){ 
    	return (
    		<div>
    			{ do { 
    				const userInfo = sessionStorage.getItem('userInfo');
    				const { id, name} = userInfo;
    				if (id && name) { 
    					name
    				} else if (id) { 
    					'- -'
    				} else { 
    					''
    				}
    			}}
    		</div>
    	)
    }

不知道朋友们是不是与我的感觉一样，就是代码看起来更简单了，代码逻辑清晰明了。

在实战项目中，写出让他人能够看懂的代码是非常重要的，否者代码质量很差的话，别人怕是看到了就不想搞。这是极其不负责的行为。望大家在平时开发过程中时刻牢记：代码的可读性高低是一个程序员高低评判的标准。

> 以上代码均为测试过的，如有疑问请在下方评论。转载请附带本文链接。后期可能会更新文章，到时候方便读者溯源。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019110415355676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70