Javascript简写条件语句(推荐)

当需要根据某个条件来执行不同的代码块时，我们可以使用条件语句来实现。在JavaScript中，有多种实现条件语句的方式，而本攻略将介绍一种简写条件语句的实现方式。

简写条件语句的语法

简写条件语句的语法基于三元运算符：condition ? expr1 : expr2。它具有以下结构：

condition ? expr1 : expr2

这行代码的意思是，如果condition的值为真，则执行expr1，否则执行expr2。这与常规条件语句的语法非常相似：

if (condition) {
  expr1;
} else {
  expr2;
}

只不过在简写条件语句中省略了大括号和关键字。

这种简写语法通常用于只有一个条件需要检查的短语，不仅可以节省代码行数，还可以让代码更加简洁易懂。

下面通过两个示例来说明简写条件语句的应用。

示例1：比较两个数的大小

let a = 10;
let b = 20;
let result;

// 普通条件语句
if (a > b) {
  result = "a 大于 b";
} else {
  result = "a 小于等于 b";
}
console.log(result);

// 简写条件语句
result = a > b ? "a 大于 b" : "a 小于等于 b";
console.log(result);

代码中定义了两个变量a和b，然后通过常规条件语句和简写条件语句比较两个数的大小，并根据结果输出不同的文本信息。运行此代码，将输出以下内容：

a 小于等于 b
a 小于等于 b

可以看到，两种方式得到的结果相同。使用简写条件语句可以使代码更加简洁和易读。

示例2：设置元素的样式

<button id="btn" type="button">点击我</button>

<script>
let btn = document.getElementById("btn");

// 普通条件语句
if (btn.disabled) {
  btn.style.backgroundColor = "#e6e6e6";
  btn.style.color = "#ccc";
} else {
  btn.style.backgroundColor = "#007bff";
  btn.style.color = "#fff";
}

// 简写条件语句
btn.style.backgroundColor = btn.disabled ? "#e6e6e6" : "#007bff";
btn.style.color = btn.disabled ? "#ccc" : "#fff";
</script>

代码中定义了一个按钮元素btn，然后使用常规和简写条件语句来设置按钮的样式。当按钮禁用时，改变背景颜色和文字颜色，否则使用默认样式。运行此代码，可以在html页面上看到一个按钮。

点击按钮，可以发现按钮的背景颜色和文字颜色随着按钮的状态变化而变化，一旦按钮禁用，背景颜色和文字颜色就会变成灰色。

总结

简写条件语句是JavaScript中的一种简洁的语法，比起普通条件语句，更加简单易读，因此在需要对某个条件进行判断时，可以考虑使用简写条件语句来使代码更加简洁。