前言,前三个为js已经发布较久的运算符(做一个全面、详情的总结),方便和后面的运算符做一个对比;而后三个为js的新特性(或为实验中的特性)
1. && (逻辑与 => 二元逻辑运算符)
- 两边条件都为true时,结果才为true;
- 如果有一个为false,结果就为false;
- 当第一个条件为false时,就不再判断后面的条件
注意:当数值参与逻辑与
运算时,结果为true,那么返回的会是第二个为真的值;如果结果为false,返回的会是第一个为假的值。
2. || (逻辑或 => 二元逻辑运算符)
- 只要有一个条件为true时,结果就为true;
- 当两个条件都为false时,结果才为false;
- 当一个条件为true时,后面的条件不再判断
注意:当数值参与 逻辑或
运算时,结果为true,会返回第一个为真的值;如果结果为false,会返回第二个为假的值;
逻辑与
的优先级是高于 逻辑或
的
3. ! (逻辑非 => 一元运算符)
当条件为false时,结果为true;反之亦然。
4. ?? (空值合并运算符 => 二元逻辑运算符)
ES2020 引入;如果 ??
前面是 null
或 undefined
(只有这两种情况),取后面的默认值
const foo = null ?? 'default string';
console.log(foo); // default string
const baz = 0 ?? 42;
console.log(baz); // 0
5. ?. (可选链运算符)
ES2020 引入;如果 ?.
前面的值不是 null
或 undefined
,则返回后面对应的属性(一般用在获取对象属性上面);如果左侧的对象是null
或 undefined
,就不再往下运算,返回 undefined
;
如果在null
或 undefined
上面去获取一个属性,将会报错(属性根本不存在),如下图:
使用?.
实例:(属性不存在是不会报错)
如果不使用?.
运算符,我们就需要使用三元运算或者使用 if ... else ...
去判断,比较麻烦!
6. ??= (逻辑空赋值运算符 => 赋值运算符)
只有当 ??=
左侧的值为null
或 undefined
时,才会将右侧变量的值赋值给左侧变量,其他所有值都不会进行赋值!
let b = '测试';
let a = 0
let c = null;
let d = '123'
b ??= a; // b = '测试' => 因为b不是null 或者 undefined,所以不会进行赋值,直接返回b原本的值
c ??= d // c = '123' => 因为c为null,所以将d 赋值给了c
let aa; // 值为undefined
aa ??= '哈哈哈'; //aa = '哈哈哈' => 因为c为undefined,所以将 ‘哈哈哈’ 赋值给了aa
更多运算符请查阅 MDN
扩展一个数组的新方法
7. 使用Array.prototype.at()简化arr.length
该方法为js的新特性,并且IE和Opera不支持
Array.prototype.at()
接收一个正整数或者负整数作为参数,表示获取数组指定位置的元素。
参数正数就表示顺数第几个,负数表示倒数第几个,这可以很方便的某个数组末尾的元素。
var arr = [1, 2, 3, 4, 5]
// 以前获取最后一位
console.log(arr[arr.length-1]) //5
// 简化后
console.log(arr.at(-1)) // 5
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出