前端开发常用的js小技巧

当有多个条件的时候，只需要满足其中一个就执行的情况

if (a === '条件1' || a === '条件2' || a === '条件3') {
    ...
}

优化后

if (['条件1', '条件2', '条件3'].includes(a)) {
    ...
}

当只有一个if，为true就执行，为false就不执行的情况

if (a) {
    console.log('~~~')
}

优化后

a && console.log('~~~')

只有一个if，else的情况

let a = 1,
let b
if (a > 1) {
    b = a
} else {
    b = 1
}

优化后

let a = 1,
let b = a > 1 ? a : 1

当对象内有这个属性的时候使用这个值，没有的时候使用另外一个值的情况

const obj = {
    name: 'Winter'
}
const defaultName = 'Bob'
let name = obj.name ? obj.name : 'defaultName'

优化后

const obj = {
    name: 'Winter'
}
const defaultName = 'Bob'
let name = obj.name || defaultName
或者
let name = obj.name ?? defaultName

多个if else的情况

function foo(a) {
    if (a === 'one') {
        return 'success'
    } else if (a === 'two') {
        return 'fail'
    } else {
        return 'draw'
    }
}

优化后

let resultObj = {
    one: 'success',
    two: 'fail'
}
function foo(a) {
    return resultObj[a] || 'draw'
}

对象深层次属性存在判断

let obj = {
    obj1: {
        obj2: {
            name: 'Winter'
        }
    }
}
if (obj && obj.obj1 && obj.obj1.obj2 && obj.obj1.obj2.name) {
    ... 
}

优化后

let obj = {
    obj1: {
        obj2: {
            name: 'Winter'
        }
    }
}
if (obj?.obj1?.obj2?.name ) {
    ...
}

多层解构的情况

const res = await apiGetUserInfo('1001')
console.log(res.data.data.id, res.data.data.username, res.data.data.age)

优化后

const { status, msg, data: { data: { id: 1, username: 'Winter', age: 20 }} } = await apiGetUserInfo('1001')
console.log(id, username, age)

函数传入对象为参数

const person = {
    name: 'Winter',
    age: 20
}
function handleAdd(person) {
    console.log(person.age, person.name)
}
handleAdd(person)

优化后

const person = {
    name: 'Winter',
    age: 20
}
function handleAdd({age, name}) {
    console.log(age, name)
}
handleAdd(person)