Shorthand for if-else statement-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要在 web 应用程序中使用条件语句。其中最常见的是 if-else 语句。在某些情况下，当只有一行代码需要执行时，if-else 语句可能会变得冗长且难以阅读。在这种情况下，我们可以使用 if-else 的简写方式来使代码更加简洁和易于理解。

三元运算符

最常见的 if-else 简写方式是使用三元运算符（也称为条件运算符）。它的语法如下：

condition ? expression1 : expression2

如果 condition 为 true，则表达式 expression1 将被执行。否则，将执行表达式 expression2。这个语法与 if-else 语句等效，但代码更加紧凑。

以下是一个示例，演示如何使用三元运算符计算两个数字中的最大值：

const x = 10;
const y = 20;
const max = (x > y) ? x : y;
console.log(max); // 输出 20

这里，我们首先定义了两个变量 x 和 y。然后，我们使用三元运算符来比较这两个数字，并将比较结果赋值给变量 max。最后，我们将 max 输出到控制台。

&& 和 || 运算符

除了三元运算符之外，我们还可以使用逻辑运算符 && 和 || 来简化 if-else 语句。这些运算符可以将多个条件组合成一个更大的表达式，并根据结果执行不同的代码。

使用 && 运算符

如果需要在某个条件为 true 时执行一段代码，我们可以使用 && 运算符。它的语法如下：

condition1 && expression

如果 condition1 为 true，则表达式 expression 将被执行。否则，将跳过该表达式并继续执行下一条语句。

以下是一个示例，演示如何使用 && 运算符检查对象是否具有特定属性：

const person = { name: 'Alice', age: 30 };
if (person && person.name) {
  console.log(`Person's name is ${person.name}`);
} else {
  console.log('Person does not have a name');
}

这里，我们首先定义了一个名为 person 的对象，其中包含一个属性 name 和一个属性 age。然后，我们使用 if-else 语句来检查 person 是否具有 name 属性。这种写法也可以简写为：

const person = { name: 'Alice', age: 30 };
person && person.name && console.log(`Person's name is ${person.name}`);

使用 || 运算符

如果需要在某个条件为 false 时执行一段代码，我们可以使用 || 运算符。它的语法如下：

condition1 || expression

如果 condition1 为 false，则表达式 expression 将被执行。否则，将跳过该表达式并继续执行下一条语句。

以下是一个示例，演示如何在数组为空时使用默认值：

const numbers = [];
const defaultValue = 0;
const sum = numbers.reduce((a, b) => a + b, defaultValue);
console.log(sum); // 输出 0

这里，我们首先定义了一个名为 numbers 的空数组和一个名为 defaultValue 的默认值。然后，我们使用 reduce 方法来计算 numbers 数组的总和。由于数组为空，因此 reduce 方法将返回默认值 defaultValue。最后，我们将 sum 输出到控制台。

这种写法也可以简写为：

const numbers = [];
const defaultValue = 0;
const sum = numbers.reduce((a, b) => a + b, defaultValue)

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/31478) ，转载请注明来源
[https://www.javascriptcn.com/post/31478](https://www.javascriptcn.com/post/31478)