js之运算符详解

前言，前三个为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

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出