博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js条件语句的优化
阅读量:6766 次
发布时间:2019-06-26

本文共 3385 字,大约阅读时间需要 11 分钟。

  1. 省略else
function (condition) {        if (condition) {        	console.log('this')        } else {            console.log('other')	        }    }()复制代码

日常可以简化为

function (condition) {        if (condition) {        	console.log('this')        }        console.log('other')    }()复制代码
这样if条件不符合时会执行console语句,等同于if else   复制代码
  1. 使用&&符
function (condition) {    not good        if(condition) {           console.log('this')         }    }        function (condition) {     good        condition && console.log('this')    }复制代码
condition若为true执行console.log('this')    复制代码
  1. 使用!(非)符号
if(data === null || data === '') bad   if(!data)                        good复制代码
  1. 使用 Array.includes
function (res) {     not good        if(res === 'red' || res === 'blue')        ...    }                 function (res) {     good        const coolArray = ['red', 'blue']        if(coolArray.includes(res))        ...    }          复制代码
  1. 使用Array.every & Array.some来判断所有 / 部分
// 判断是否所有水果都是红色    const fruits = [              { name: 'apple', color: 'red' },        { name: 'banana', color: 'yellow' },        { name: 'grape', color: 'purple' }    ];        function test() {         not good      let isAllRed = true;      for (let f of fruits) {        if (!isAllRed) break;        isAllRed = (f.color == 'red');  // false      }    }    function () {             good        const isAllRed = fruits.every(f => f.color == 'red'); //flase  every/some返回布尔值    }复制代码
  1. 三层以上if可以先return false
function test() {       not good        if(true) {            clnsole.log('第一个执行语句')            if(fruits.includes(apple)) {               console.log('第二个执行语句')           } else {               console.log('非fruits.includes(apple)')           }        } else {            throw new Error('error')        }    }        可以使用倒装判断条件可以先执行error,减少if嵌套&提高性能    function test() {       good        if(false) throw new Error('error')        if(true) {            clnsole.log('第一个执行语句')            if(fruits.includes(apple)) {               console.log('第二个执行语句')           }        }    }        也可以对第二个if进一步处理    function test() {       good        if(false) throw new Error('error')        if(!fruits.includes(apple)) return        console('第二个执行语句')                if(fruits.includes(apple)) {            console.log('第二个执行语句')        }    }复制代码
原则:尽可能少的嵌套和尽早的return复制代码
  1. 对象遍历代替switch
    根据name,打印对应color
function test(name) {        switch (name) {            case 'apple':              return 'red'            case 'banana':              return 'yellow'            case 'grape':              return 'purple'            defaule:              return ''        }    }    test(null)    // ''    test('apple')    // red        使用对象遍历则更简单    const fruitName = {        apple: 'red',        banana: 'yellow',        grape: 'purple',    }    functin test(name) {        return fruitName[name] || []    }        也可以使用es6 map,可以存储key,value的值    const fruitName = new Map{        .set('apple', 'red'),        .set('banana',  'yellow'),        .set('grape', 'purple')    }    functin test(name) {        return fruitName.get(name) || []    }        也可以使用filter    const fruitName = [        {name: 'apple', color: 'red'},        {name: 'banana': color: 'yellow'},        {name: 'grape': color: 'purple'},    ]    functin test(name) {        return fruitName.filter(v => v.name == name)    }复制代码

转载于:https://juejin.im/post/5ccea46ae51d453a363848d2

你可能感兴趣的文章
用MySQL Slow Log解决MySQL CPU占用高的问题
查看>>
php+smarty分页类
查看>>
oracle 用户密码过期-ORA-28001: 口令已经失效
查看>>
Java 实现 Hook 对鼠标键盘监听
查看>>
非常实用的Chrome插件之总结
查看>>
你应该知道的7种回归方法
查看>>
grunt简单的入门
查看>>
关于css浮动
查看>>
C Primer Plus 第2章 C语言概述
查看>>
Sticky Notes
查看>>
SHELL利器:比较常用的SHELL命令(持续更新)
查看>>
Ubuntu 默认启动到命令行 12.04 .
查看>>
Vue调试神器vue-devtools安装
查看>>
Android Dialog几种对话框
查看>>
Python+Flask.0009.FLASK静态资源之默认及自定义资源目录
查看>>
一种可能的 Django 目录布局
查看>>
poj 怪盗基德的滑翔翼
查看>>
java锁学习(二)
查看>>
一辆自行车骑出生活的激情
查看>>
看看这变态的自动布局
查看>>