js中的逻辑与、逻辑或（&& 、|| ）的常见用法，以及Es2020替代写法

前言

在日常开发中 && 、|| 总是会被频繁使用到，比如if的逻辑判断等等，对于用作逻辑判断的用法我们早已不陌生，今天来讲讲作为赋值运算符的用法。

1.或 || 的用法

1.首先基本的赋值规则是

比如 ：
let a = 1 || 2 //如果 1 为真就为1，如果1为假就为2
//根据这个规则我们知道 a = 1
同样：
let b = 0 || "" // 我们可以看到b的值为 ""
//所以在使用 || 用作赋值时，只判断左边是否为真类确定最后的值

2.常见使用场景

我们通常使用 || 来做一些默认值得操作，比如 在未知条件下赋值,请求初始数据时如果数据为空，使用一个默认值等等

let obj = null
let b = obj || { name: 123 }
console.log(b) //{ name: 123 }
// 这样当值为空值时 就可以赋值默认值

obj = {name:456}
b = obj || { name: 123 }
console.log(b) // {name:456}
// 不为空时，使用本值

3.这样写法的问题已经替代方案

所以可以看到，如果我们赋值本来0、‘’、false就是合法的情况下，这样就会出问题，我们就需要做一层判断

let c = a !== undefined && a !== null ? a : b;

但是es2020有了空位合并操作符（Nullish coalescing Operator）可以简化上面的写法

let c = a ?? b; // 这样就避免了 0、‘’、false为合法值但是没有别赋值的问题

2.与 && 的用法

1.首先基本的赋值规则，与 || 恰好相反

比如 ：
let a = 1 && 2 //如果 1 为真就为2，如果1为假就为1
//根据这个规则我们知道 a = 2
同样：
let b = 0 && "" // 我们可以看到b的值为 0
//所以在使用 && 用作赋值时，也是只判断左边是否为真类确定最后的值

2.常见用法

1）在调用回调函数是，避免报错

function fn(cb) {
    cb && cb() // 虽然不严谨 但是通常可以这样简写
}
//这样就表示如果cb不为空值 就执行,否则不执行

2）在对象取值时

let obj = {name:123}
let b = obj.name
console.log(b)// 123
//如果 obj为空值呢？
obj = null
b = obj.name
console.log(b) //TypeError: Cannot read property 'name' of null
//可以看到会报错 在开发时 数据可能是请求来的 如果为空值 不做判断获取属性就会报错了
---------------------------------------------------
//所以我们一般这样使用
obj = null
b = obj && obj.name
console.log(b)

3）问题总结
有时候开发的时候我们可能会遇到这样的操作

let data = {} 

假设data为请求来的数据我们想 获取属性没有值得话 使用一个默认值

let a = data.data.name || "张三"
console.log(a) 

当请求来数据不是正确嵌套对象的话就会报错了
TypeError: Cannot read property 'name' of undefined

所以我们需要在取对象属性值时，保证当前对象不为空值

let a = (data.data && data.data.name) || "张三"
console.log(a) //张三

3.ES2020代替写法

可选链操作符（Optional Chaining）

let prop = obj && obj.first && obj.first.second;
// ES2020 ?.的写法
let prop = obj?.first?.second;

3.&& || 的优先级

在混合使用时，&&比||的优先级高

let a = 0 || 1 && 2 || 0 || 3 &&　2 || 1
console.log(a) // 结果为 2
步骤梳理：
第一步先执行所有的 && 操作
0 || 2 || 0 || 2 || 1
然后从左向右 || 
2 || 0 || 2 || 1
2 || 2 || 1
2 || 1
2

如果有错误的地方请及时提出，以免误导其他同学