在開發(fā)過程中，由于追求開發(fā)速度，我們往往很多時候都沒有注意代碼的可讀性與性能，這里介紹幾個技巧，讓你寫出可讀性強(qiáng)、簡潔的js代碼

1、多個條件滿足之一時，推薦使用Array.includes

// 優(yōu)化前
function test(val) {
    if (val === 'js' || val === 'java' || val === 'python') {
        console.log('編程語言')
    }
}

// 優(yōu)化后
function test(val) {
    cosnt arr = ['js', 'java', 'python']
    if (arr.includes(val)) {
        console.log('編程語言')
    }
}

2、減少嵌套，盡早返回

// 優(yōu)化前
function test(val) {
    if (val) {
        if (val === 'js') {
            console.log(val)
        } else {
            console.log('其他')
        }
    } else {
        return
    }
}

// 優(yōu)化后
function test(val) {
    if (!val) return
    val === 'js' ? console.log(val) : console.log('其他')
}

3、使用函數(shù)的默認(rèn)參數(shù)與解構(gòu)

// 優(yōu)化前
function test(val, num) {
    const item = num || 1
    console.log(`this is ${item}${val}`)
}
test('js', 4)

// 優(yōu)化后
function test(val, num = 1) {
    console.log(`this is ${num}${val}`)
}
test('java', 4)

如果默認(rèn)參數(shù)是對象呢？我們就可以使用解構(gòu)了

// 優(yōu)化前
function test(val) {
    if (val && val.name) {
        console.log(val.name)
    } else {
        console.log('null')
    }
}
test({name: 'js', num: 1})

// 優(yōu)化后
function test({name} = {}) {
    console.log(name)
}
test({name: 'js', num: 1})

4、使用map或者對象字面量替代switch語句

// 優(yōu)化前
function test(num) {
    switch(num) {
        case 1:
            return ['js', 'java']
        case 2:
            return ['python', 'ruby']
        case 3:
            return ['php', 'c#']
        default
    }
    conosle.log(num)
}
test(1)

// 優(yōu)化后，對象字面量方式
function test(num) {
    const arr = {
        1: ['js', 'java'],
        2: ['python', 'ruby'],
        3: ['php', 'c#'],
    }
    console.log(arr[num])
}
test(1)

// map方式
function test(num) {
    const arr = new Map()
        .set(1, ['js', 'java'])
        .set(2, ['python', 'ruby'])
        .set(3, ['php', 'c#'])
    console.log(arr.get(num))
}
test(1)

5、使用Array.every()或者Array.some()

// 優(yōu)化前
const item = [
    {name: 'js', num: 2},
    {name: 'java', num: 4},
    {name: 'pyton', num: 2},
    {name: 'php', num: 1},
]
function test() {
    let isNumTwo = true
    for (let val of item) {
        if (!isNumTwo) break
        isNumTwo = (val.num === 2)
    }
    console.log(isNumTwo)  // false
}
test()

// 優(yōu)化后
const item = [
    {name: 'js', num: 2},
    {name: 'java', num: 4},
    {name: 'pyton', num: 2},
    {name: 'php', num: 1},
]
function test() {
    const isNumTwo = item.some(val => val.num === 2)
    console.log(isNumTwo)  // true
}
test()