js 判断条件该怎么写

发布网友 发布时间：2022-05-07 11:10

我来回答

共3个回答

懂视网 时间：2022-05-14 18:06

本篇文章给大家带来的内容是关于JavaScript复杂逻辑判断的技巧性写法（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。

举个例子

先看一段代码

/**

 * 按钮点击事件

 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消

 */
const onButtonClick = (status) => {

 if (status == 1) {

 sendLog('processing') jumpTo('IndexPage')

 } else if (status == 2) {

 sendLog('fail') jumpTo('FailPage')

 } else if (status == 3) {

 sendLog('fail') jumpTo('FailPage')

 } else if (status == 4) {

 sendLog('success') jumpTo('SuccessPage')

 } else if (status == 5) {

 sendLog('cancel') jumpTo('CancelPage')

 } else {

 sendLog('other') jumpTo('Index')

 }

}

通过代码可以看到这个按钮的点击逻辑：根据不同活动状态做两件事情，发送日志埋点和跳转到对应页面，大家可以很轻易的提出这段代码的改写方案，switch出场：

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status) => {
 switch (status) {

 case 1:

 sendLog('processing')

 jumpTo('IndexPage')

 break

 case 2:

 case 3:

 sendLog('fail')

 jumpTo('FailPage')

 break

 case 4:

 sendLog('success')

 jumpTo('SuccessPage')

 break

 case 5:

 sendLog('cancel')

 jumpTo('CancelPage')

 break

 default:

 sendLog('other')

 jumpTo('Index')

 break

 }

}

嗯，这样看起来比if/else清晰多了，细心的同学也发现了小技巧，case 2和case 3逻辑一样的时候，可以省去执行语句和break，则case 2的情况自动执行case 3的逻辑。

这时有同学会说，还有更简单的写法：

const actions = {

 '1': ['processing', 'IndexPage'],

 '2': ['fail', 'FailPage'],

 '3': ['fail', 'FailPage'],

 '4': ['success', 'SuccessPage'],

 '5': ['cancel', 'CancelPage'],

 'default': ['other', 'Index'],

}

/**

 * 按钮点击事件

 * @param {number} status 活动状态：1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统取消

 */

const onButtonClick = (status) => {

 let action = actions[status] || actions['default'],

 logName = action[0],

 pageName = action[1]

 sendLog(logName)

 jumpTo(pageName)

}

上面代码确实看起来更清爽了，这种方法的聪明之处在于：将判断条件作为对象的属性名，将处理逻辑作为对象的属性值，在按钮点击的时候，通过对象属性查找的方式来进行逻辑判断，这种写法特别适合一元条件判断的情况。

是不是还有其他写法呢？有的：

const actions = new Map([

 [1, ['processing', 'IndexPage']],

 [2, ['fail', 'FailPage']],

 [3, ['fail', 'FailPage']],

 [4, ['success', 'SuccessPage']],

 [5, ['cancel', 'CancelPage']],

 ['default', ['other', 'Index']]

])

/**

 * 按钮点击事件

 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消

 */

const onButtonClick = (status) => {

 let action = actions.get(status) || actions.get('default')

 sendLog(action[0])

 jumpTo(action[1])

}

这样写用到了es6里的Map对象，是不是更爽了？Map对象和Object对象有什么区别呢？

1.一个对象通常都有自己的原型，所以一个对象总有一个"prototype"键。

2.一个对象的键只能是字符串或者Symbols，但一个Map的键可以是任意值。

3.你可以通过size属性很容易地得到一个Map的键值对个数，而对象的键值对个数只能手动确认。

我们需要把问题升级一下，以前按钮点击时候只需要判断status，现在还需要判断用户的身份：

/**

 * 按钮点击事件

 * @param {number} status 活动状态：1开团进行中 2开团失败 3 开团成功 4 商品售罄 5 有库存未开团

 * @param {string} identity 身份标识：guest客态 master主态

 */

