javascript有不少好用的运算符,合理的使用可以大大提高工作效率,从而就有更多的时间去摸鱼,以下简单介绍了4种,具体如下:
&&
逻辑与运算(&&)是 AND 布尔操作。只有两个操作数都为 true 时,才返回 true,否则返回 false。具体描述如表所示:
条件一 | 条件二 | 结果 | 演示 |
true1 | true2 | true2 | 1 && 2 => 2 |
true | false | false | 1 && 0 => 0 |
false | true | false | 0 && 1 => 0 |
false1 | false2 | false1 | null && 0 => null |
逻辑与是一种短路逻辑,如果左侧表达式为 false,则直接短路返回结果,不再运算右侧表达式。运算逻辑如下:
- 计算第一个操作数(左侧表达式)的值。
- 检测第一个操作数的值。如果左侧表达式的值可转换为 false(如 null、undefined、NaN、0、""、false),那么就会结束运算,直接返回第一个操作数的值。
- 如果第一个操作数可以转换为 true,则计算第二个操作数(右侧表达式)的值。
- 返回第二个操作数的值。
实例:
let test = 20
(test > 10) && console.log('打印出来了'); // 打印出来了
语法相当于:
if(x> 10) {
console.log('打印出来了');
}
||
逻辑或运算(||)是布尔 OR 操作。如果两个操作数都为 true,或者其中一个为 true,就返回 true,否则就返回 false。具体如图所示:
条件一 | 条件二 | 结果 | 演示 |
true | true | true | 1 || 2 => 1 |
true | false | true | 1 || 0 => 1 |
false | true | true | 0 || 2 => 2 |
false1 | false2 | false2 | 0 || undefined=> undefined |
逻辑或也是一种短路逻辑,如果左侧表达式为 true,则直接短路返回结果,不再运算右侧表达式。运算逻辑如下:
- 计算第一个操作数(左侧表达式)的值。
- 检测第一个操作数的值。如果左侧表达式的值可转换为 true,那么就会结束运算,直接返回第一个操作数的值。
- 如果第一个操作数可以转换为 false,则计算第二个操作数(右侧表达式)的值。
- 返回第二个操作数的值。
实例:
let username;
if (name !== null || name !== undefined || name !== '') {
userName = name;
} else {
userName = "";
}
//可以写为
let userName = name || "";
??
空值合并运算符( ?? )是一个逻辑操作符,如果左侧的表达式为 null或者 undefined 时,返回其右侧表达式,否则返回左侧表达式。
下列表格中的true、false 表示除null undefined 之外任意
条件一 | 条件二 | 结果 | 演示 |
null | 1 | 1 | null ?? 1 => 1 |
undefined | 2 | 2 | undefined ?? 2 => 2 |
true | false | true | true ?? false => true |
实例:
let username;
if (name !== null || name !== undefined ) {
userName = name;
} else {
userName = "测试";
}
//可以写为
let userName = name ?? "测试";
?.
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。( ?. ) 操作符的功能类似于( . )链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。
下表承接上面数据:
条件一 | 条件二 | 结果 | 演示| |
obj(存在) | name | 测试 | obj ?. name =>测试 |
obj(不存在) | xxxx | undefined | obj ?. xxxxx =>undefined |
实例:
//比如这个item.shopList若是为null undefined这种情况 不加?.就会页面报错
shopList: item.shopList?.map((mItem) => {
return {
shopCode: mItem.shopCode,
shopName: mItem.shopName,
custCode: mItem.shopCode,
custName: mItem.shopName,
labels: mItem.labels,
labelnames: mItem.labelnames,
parentCustCode: item.custCode,
parentCustName: item.labels,
}
}),
得出的结论优先级:?. > && > || > ??