必备的JS的写法

连续解构

1. 当多层级对象嵌套 通过连续解构

获取一层目录:
    let obj = {
        name: 'lisi',
        age: 19,
        work: {
            address: 'xxx',
            solar: 21213
        }
    }
    const { name } = obj
多层级可以使用嵌套结构
    const { work: { address } } = obj // 可以后续多层级的嵌套

2. 遇到对二维或者Map完美转读取key,value

    const obj = [[name,'lisi'],[age,18]]
    // 通过数组解构得到Object.entries()转换出来的二维数组
    for ( let [key,value] of Object.entries(obj) ) {
        console.log(`${key}:${value}`) //name:'lisi' age: 18
    }

3.数组解构可以使用逗号忽略元素

*// 不需要第二个元素
let [first, , last] = ["A","B","c"]
// first ==> 'A' last==> 'c'

at()获取指定元素最后一个

获取数组指定下标 at()

let arr = [1,2,3,4,3,2,23]
arr.length-1 // 之前的写法

// at 方法可以通过指定元素下标来获取元素当为负值时候就会反向获取
arr.at(-1) 

简化空值判断

// 在处理输入框相关业务时， 往往会判断输入框未输入值的场景。
if (value !== null && value !== undefined && value !== '') {
}

// 通过使用逻辑运算符写法
if(!!value) {
}

// ES6中新出的空值合并运算符了
if ((value ?? '') !== '') {
}

多个判断使用三元运算符

    isElement ? true : false
    isFalse ? true : false
    isAdd ? true : false
    当出现需要判断多次都条件成立时可以通过这种方式简化操作
    isElement ? 成立处理函数 : 
    isFalse ? : 成立处理函数 :
    isAdd : 成立处理函数

多种条件判断

    // 是否还在用 || 多种条件判断
    if (
        type == 1 ||
        type == 2 ||
        type == 3 ||
        type == 4 ||
    ) {}
    const isTrue = [1, 2, 3, 4];

    if (isTrue.includes(type)) {
        //...
    }

可选链操作符元素属性判断

    当不确定有内容存需要判断
    let name = boj && obj.name // 最开始的写法
    const name = obj?.name

// 不确定某个对象存在某个属性但是需要添加某属性且存在需保留原属性
    let people = {
      name: "lisi",
      details: { age: 82 }
    }
    let city = people?.city ?? "城市";
    people.city =city
    console.log(people.city) // 城市

简化feach请求Promise获取

     btn.addEventListener('click', async function (e) {
        try {
          let data = await fetch('url')
          let res = await data.json()
          console.log(res)
        } catch (error) {
        // 异常信息
          error.message
        }
     })

简化if..else if ...

多使用 || 和 && 来替代if else

if (a === 1) {
   a = 3;
} else if (a === 5) {
   a = 15;
} else {
   a = 2;
}

简化写法：
 (a === 1) && (a = 3) || (a === 5) && (a = 15) || (a = 2);