JavaScript 神奇运算符

JavaScript 神奇运算符

JavaScript 神奇运算符

大家好，
在本教程中，我将讨论3 个非常有用且节省时间的运算符，大多数初学者都不知道。
这 3 个运算符是：

1. 空值合并运算符（??）
2. 逻辑空值赋值 (??=)
3. 可选链接运算符（？。）

我们将通过一些示例逐一讨论这些运算符，以便更好地理解。

1. 空值合并运算符（??）

语法：
a??b

• 如果定义了a，则输出将是a
• 如果a未定义/为空（NULL 或 UNDEFINED），则输出为b

换句话说，如果第一个参数不为 null 或 undefined，则空值合并运算符 (??) 返回第一个参数。否则返回第二个参数

例子：

let a=NULL
console.log(a??50) //50
console.log(a) //NULL

let a=10
let c=30
console.log(a??b??c??d) //10
//gives output, the first defined value

2. 逻辑空值赋值（??=）

语法：
a ??= b
上述语法等同于a ?? (a=b)

• 如果a不是NULLISH（Null 或 Undefined），则输出将是
• 如果a为NULLISH，则输出为b，并将b 的值分配给 a

例子：

let a=NULL
console.log(a??=50) //50
console.log(a) //50
//compare the output of a from the previous example.

3.可选链接运算符（？。）

语法：
obj ? .prop

• 如果 obj 的值存在，则类似于 obj.prop，
• 否则，如果 obj 的值未定义或为空，则返回未定义。

通过将?.运算符与对象结合使用，而不是仅使用点 (.) 运算符，JavaScript 知道在尝试访问 obj.prop之前隐式检查以确保 obj不为null 或 undefined。注意： obj 也可以嵌套，例如obj . name ?. firstname

例子：

let obj= {
   person:{
       firstName:"John",
       lastName:"Doe"
   },

   occupation: {
       compony:'capscode',
       position:'developer'
   },
   fullName: function(){
       console.log("Full Name is: "+ this.person.firstName+" >"+this.person.lastName)
  }
}
console.log(obj . person . firstName) //John
console.log(obj . human . award) //TypeError: Cannot read property 'award' of undefined
console.log(obj ?. human . award) //TypeError: Cannot read property 'award' of undefined
console.log(obj . human ?. award) //undefined
delete obj?.firstName;  // delete obj.firstName if obj exists
obj . fullName ?. () //logs John Doe
obj ?. fullName() //logs John Doe
obj . fullDetails() // TypeError: obj.fullDetails is not a function
obj ?. fullDetails() // TypeError: obj.fullDetails is not a function
obj.fullDetails ?. () //undefined

总结一下，
可选链?.语法有三种形式：

1. obj?.prop–obj.prop如果obj存在则返回，否则返回undefined。
2. obj?.[prop]–obj[prop]如果obj存在则返回，否则返回undefined。
3. obj.method?.()–obj.method()如果obj.method存在则调用，否则返回undefined。

希望大家喜欢这篇文章，希望它能为你的下一个项目提供信息和帮助。
如有任何疑问，请随时联系我们。

请访问https://www.capscode.in/#/了解更多信息
或
在 Instagram 上关注我们https://www.instagram.com/capscode.in/

如果我的文章对你有帮助

谢谢你，
CapsCode