const onButtonClick = (status, identity) => {

 if (identity == 'guest') {

 if (status == 1) {

 //do sth

 } else if (status == 2) {

 //do sth

 } else if (status == 3) {

 //do sth

 } else if (status == 4) {

 //do sth

 } else if (status == 5) {

 //do sth

 } else {

 //do sth

 }

 } else if (identity == 'master') {

 if (status == 1) {

 //do sth

 } else if (status == 2) {

 //do sth

 } else if (status == 3) {

 //do sth

 } else if (status == 4) {

 //do sth

 } else if (status == 5) {

 //do sth

 } else {

 //do sth

 }

 }

}

原谅我不写每个判断里的具体逻辑了，因为代码太冗长了。

原谅我又用了if/else，因为我看到很多人依然在用if/else写这种大段的逻辑判断。

从上面的例子我们可以看到，当你的逻辑升级为二元判断时，你的判断量会加倍，你的代码量也会加倍，这时怎么写更清爽呢？

const actions = new Map([

 ['guest_1', () => { /*do sth*/ }],

 ['guest_2', () => { /*do sth*/ }],

 ['guest_3', () => { /*do sth*/ }],

 ['guest_4', () => { /*do sth*/ }],

 ['guest_5', () => { /*do sth*/ }],

 ['master_1', () => { /*do sth*/ }],

 ['master_2', () => { /*do sth*/ }],

 ['master_3', () => { /*do sth*/ }],

 ['master_4', () => { /*do sth*/ }],

 ['master_5', () => { /*do sth*/ }],

 ['default', () => { /*do sth*/ }],

])



/**

 * 按钮点击事件

 * @param {string} identity 身份标识：guest客态 master主态

 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 开团成功 4 商品售罄 5 有库存未开团

 */

const onButtonClick = (identity, status) => {

 let action = actions.get(`${identity}_${status}`) || actions.get('default')

 action.call(this)

}

上述代码核心逻辑是：把两个条件拼接成字符串，并通过以条件拼接字符串作为键，以处理函数作为值的Map对象进行查找并执行，这种写法在多元条件判断时候尤其好用。

当然上述代码如果用Object对象来实现也是类似的：

const actions = {

 'guest_1': () => { /*do sth*/ },

 'guest_2': () => { /*do sth*/ },

 //....

}



const onButtonClick = (identity, status) => {

 let action = actions[`${identity}_${status}`] || actions['default']

 action.call(this)

}

如果有些同学觉得把查询条件拼成字符串有点别扭，那还有一种方案，就是用Map对象，以Object对象作为key：

const actions = new Map([

 [{

 identity: 'guest',

 status: 1

 }, () => { /*do sth*/ }],

 [{

 identity: 'guest',

 status: 2

 }, () => { /*do sth*/ }],

 //...

])



const onButtonClick = (identity, status) => {

 let action = [...actions].filter(([key, value]) => (key.identity == identity && key.status == status))

 action.forEach(([key, value]) => value.call(this))

}

是不是又高级了一点点？

这里也看出来Map与Object的区别，Map可以用任何类型的数据作为key。

我们现在再将难度升级一点点，假如guest情况下，status1-4的处理逻辑都一样怎么办，最差的情况是这样：

const actions = new Map([

 [{

 identity: 'guest',

 status: 1

 }, () => { /* functionA */ }],

 [{

 identity: 'guest',

 status: 2

 }, () => { /* functionA */ }],

 [{

 identity: 'guest',

 status: 3

 }, () => { /* functionA */ }],

 [{

 identity: 'guest',

 status: 4

 }, () => { /* functionA */ }],

 [{

 identity: 'guest',

 status: 5

 }, () => { /* functionB */ }],

 //...

])

好一点的写法是将处理逻辑函数进行缓存：

const actions = () => {

 const functionA = () => { /*do sth*/ }

 const functionB = () => { /*do sth*/ }

 return new Map([

 [{

 identity: 'guest',

 status: 1

 }, functionA],

 [{

 identity: 'guest',

 status: 2

 }, functionA],

 [{

 identity: 'guest',

 status: 3

 }, functionA],

 [{

 identity: 'guest',

 status: 4

 }, functionA],

 [{

 identity: 'guest',

 status: 5

 }, functionB],

 //...

 ])

}



