java前端有三元表达_放心写 JS 三元表达式

本文鼓吹各位 前端 在写 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 控制元素显隐：

...

btn {

translate: ...

}

btn._hide {

opacity: 0;

transform: ...

}

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

export default function () {

return (

condition

?

yes

:

no

)

}

想到再补充

缺点？

那些说「个人不推荐三元表达式」的，都是从其他人那里听来的吧？流言止于智者。

standard js 说要把问号和冒号放前面：

airbnb style guide 说，对于多重条件的三元建议分开写：

而谷歌的 js 代码建议就只说过建议三元表达式记得在 ? 和 : 左右加空格，没有不推荐三元表达式啊。

var k = a ? (b ? (c ? d : e) : (d ? e : f)) : f ? (g ? h : i) : j

这是你不用三元的原因？我相信时刻 lint 的你，不会把多重条件写成 inline 的：

👆规范使用三元运算符，比 if-else 简洁。。。吧？

写了两年多了，三元的缺点更多是在配合加号的时候操作顺序上：很多人不知道 const a = true ? 1 : 2 + 3 的答案是什么。而不是在多重 condition 的时候引起 bug。

其实这东西和 vim-emacs，space-tab，2空格-4空格 一样，就是个风格问题，说「个人不推荐」的是不知道 JS 可以换行缩进呢？还是说故意想让别人喜欢上自己熟悉的风格呢？见仁见智嘛。