1.可选链操作符
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。
let obj = {
person: {
name: '法外狂徒张三'
}
}
// 如果我们想取obj里person里的name字段,要对obj和person等字段做判空处理,不然代码就会报错
原始方法:const name = obj && obj.person && obj.person.name
改进:const name = obj?.person?.name;
2.空值合并操作符
空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。
const value = 0
//在处理输入框相关业务时,往往会判断输入框未输入值的场景。
if (value !== null && value !== undefined && value !== '') {
//...
}
//使用空值合并操作符,如下
if (value ?? false) {
//...
}
注意与 || 的区别。由于 || 是一个布尔逻辑运算符,左侧的操作数会被强制转换成布尔值用于求值。任何假值(0, '', NaN, null, undefined)都不会被返回。这导致如果你使用0,''或NaN作为有效值,就会出现不可预料的后果。
// 这样写会更好
const newValue = value ?? value2
3.map,object代替if else
const status= 0
let statusText = ''
// 0 已下单 ,未支付 , 1已支付, 2已发货, 3已完成
if (statusCode === 0) {
statusText = '已下单,未支付'
} else if (statusCode === 1) {
statusText = '已支付'
} else if (statusCode === 2) {
statusText = '已发货'
}else if (statusCode === 3) {
statusText = '已完成'
}
//更好的写法
const statusMap = new Map([
[0, '已下单,未支付'],
[1, '已支付'],
[2, '已发货'],
[3, '已完成'],
])
statusText = statusMap.get(status)
4.多维数组转一维数组
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
上面代码中,flat()的参数为2,表示要拉平两层的嵌套数组。
如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
flatMap()方法对原数组的每个成员执行一个函数,相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
注意:flatMap()只能展开一层数组。