可选链空位合并运算符

最新推荐文章于 2025-04-25 17:27:46 发布

GYB4979

最新推荐文章于 2025-04-25 17:27:46 发布

阅读量375

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/GYB4979/article/details/122886689

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 可选链  
        /* 
        可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。
        ?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，
        该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。
        当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。
        在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有帮助的。
         */
        //数组
        const list = [1, 2, 3]
        if (list && list.length) {
            console.log('数组存在，且有长度');
        }
        if (list?.length) {
            console.log('使用可选链判断数组');
        }
        console.log(list?.[2]);  //3
        // 对象
        let obj = {
            cat: {
                name: 'tom'
            },
            dog: {
                name: 'jenny'
            }
        }
        if (obj && obj.dog && obj.dog.name) {
            console.log('对象中有dog属性，且name是jenny');
        }
        if (obj?.dog?.name) {
            console.log('用可选链判断dog属性存在，且获得名字name');
        }
        const dogName = obj?.dog?.name
        console.log(dogName); //jenny

        //函数
        const fun = () => {
            console.log('我是函数');
        }
        // fun && fun()
        fun?.()


        //空位合并运算符 ??
        /* 当我们判断变量可以为 0 '' false 且保留的场景时候 
        只有当前面为null或者undefined的时候，会进行空值合并操作，就是赋予后面设定的默认值。
         */
        console.log('' || 'gyb');  //gyb
        console.log('' ?? 'gyb'); // ''  使用空位合并云算法就可以保留空字符串存在的比较
        console.log(0 ?? 'gyb');  //0
        console.log(false ?? 'gyb');  //false 
        console.log(null ?? 'gyb');  //gyb 
        console.log(undefined ?? 'gyb');  //gyb 




    </script>
</body>

</html>