const onButtonClick = (identity, status) => {

 let action = [...actions()].filter(([key, value]) => (key.identity == identity && key.status == status))

 action.forEach(([key, value]) => value.call(this))

}

这样写已经能满足日常需求了，但认真一点讲，上面重写了4次functionA还是有点不爽，假如判断条件变得特别复杂，比如identity有3种状态，status有10种状态，那你需要定义30条处理逻辑，而往往这些逻辑里面很多都是相同的，这似乎也是笔者不想接受的，那可以这样实现:

const actions = () => {

 const functionA = () => { /*do sth*/ }

 const functionB = () => { /*do sth*/ }

 return new Map([

 [/^guest_[1-4]$/, functionA],

 [/^guest_5$/, functionB],

 //...

 ])

}



const onButtonClick = (identity, status) => {

 let action = [...actions()].filter(([key, value]) => (key.test(`${identity}_${status}`)))

 action.forEach(([key, value]) => value.call(this))

}

这里Map的优势更加凸显，可以用正则类型作为key了，这样就有了无限可能，假如需求变成，凡是guest情况都要发送一个日志埋点，不同status情况也需要单独的逻辑处理，那我们可以这样写:

const actions = () => {

 const functionA = () => { /*do sth*/ }

 const functionB = () => { /*do sth*/ }

 const functionC = () => { /*send log*/ }

 return new Map([

 [/^guest_[1-4]$/, functionA],

 [/^guest_5$/, functionB],

 [/^guest_.*$/, functionC],

 //...

 ])

}



const onButtonClick = (identity, status) => {

 let action = [...actions()].filter(([key, value]) => (key.test(`${identity}_${status}`)))

 action.forEach(([key, value]) => value.call(this))

}

也就是说利用数组循环的特性，符合正则条件的逻辑都会被执行，那就可以同时执行公共逻辑和单独逻辑，因为正则的存在，你可以打开想象力解锁更多的玩法，本文就不赘述了。

总结

本文已经教你了8种逻辑判断写法，包括：

if/else

switch

一元判断时：存到Object里

一元判断时：存到Map里

多元判断时：将condition拼接成字符串存到Object里

多元判断时：将condition拼接成字符串存到Map里

多元判断时：将condition存为Object存到Map里

多元判断时：将condition写作正则存到Map里

至此，本文也将告一段落，愿你未来的人生里，不只是有if/else/switch。

热心网友 时间：2022-05-14 15:14

如果判断中的代码只有一句：
if(条件)
语句;
else
语句;

如果有多句：
if(条件){
语句;
语句;

语句;

}
else {
语句;
语句;
语句;
}

如果只需判读是否true，可以不写else
if(条件)
语句;

提示：条件中可以不是大于小于等于，可以直接是个对象，这样是检查对象是否被声明）

JS判断对象是否存在的10种方法：

判断一个全局对象myObj是否存在，如果不存在，就对它进行声明。

用自然语言描述的算法如下：

if (myObj不存在){

　声明myObj;

}

Juriy Zaytsev指出，判断一个Javascript对象是否存在，有超过50种写法。

只有对Javascript语言的实现细节非常清楚，才可能分得清它们的区别。

第一种写法

根据直觉，你可能觉得可以这样写：

复制代码 代码示例:

if (!myObj) {

　myObj = { };

}

但是，运行这段代码，浏览器会直接抛出ReferenceError错误，导致运行中断。请问错在哪里？

对了，if语句判断myObj是否为空时，这个变量还不存在，所以才会报错。改成下面这样，就能正确运行了。

复制代码 代码示例:

if (!myObj) {

var myObj = { };

}

为什么加了一个var以后，就不报错了？

难道这种情况下，if语句做判断时，myObj就已经存在了吗？

要回答这个问题，就必须知道Javascript解释器的工作方式。Javascript语言是"先解析，后运行"，解析时就已经完成了变量声明，所以上面的代码实际等同于：

复制代码 代码示例:

var myObj;

if (!myObj) {

var myObj = { };

}

