do{}表达式的详细介绍【与实战结合】-蒲公英云

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

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

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

do{}的用法

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

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

do{}的作用

do {}表达式最后会返回内部最后执行的表达式的值
do表达式的好处是可以封装多个语句，让程序更加模块化
do块级作用域提供了单独的作用域，内部操作可以与全局作用域隔绝。

在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>
    )
}