关于javascript:前端性能优化js中优化条件判断语句

在开发过程中，因为谋求开发速度，咱们往往很多时候都没有留神代码的可读性与性能，这里介绍几个技巧，让你写出可读性强、简洁的js代码

1、多个条件满足之一时，举荐应用Array.includes

// 优化前function test(val) {    if (val === 'js' || val === 'java' || val === 'python') {        console.log('编程语言')    }}// 优化后function test(val) {    cosnt arr = ['js', 'java', 'python']    if (arr.includes(val)) {        console.log('编程语言')    }}

2、缩小嵌套，尽早返回

// 优化前function test(val) {    if (val) {        if (val === 'js') {            console.log(val)        } else {            console.log('其余')        }    } else {        return    }}// 优化后function test(val) {    if (!val) return    val === 'js' ? console.log(val) : console.log('其余')}

3、应用函数的默认参数与解构

// 优化前function test(val, num) {    const item = num || 1    console.log(`this is ${item}${val}`)}test('js', 4)// 优化后function test(val, num = 1) {    console.log(`this is ${num}${val}`)}test('java', 4)

如果默认参数是对象呢？咱们就能够应用解构了

// 优化前function test(val) {    if (val && val.name) {        console.log(val.name)    } else {        console.log('null')    }}test({name: 'js', num: 1})// 优化后function test({name} = {}) {    console.log(name)}test({name: 'js', num: 1})

4、应用map或者对象字面量代替switch语句

// 优化前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)// 优化后，对象字面量形式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()

// 优化前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()// 优化后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()