一个问号引发的奇迹，可以少些多少代码

今天和大家分享一个JavaScript小技巧，看起来微不足道，但是或许可以帮你省去很多的代码编写哦！

在最新的标准当中，我们可以使用?这个操作符来对属性是否在对象当中做一个判断，可以省去判断语句的书写，特别是属性嵌套很深的时候，可以省略一大堆的判断代码，让我们的代码看起来更简洁。

const boy = {
    name: "Bill",
    parent: {
        monther: {
            name: "Lily"
        }
    }
}

console.log(boy.parent.father.name)

上面的代码中father并不在boy中，因此当我们打印的时候程序将会报错退出，如果要让程序能够忽略这个错误的话就需要这样改

const boy = {
    name: "Bill",
    parent: {
        monther: {
            name: "Lily"
        }
    }
}

if(boy.father && boy.father.name) { // <- 增加的判断语句
    console.log(boy.parent.father.name)
}

上面的代码中我已经使用了短路写法尽量减少代码的编写，那么使用?操作符的话我们可以写得更简单

const boy = {
    name: "Bill",
    parent: {
        monther: {
            name: "Lily"
        }
    }
}

console.log(boy.parent?.father?.name)
// print "Undefined"

上面的输出结果是Undefined，因为parent属性并不存在，但是程序是能够正常运行并且不会报错退出，就跟做了空值判断一样。

我们甚至可以使用??操作符来给他一个默认值，例子如下

const boy = {
    name: "Bill",
    parent: {
        monther: {
            name: "Lily"
        }
    }
}

console.log(boy.parent?.father?.name ?? "Unknown")
// print "Unknown"

搭配?和??这两个操作符，我们可以减少大量的判断语句的书写，对于程序员来说，少一个字符也是一件极好的事情!

嘿！关键的来咯。我们可以使用?来检查属性是否为空，那么是否也可以用来检查对象中的方法是否为空呢？答案当然是，可以！不过使用起来有一点反直觉，所以我觉得很多人可能不知道这个小技巧，那么接下来就是分享奇迹的时刻了！

const boy = {
    name: "Bill",
    parent: {
        monther: {
            name: "Lily"
        }
    }
}

boy.walk?() // <- 错误的写法
boy.walk?.() // <- 正确的写法

这个技巧就是?后面使用.操作符然后调用函数，使用这个方法就可以像判断属性值空置那样自动判断函数是否存在，对于React中的一些组件回掉函数非常的实用，比如如下的例子

type Props = {
    value: string | number;
    onClickItem: () => void;
}

cosnt Item = (props: Props) => {
    return (
        <li onClick={() => { props.onClickItem?.() }}> // <- 回掉函数不一定存在
            {props?.value ?? "unknown"} // <- 属性值不一定存在
        </li>
    )
}

const List = () => {
    return (
        <ul>
        {
            [...arr].map((i) => <Item />)
        }
        </ul>
    )
}

使用这个小技巧，我们可以省略很多的判断语句的书写，希望我的分享能够给你带来帮助