js开发中常用的高效技巧

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()只能展开一层数组。

未完待续。。。