IF语句多条件处理：如何实现session.play_type与session.sku的复合规则判断

原有写法的问题 #

你最初尝试的条件逻辑存在两个核心错误：

• 逻辑或（||）不能直接串联多个值做不等于判断，你写的session.sku != 2101-10 || 2101-31 || ...的实际执行逻辑是：先判断session.sku != 2101-10，之后的2101-31等会被直接转为布尔值，只要不为0就永远为真，导致整个sku判断逻辑完全失效。
• 没有区分运算优先级，多个与、或条件同时存在时如果没有明确优先级，会出现逻辑不符合预期的问题。
• 额外注意：sku值带横杠属于字符串类型，判断时必须加引号，否则JS会将2101-10识别为减法表达式，计算得到数值2091，也会导致判断错误。

正确的复合条件写法 #

所有需要同时满足的条件可以合并到同一条判断里，对于多值排除的场景，更简洁易读的方式是将禁止的sku值存入数组，调用includes方法判断：

// 先定义禁止的sku列表，也可以直接写在判断里
const forbiddenSkus = ['2101-10', '2101-31', '2101-12', '2101-21', '2101-20'];
// 完整条件，所有条件同时满足才为真
const showDownloadBtn = session.play_type !== 'm_only' 
  && session.showDown === true 
  && session.s3_down !== ''
  && !forbiddenSkus.includes(session.sku);

如果你不想单独定义数组，也可以直接写全量不等于判断：

const showDownloadBtn = session.play_type !== 'm_only' 
  && session.showDown === true 
  && session.s3_down !== ''
  && session.sku !== '2101-10'
  && session.sku !== '2101-31'
  && session.sku !== '2101-12'
  && session.sku !== '2101-21'
  && session.sku !== '2101-20';

合并后的React代码 #

不需要嵌套多层If组件，直接用合并后的条件即可：

React.createElement(
    If,
    { condition: session.play_type !== 'm_only' && session.showDown === true && session.s3_down !== '' && !['2101-10', '2101-31', '2101-12', '2101-21', '2101-20'].includes(session.sku) },
    React.createElement(
        'a',
        { className: 'btn btn-dark btn-popover', href: "javascript:sendGoogle('" + session.event + "','" + removeApos(session.title) + "','" + session.sku + "','" + session.s3_down + "');", 'data-toggle': 'popover', 'data-trigger': 'focus', title: 'Download', 'data-content': '' },
        React.createElement('i', { className: 'fa fa-download' })
    )
),

内容的提问来源于stack exchange，提问作者acctman