前端应该掌握的 JS 小技巧

本文介绍了前端开发中应掌握的JavaScriptES2020新特性,包括null判断运算符??、链式判断?.、动态导入import()、数组方法优化、字符串替换replaceAll()以及Proxy替代Object.defineProperty,帮助开发者提高代码简洁性和性能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端应该掌握的 JS 小技巧

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

??运算符是 ES2020 引入,也被称为null判断运算符( Nullish coalescing operator)

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

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

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

?.也是ES2020 引入,有人称为链判断运算符(optional chaining operator)

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

3、 使用动态导入import()实现按需加载(优化静态import)
我们可以使用 import 语句初始化的加载依赖项

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

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

var arr = [1, 2, 3, 4, 5]
// 以前获取最后一位
console.log(arr[arr.length-1]) //5
// 简化后
console.log(arr.at(-1)) // 5

5、 使用String.prototype.replaceAll()简化replace一次性替换所有子字符串
String.prototype.replaceAll()用法与String.prototype.replace()类似

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

例如需要替换所有a为A:

// 以前
console.log('aaa'.replace(/a/g,'A')) //AAA

// 简化后
console.log('aaa'.replaceAll('a','A')) //AAA

6、使用Proxy替代Object.defineProperty

链接:

https://mp.weixin.qq.com/s/Dr-6iKjuo0ioRpvvthDJIg

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值