时间戳

首页 > 技术文章 > ES6技术之“判空方案”

ES6技术之“判空方案”

saoge 2021-12-18 08:37 原文

一、常用方案

直接判断

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<input type="button" onclick="testIfNull()" value="testIfNull" />
</body>
<script>
    function testIfNull() {
        var wzw1 = '1';
        if(wzw1)// true
        {
            console.log('正常');// 执行
        }

        var wzw2 = '';
        if(wzw2)// false
        {
            console.log('判断’‘');// 不执行
        }

        var wzw3 = null;
        if(!!wzw3)// false
        {
            console.log('判断null');// 不执行
        }

        var wzw4
        if(wzw4)// false
        {
            console.log('判断undefined');// 不执行
        }

        var wzw5 = 0;
        if(wzw5)// false
        {
            console.log('判断0');// 不执行
        }
    }
</script>
</html>

 

效果

 

二、今日看到的ES6方案

用(wzw??'') !== '' 判断

我的解析：

对wzw进行判断，如果??是只要前面是null underfined 就取后面的值 不然取前面的

而后面的值也‘’空，而在外一成又判断不等于‘’所以这里是3种判空

分别是： null 和 undefined 和 ‘’ 

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<input type="button" onclick="testIfNull()" value="testIfNull" />
</body>
<script>
    function testIfNull() {
        var wzw1 = '1';
        if((wzw1??'') !== '')// true
        {
            console.log('正常');// 执行
        }

        var wzw2 = '';
        if((wzw2??'') !== '')// false
        {
            console.log('判断’‘');// 不执行
        }

        var wzw3 = null;
        if((wzw3??'') !== '')// false
        {
            console.log('判断null');// 不执行
        }

        var wzw4
        if((wzw4??'') !== '')// false
        {
            console.log('判断undefined');// 不执行
        }

        var wzw5 = 0;
        if((wzw5??'') !== '')// false
        {
            console.log('判断0');// 执行
        }
    }
</script>
</html>

效果

 

 总结

 可以用if((value??'') !== '') 来替代  if(value || value ===0)对0进行放行

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<input type="button" onclick="testIfNull()" value="testIfNull" />
</body>
<script>
    function testIfNull() {
        var wzw1 = '1';
        if((wzw1??'') !== '')// true
        {
            console.log('正常');// 执行
        }

        var wzw5 = 0;
        if((wzw5??'') !== '')// false
        {
            console.log('判断if((wzw5??\'\') !== \'\')');// 执行
        }

        if(wzw5 || wzw5 === 0){
            console.log("判断if(wzw5 || wzw5 !== 0");// 执行
        }
    }
</script>
</html>

结果

 

推荐阅读