|
????????本文章会实时更新一些常用的小技巧，如果大侠读起来还算满意的话，望您给个赞，收藏一下方便您随时浏览;
1. 在项目中使用 Object?.key?去代替?Object.key ，抛弃 && 和 三目?这些冗余的写法
????????原因：为什么要这么做呢，相信很多小伙伴也遇到过类似的问题，跟后台对一个接口，数据是Object类型的，ok，开发完成上线后，呀, 怎么报错了, 原来没返回这个字段，或者返回了个 null ，?没错，你可能会说跟后端说一下就好了，但是求人不如求己, 我们大前端从不屈服于别人！
? ? ? ? 原理：这里的 ?. 相当于一个链式调用前的一个判断，会先去判断前面是否为真，为真继续往下执行, 为假则中止；
? ? ? ? 废话不多说，使用方法的代码如下：
// 此处模拟下obj是后台接口返回的字段, 定义类型为Object
function handle (obj) {
console.log(obj.a.b) // 错误的用法
console.log(obj?.a?.b) // 正确的用法
}
// 正常情况下
handle({
a: {
b : 1
}
})
// 特殊情况下
handle({})
2. 字符串的替换使用 replaceAll 方法替代 replace 方法
? ? ? ? 原因：没错，String.prototype 上再次新增一员大将，顾名思义，replaceAll可以一次替换字符串中所有满足条件的部分，再也不需要麻烦的正则写法了，看来还是程序员懂程序员啊，代码当然是越简单越好了!
? ? ? ? 原理：相当于replace加正则的全部匹配
????????废话不多说，使用方法的代码如下：
const str = 'abcdabcdabcd';
// 在这之前的写法 替换处理
str.replace(/c/g, 's');
// 新的写法 替换处理
str.replaceAll('c', 's');
3. 用 ?? 去做精准的运算判断处理，代替了 || 运算符
? ? ? ? 原因：相信大家在日常的代码书写当中经常会用到 &&? ||? 这两种非常好用的运算符，今天就给大家介绍一种比较好用的运算符，它类似? || ，但又有所不同，能够处理更为精准的运算需求；
? ? ? ? 原理：?? 运算符只有当左侧围 null 或者 undifined 时才会进行右侧的运算，没错相比于 || 只要左侧为前端意义上的 'false' 不同，这里的对于类型的判断更为严谨；
????????废话不多说，使用方法的代码如下：
const isRunRightCode = {
old_yes: [ 0, false, '', undefined, null ],
old_no: [ 1 ], // 任何 判断后布尔值为true的都会直接输出，不运行右侧代码
new_yes: [ undefined, null ],
new_no: [ 0, 1, false, '' ]
}
// 此处不一一举例，一个数组中的数据达到的效果是一样的，只是为了让大家能更好的区分
// 运算 结果（输出右面 或者 未输出右面）
// || 运算符的运用
console.log( isRunRightCode.old_yes[0] || '输出右面' ) // 输出右面
console.log( isRunRightCode.old_no[0] || '输出右面' ) // 输出右面
// ?? 运算符的运用
console.log( isRunRightCode.new_yes[0] ?? '输出右面' ) // 输出右面
console.log( isRunRightCode.new_no[0] ?? '输出右面' ) // 输出右面
|