在我们日常搬砖中，我们经常会看到三元运算符，但是你了解三元运算符到底是怎么用吗？接下来我们就下来详细介绍一下三元运算符
什么是三元运算符？
三元运算符在JavaScript中的的表现形式是
?，它的作用是“计算在它之前传递的条件表达式，并根据条件表达式的结果判断应该执行问号(?)后的哪一段代码”。(?)后接两端不同情况下该执行的代码，代码之前用冒号分隔，:。
它的语法如下所示：
条件表达式 ? 结果为true执行的代码 : 结果为false执行的代码;
当我们的条件表达式运行结果为true时，执行（:）冒号前的代码，当条件表达式结果为false时，执行（:）冒号后面的代码。
如何使用三元运算符？
当我们需要根据某一个表达式的运算结果来决定我们的接下来要执行的代码时，我们就可以使用三元运算符。
//const student = false; //第一种情况为student==false，执行Welcome, Guest!
const student = 'zayyo'; //第二种情况为true，执行Welcome, zayyo!
const welcomeStudent = student ? `Welcome, ${student}!` : "Welcome, Guest!";
console.log(welcomeStudent); // Welcome, zayyo!
在上面的代码中，我们把studnent当做布尔条件去求值，当student为true时，我们把（:）冒号前的值赋给welcomeStudent，当student的值为false时，我们把（:）冒号后的值赋给welcomeStudent。所以三元运算符又被称为条件运算符，只有在满足条件的情况下才会执行正确的代码
在JavaScript中false、0、""、null、undefined、NaN都被判定为假值（等同于false），除此之外的其他值都被判定为真值（等同于true）。
那什么时候使用三元运算符呢？
我们常见的三元运算符例子的都只有两种结果，要么为true，要么为false。与之类似的代码结构就只有我们的if/else选择结构，我们可以用三元运算符来代替if/else的使用，用来增加代码的可读性和简洁性
例子：
// 使用if/else
{
const welcomeStudent = student => {
if (student) {
return `Welcome, ${student.name}!`;
} else {
return "Welcome, Guest!";
};
};
console.log(welcomeStudent({ name: 'zayyo' })); // Welcome, zayyo!
console.log(welcomeStudent()); // Welcome, Guest!
}
// 使用三元运算符
{
const welcomeStudent = student => student ? `Welcome, ${student.name}!` : "Welcome, Guest!";
console.log(welcomeStudent({ name: 'zayyo' })); // Welcome, zayyo!
console.log(welcomeStudent()); // Welcome, Guest!
}
在上面的例子中，我们不难看出三元运算符有着更好的可读性和简洁性
链式三元运算符
那如果我们遇见更加复杂的代码，如if/else if/else或者是switch的结果我们如何去使用三元运算符去优化代码呢？
我们可以使用链式三元运算符去实现
// 使用 if/else if/else
const grade = mark => {
if (mark > 100) {
return;
} else if (mark > 80) {
return '优秀';
} else if (mark > 70) {
return '良好';
} else if (mark > 60) {
return '及格';
} else if (mark > 50) {
return '不及格';
} else {
return '差';
};
};
console.log(grade(100)); // 优秀
console.log(grade(1000)); // undefined
console.log(grade(10)); // 差
// 使用链式三元运算符
const grade = mark => mark > 100 ? undefined
: mark > 80 ? '优秀'
: mark > 70 ? '良好'
: mark > 60 ? '及格'
: mark > 50 ? '不及格'
: '差';
console.log(grade(100)); // 优秀
console.log(grade(1000)); // undefined
console.log(grade(10)); // 差
在链式调用三元运算符中，我们把条件运算符链接到每个级别的三元运算符中的第三个操作数里，但是对于初级程序员来说，这样的做法不仅不能提高代码的可读性反而会适得其反。所以当我们遇见更加复杂的选择代码时我们还是建议使用更加繁琐的if/else if/else来保存代码的可读性。
结论
在比较简单的选择结构时运用我们的三元运算符确实可以提升我们的代码的可读性以及简洁性，编写代码时也更快，但是如果是复杂的选择结构时运用链式三元运算符，不仅不会提高代码的可读性，反而会适得其反。所以合理的选择使用三元运算符很重要
写在最后
伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 22 天，点击查看活动详情
