js小技巧

1、用??代替||,用于判断运算符左侧的值为null或undefined时，才返回右侧的值

??运算符是ES2020引入，也被称为null运算符

它的行为类似||,但是更严

||运算符是左边是空字符串或false或0等false值，都会返回后侧的值。而??必须运算符左侧的值为null或undefined时，才会返回右侧的值，因此0||1的结果是1,0??1的结果为0.

2、使用?.简化&&和三元运算符

?.也是ES2020引入，有人称为链判断运算符。

?.直接在链式调用的时候判断，判断左侧的对象是否为null或undefined,如果是，就不再往下运算，返回undefined，如果不是，则返回右侧的值。

var street = user.address && user.address.street;

// 简化
var street = user.address?.street;

var fooInput = myForm.querySelector('input[name=foo]');
var fooValue = fooInput ? fooInput.value : undefined

// 简化
var fooInput = myForm.querySelector('input[name=foo]')?.value;

3、使用String.prototype.replaceAll()简化replace一次性替换所有子字符串

String.prototype.replaceAll()用法与String.prototype.replace()类似

但是replace仅替换第一次出现的子字符串，而replaceAll会替换所有

// 以前
console.log('aaa'.replace(/a/g,'A'))
// 简化后
console.log('aaa'.replaceAll('a','A'))

4、使用Array.prototype.at()简化arr.length

Array.prototype.at()接收一个正整数或者负整数作为参数，表示获取指定位置的成员。

参数正数就表示顺数第几个，负数表示倒数第几个，这可以很方便的获取摸个数组末尾的元素