Javascript三元条件运算符
515 字
3 分钟
Javascript三元条件运算符
今天谈一个小知识点，三元运算符。三元运算，顾名思义会有三个要素，表达式的大致组成为condition ? expr1 : expr2；一个语句加两个表达式。问号之前为判断语句。如果为真，则执行第一个表达式，如果为假，则执行第二个表达式。我的理解其实就是简化的if else语句，举个栗子，经常看到的一个点击展开，再点击隐藏按钮:
我想实现点击输入法，实现下面ul的展开与隐藏，如果我们用if else的话可能会这么写：
oBth.onclick=function(){ if (oUl.style.display=='block') { oUl.style.display=='none'; }else{ oUl.style.display=='block'; } }但是如果我们用三元运算符的话可能就只需要下面这一行代码：
oBth.onclick=function(){ oUl.style.display == "block" ? oUl.style.display="none" : oUl.style.display="block"}有木有很神奇。当然我只是用了一个比较容易理解的写法，还有很大的优化空间，我们当然也可以这样：
oBth.onclick=function(){ var style = oUl.style.display; oUl.style.display= style == "block" ? "none":"block" //这样写的话就一定不能忘了把运算结果重新赋值给元素 - - //oUl.style.display= (style == "block" ? "none":"block") 可读性更高 }上面代码的意思是，如果style == “block” 成立的话就把none返回，不成立就返回block，然后把返回结果赋值给作用元素，不过要特别注意 = 和 == 用法和区别。因为赋值运算符（=）的优先级比较低，所以会最后执行赋值运算。如果把后面的三元运算符加上（）可读性会更高一点，但效果是一样的。
比较容易出错的地方：
三元运算比较容易出错的应该就是运算的优先级问题：
var isMember = false; console.log("当前费用" + isMember ? "$2.00" : "$10.00"); //返回$2.00 "当前费用false" ? "$2.00" : "$10.00");在js中字符串是为真的，所以会输出$2.00.
不过为了避免以上错误的话，可以记住
不是false, 0, undefined, NaN, "" or null，js都认为是true;
感谢阅读。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
Javascript三元条件运算符
https://luoruihuan.top/posts/TernaryConditionalOperator/相关文章智能推荐
1
前端知识点总结(六) JavaScript篇(二)
前端一、写在前面的叨叨叨 前两周整理一些比较核心的Js的基础，这两周又收集了一些问题和知识点，拿到这篇文章来整理回顾下，大部分其实都是一些初级面试经常问的， 可以作为一个题库，等需要面试的时候刷刷也是极好
2
前端知识点总结(五) JavaScript篇(一)
前端一、写在前面的叨叨叨 之前用了四篇对Html,Css进行了总结，从这篇开始就是对Js进行一些温习回顾，在实际业务中框架用的多了，对一些原生属性是越来越不熟悉了，一些基础的操作dom的方法慢慢的也越来越
3
博客挂了三天，我和 AI Agent 把它整个重造了一遍
全栈工程一次域名失联的完整排障：DNS 记录凭空消失、HTTPS 证书被撤、真正的站藏在遗忘的服务器里。修完索性换掉整个主题，迁移 25 篇十年文章，顺手记录 AI Agent 的四次真实翻车。
4
个人网站 GEO 实践：让 ChatGPT、Perplexity 引用你的内容
GEO（生成式引擎优化）不是玄学。以这个网站的真实配置为例，拆解 AI 爬虫矩阵、llms.txt、结构化数据和内容策略的完整落地。
5
开篇：技术派罗恩上线，聊 AI 实战、全栈工程和工程师搞钱
这个网站的由来：我是谁、为什么写、以及这个站本身是怎么搭起来的——Astro + Cloudflare Tunnel + GitHub Actions 的完整链路。
随机文章随机推荐