每个 JavaScript 程序员都必须知道的 6 个空值合并运算符！

长话短说：

最后的想法

长话短说：

大多数情况下，如果我们为多个实体插入多个空值检查，JavaScript 代码就会变得更加笨拙。这些检查是强制性的，如果删除这些检查，就会出现这种情况

TypeError: Cannot read property 'xyz' of undefined

为了防止程序崩溃并使代码更简洁，在本文中我将解释一些处理这种棘手情况的方法

为了举例说明，我将使用以下对象向您展示运算符的一些示例用法

let person = {
    name: "sud",
    age: 21,
    hobbie: {
        first: "Code",
        secodn: "Chess"
    }
}

三元运算符

三元运算符是代码中最常用的运算符。大多数程序员用它来替代内联的 if --- else 语句。该运算符主要用于 React 组件的条件渲染。

//ternary 
let result = person.name === "sud" ? "Howdy Sud " : "Howdy Stranger"
console.log(result)

这很简单。在?之前是条件。紧接着?符号的是条件真值的块，其他的是条件假结果的块

💥 超级三元运算符 💥

三元运算符在嵌套时非常出色，可以完全替代 if ...... else 语句。在下面的代码片段中，我将运算符用作 if else 语句块，使代码更易于阅读。

//ternary as if else 
let isAdult = person.age > 18 ?
        " You are adult :)"
        : age < 15 && age > 10  ?
        "You are on the way " 
        : "No Kids here "
console.log(isAdult)

这里很简单，用连续的块附加多个条件，然后将最后的 else 块作为默认条件

使用??进行默认分配

默认赋值是我最喜欢的方法之一。它允许我用最少的代码提供占位符值，这样我们就可以信任这些值，并在逻辑层面实现类型安全。

let sudsAge = person.age ?? 22
console.log(`Sud's age is ${sudsAge}`)

这里，如果 person.age 未定义，我们将默认值赋给sudsAge 。这很实用。感谢这个运算符帮我们省去了冗长的检查 ❤

使用.includes()进行多条件评估

很多时候，我们需要检查多个条件的真假值。为了做到这一点，我通常会编写多行嵌套的 if 和 else 代码块，或者使用 switch 语句。但这里有一个技巧

//check with multiple conditions
let isSporty = ['Chess', 'cricket'].includes(person.hobbie.first) ? "true" : "Nope"
console.log(isSporty)

通过用实际条件替换数组值，我们可以检查所有值是否为真。如果任何值返回 false，则不会继续。

使用?检查对象中属性的存在。

这是日常生活中最有用的运算符。无论是处理异步 API 调用还是阻塞任务，我们很容易假设键会存在于 API 的响应或任何操作的输出 JSON 对象中。但是，如果键不存在或未定义，该怎么办呢？这里有个小技巧

let sudsHobbyFirst = person?.hobbie?.third 
console.log(sudsHobbyFirst)

通过使用此运算符，我们可以确保属性是否存在，并根据结果执行检查/操作。

链接默认赋值和成员运算符

如果与默认赋值语句链式调用，前面提到的运算符可以实现超级功能。如果属性未定义或不存在，我们将为变量分配默认值。

//?. with ?? 
let sudsHobby = person?.hobbie?.third ?? "Nothing"
console.log(sudsHobby)

在这里，我们为sudsHobby 分配占位符值
（🤣 你会经常使用它🤣）

最后的想法

这是我的小小尝试，向您解释一些运算符的用法，这些运算符可能会使您的代码比以前的代码更简洁、更小巧

🤗请在评论中告诉我你的想法

🙏感谢阅读...