[快速入门前端 42] JavaScript：运算式和运算子 (3) 三元运算子与运算子的优先性

运算子

三元运算子

三元运算子又称为条件运算子，语法为 条件 ? 语句1 : 语句2，意即在条件为 true 时会执行语句1，false 则执行语句2，下面让我们来看几个简单的範例。

// 语法：条件 ? 语句1 : 语句2;// 範例：console.log(2 > 1 ? "2比较大" : "1比较大"); // 2比较大// 三元运算子的条件式 2 > 1 为 true，程式执行 ? 符号后第一个语句// 所以会执行 console.log("2比较大");

其实在开发中我们会经常结合三元运算子和指定运算子进行有条件的变数赋值，例如可以利用变数值的不同来判断及格与否或者是否登入。

将三元运算子的结果指定到变数中

let output = 2 < 1 ? "2小于1" : "1小于2"; // 三元运算子的条件式为 false，执行语句2 (1小于2)// 所以会执行 let output = "1小于2"console.log(output); // 1小于2

回传是否及格

let score = 50;let pass = score > 60 ? "及格了" : "被当了";console.log(pass); // "被当了"

判断两数大小

let num1 = 10;let num2 = 34;console.log(num1 > num2 ? "数字一比较大" : "数字二比较大"); // "数字二比较大"

三元运算子也可以层层嵌套，组合为多重条件应用再複杂的情境中，不过因为较难辨别与维护，所以在开发中较少使用。

在三个数中求最大值：

let a = 10;let b = 3;let c = 55;let max = ((a > b ? a : b) > c) ? (a > b ? a : b) : c;// 在拥有多组四算符时，会依据括号来判断先执行哪一组// 在此範例中会先执行 (a > b ? a : b)，若 a 大则回传 a，b 较大则回传 b// 此範例中 a 较大，所以回传 a，继续执行程式 a > c ? a : c; 进行 a 和 c 的比较// c 较大，回传 cconsole.log(max); // 55

逗号运算子

在程式中英文输入的逗号 , 也是一种运算符，主要用来连接多个运算式，例如宣告多个变数时：

// 原始写法let a = 10;let b = 12;let c = 44;// 简写写法let a = 10, b = 12, c = 44;

运算子的优先性

运算子优先性表示「哪个运算子优先被运算」，是当同一行程式码有多个运算子时决定计算顺序的方式。其实简单来说和数学的四则运算的规则 - 先乘除后加减、由左到右计算 差不多，也就是说会依照每个运算子的优先序计算，若优先序相同则由左到右顺序执行。

以最简单的数学逻辑为例

// 範例一let a = 2 + 4 * 5; // 先乘除，后加减console.log(a); // 22// 範例二let b = (2 + 4) * 5; // 括号先算console.log(b); // 30

运算子的种类繁多，优先性也很複杂，通常我们只需要记得最基本的，而其他明确需要优先计算的可以以括号 () 包裹，确保优先执行就可以了。

运算子优先表 (资料来自 MDN)优先性Precedence运算子Individual operators19( … )18… . …、… [ … ]、new … ( … )、… ( … )、?.17new …16… ++、… --15! …、~ …、+ …、- …、++ …、-- … 14… ** …13… * …、… / …、… % …12… + …、… - …11… << …、… >> …、… >>> …10… < …、… <= …、… > …、… >= …9… == …、… != …、… === …、… !== …8… & …7… ^ …6`…5… && …4`…3… ? … : …2… = …、… += …、… -= …、… **= …、… *= …、… /= …、… %= …、… <<= …、… >>= …1… , …

---

上一篇：[快速入门前端 41] JavaScript：运算式和运算子 (2) 指定运算子、比较运算子、逻辑运算子
下一篇：[快速入门前端 43] JavaScript：流程控制和区块
系列文章列表：[快速入门前端] 系列文章索引列表