你真的会用三元运算符吗？

当前位置：点晴教程→知识管理交流 →『技术文档交流』

freeflydom

2023年6月17日 10:48 本文热度 462

什么是三元运算符？

三元运算符在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来保存代码的可读性。

结论

在比较简单的选择结构时运用我们的三元运算符确实可以提升我们的代码的可读性以及简洁性，编写代码时也更快，但是如果是复杂的选择结构时运用链式三元运算符，不仅不会提高代码的可读性，反而会适得其反。所以合理的选择使用三元运算符很重要

原文链接

该文章在 2023/6/17 10:53:36 编辑过

关键字查询

运算

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。