js中三元表达式(条件运算符)的用法总结

JavaScript 的三元表达式（也称为条件运算符）是一种简洁的语法，用于根据一个条件表达式的真假来返回不同的值。其基本语法如下：

condition ? exprIfTrue : exprIfFalse;

• condition 是要判断的条件表达式。
• exprIfTrue 是当条件为真时要执行的表达式。
• exprIfFalse 是当条件为假时要执行的表达式。

用法示例

1、基本用法

const age = 18;
const canVote = age >= 18 ? '可以投票' : '不可以投票';
console.log(canVote); // 输出: 可以投票

2、嵌套使用

你可以嵌套使用多个三元表达式，虽然可读性可能会降低。

const score = 85;
const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'D';
console.log(grade); // 输出: B

3、在函数中使用

三元表达式可以在函数中使用，以根据参数返回不同的结果。

function getStatus(isActive) {
    return isActive ? 'Active' : 'Inactive';
}

console.log(getStatus(true));  // 输出: Active
console.log(getStatus(false)); // 输出: Inactive

4、在 JSX 或模板中使用

三元表达式也常用于 React 的 JSX 或 Vue 的模板中，以动态渲染内容。

// 在 React 中
const isLoggedIn = true;
return (
    <div>
        {isLoggedIn ? <p>欢迎回来！</p> : <p>请登录</p>}
    </div>
);

<!-- 在 Vue 中 -->
<template>
    <div>
        <p>{{ isLoggedIn ? '欢迎回来！' : '请登录' }}</p>
    </div>
</template>

5、作为函数参数

三元表达式可以直接作为函数参数传递。

function greet(name) {
    return name ? `Hello, ${name}!` : 'Hello, guest!';
}

console.log(greet('Alice')); // 输出: Hello, Alice!
console.log(greet(''));      // 输出: Hello, guest!

注意事项

• 可读性：虽然三元表达式可以使代码更简洁，但过多的嵌套会使代码变得难以阅读。在复杂的条件判断中，使用 if...else 语句可能会更清晰。
• 短路求值：三元运算符的评估是在一个表达式的上下文中进行的。它可以在某些情况下帮助优化代码，但要小心评估复杂的表达式。