因此，if语句做判断时，myObj确实已经存在了，所以就不报错了。这就是var命令的"代码提升"（hoisting）作用。Javascript解释器，只"提升"var命令定义的变量，对不使用var命令、直接赋值的变量不起作用，这就是为什么不加var会报错的原因。

第二种写法

复制代码 代码示例:

除了var命令，还可以有另一种改写，也能得到正确的结果：

if (!window.myObj) {

　myObj = { };

}

window是javascript的顶层对象，所有的全局变量都是它的属性。所以，判断myobj是否为空，等同于判断window对象是否有myobj属性，这样就可以避免因为myObj没有定义而出现ReferenceError错误。不过，从代码的规范性考虑，最好还是对第二行加上var：

复制代码 代码示例:

if (!window.myObj) {

var myObj = { };

}

或写成这样：

复制代码 代码示例:

if (!window.myObj) {

window.myObj = { };

}

第三种写法

上面这种写法的缺点在于，在某些运行环境中（比如V8、Rhino），window未必是顶层对象。所以，考虑改写成：

复制代码 代码示例:

if (!this.myObj) {

　this.myObj = { };

}

在全局变量的层面中，this关键字总是指向顶层变量，所以就可以独立于不同的运行环境。

第四种写法

但是，上面这样写可读性较差，而且this的指向是可变的，容易出错，所以进一步改写：

复制代码 代码示例:

var global = this;

　　if (!global.myObj) {

　　　　global.myObj = { };

　　}

用自定义变量global表示顶层对象，就清楚多了。

第五种写法

还可以使用typeof运算符，判断myObj是否有定义。

复制代码 代码示例:

if (typeof myObj == "undefined") {

　　　　var myObj = { };

　　}

这是目前使用最广泛的判断javascript对象是否存在的方法。

第六种写法

由于在已定义、但未赋值的情况下，myObj的值直接等于undefined，所以上面的写法可以简化：

复制代码 代码示例:

if (myObj == undefined) {

　var myObj = { };

}

有两个地方需要注意，首先第二行的var关键字不能少，否则会出现ReferenceError错误，其次undefined不能加单引号或双引号，因为比较的是undefined这种数据类型，而不是"undefined"这个字符串。

第七种写法

上面的写法在"精确比较"（===）的情况下，依然成立：

复制代码 代码示例:

if (myObj === undefined) {

　　var myObj = { };

}

第八种写法

根据javascript的语言设计，undefined == null，所以比较myObj是否等于null，也能得到正确结果：

复制代码 代码示例:

if (myObj == null) {

　　var myObj = { };

}

不过，虽然运行结果正确，但是从语义上看，这种判断方法是错的，应该避免。

因为null指的是已经赋值为null的空对象，即这个对象实际上是有值的，而undefined指的是不存在或没有赋值的对象。

因此，这里只能使用"比较运算符"（==），如果这里使用"精确比较运算符"（===），就会出错。

第九种写法

还可以使用in运算符，判断myObj是否为顶层对象的一个属性：

复制代码 代码示例:

if (!('myObj' in window)) {

　　　window.myObj = { };

}

第十种写法

最后，使用hasOwnProperty方法，判断myObj是否为顶层对象的一个属性：

复制代码 代码示例:

if (!this.hasOwnProperty('myObj')) {

　　this.myObj = { };

}

总结：

1，如果只判断对象是否存在，推荐使用第五种写法。

2，如果除了对象是否存在，还要判断对象是否有null值，推荐使用第一种写法。

3，除非特殊情况，所有变量都应该使用var命令声明。

4，为了跨平台，建议避免使用window表示顶层对象。
5，在Javascript语言中，null和undefined容易产生混淆。在可能同时涉及两者的情况下，建议使用"精确比较"运算符（===）。

热心网友 时间：2022-05-14 16:32

var type = {};
type.nor = 'url_nor_mp4';
type.high = 'url_high_mp4';
type.super = 'url_super_mp4';
var streamtype = type.super || type.high || type.nor;

建议用对象表示，这种结构的用对象比较合适