JS三元表达式

三元表达式怎么用？

1. 赋值：
const foo = condition ? 'bar' : 'baz'

2. 执行操作：
condition
    ? (...)
    : (...)

3. 作为返回值：
function(condition) {
    return condition ? 'bar' : 'baz'
}

三元表达式怎么就有用了？

代码量会减少这是事实，配合箭头函数写函数式代码，哪个更易读这个就是主观判断了，见仁见智：

实现一个 flat 函数：
const isArr = arg => Object.prototype.toString.call(arg) === '[object Array]'
const flat = inputAny =>
  (
    isArr(inputAny[0])
      ? flat(inputAny[0])
      : [inputAny[0]]
  )
  .concat(
    inputAny.length > 1
      ? flat(inputAny.slice(1))
      : []
  )

同样的思路用 if-else：
const flat = inputAny => {
  let pre
  if (isArr(inputAny[0]) {
    pre = flat(inputAny[0])
  } else {
    pre = [inputAny[0]]
  }
  if (inputAny.length > 1) {
    return pre.concat(flat(inputAny.slice(1)))
  } else {
    return pre.concat([])
  }
}

function example() {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

function example() {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

vue 里面的一个方法：

根据 data.hide 配合 className 控制元素显隐：
<div class="btn" :class="hide ? '_hide' : ''">
...
btn {
    translate: ...
}
btn._hide {
    opacity: 0;
    transform: ...
}

jsx 写 react 应该很常用吧，毕竟没有 v-if v-else：

export default function () {
  return (
    <div className={ctnr}>
        condition
            ? <div>yes</div>
            : <div>no</div>    
    </div>
  )
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6169