js css htmljs

javaScript 便捷的运算符们( ?? ??= &&=

2022-07-19  本文已影响0人  小小Bug你别跑
truthy (真值) (在 [Boolean]上下文中认定为 true 的值)

falsy (假值 或 虚值)是在 [Boolean]上下文中认定为 false 的值。

1、空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 [null]或者 [undefined]时,返回其右侧操作数,否则返回左侧操作数。

function func(val){
    console.log(
      val??`默认值 - ${val}`
    )
}
func(null) //  "默认值 - null"
func(undefined) //  "默认值 - undefined"
func('') // ""
func(0) // 0
func(NaN) // NaN

注:主要应用于对null和undefined的处理避免报错

2、逻辑空赋值运算符 (x ??= y) 仅在 x 是 (nullundefined) 时对其赋值。

const a = { duration: 50 };

a.duration ??= 10;
console.log(a.duration); //50

a.speed ??= 25;
console.log(a.speed); // 25
console.log(a)  //  Object { duration: 50, speed: 25 }
 
注:针对Obj内的参数判断值为null或undefined赋值,更改原有的Obj

3、逻辑与赋值运算符 (x &&= y) 仅在 x真值时赋值。

let a = 1;
let b = 0;
let c = null;
let d = undefined;

a &&= a+2;
console.log(a);//3

c &&= b+2;
console.log(b); //0

c &&= c+2;
console.log(c); //null

d &&= d+2;
console.log(d); //undefined

注:使用场景可以是当数据返回的是你需要的东西后再做计算或者其他操作

4、逻辑或赋值运算符 (x ||= y) 运算仅在 x假值时赋值。

const a = { duration: 50, title: '' };

a.duration ||= 10;
console.log(a.duration);  //  50

a.title ||= 'title is empty.';
console.log(a.title); //"title is empty"

注:使用场景可以是接口返回数据当数据有值的时候赋值否则赋默认值

5、可选链操作符 ( ?. ) 允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空[null] 或者 [undefined]的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined

const Obj = {};

console.log(Obj.value) // undefined
console.log(Obj?.value) // undefined

const data =  null

console.log(data.value) // Error: Cannot read properties of null (reading 'value')
console.log(data?.value) // undefined

注:这种情况在数据返回解析的时候会常有,当数据为空的时候接口返回不完全是object类型的,
这就导致针对Obj的解析方法可能会报错,通常我们会给data加一个为空的判断,但是有了`?.`
就可以省略判断阀直接解析数据

6、逻辑或操作符 (||) 会在左侧操作数为 假值时返回右侧操作数

o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject

注:这里只说说`||`在赋值的使用,判断的都用烂了吧!

简而言之不管是操作符还是运算符都是为了简化代码,使用方面视情况而定,感谢大佬们围观,咱们再会了!

上一篇下一篇

猜你喜欢

热点阅读