JavaScript中“三元表达式”

一、概述

话不多说，先上栗子：

const  poreValue = poreMember == '48' ? 12 : 4；

    叮~ 这段代码使用了三元运算符的javaScript表达式，他允许基于条件表达式的结果来选择其中的一个。

运算符的语法：

condition ? valueIfTrue : valueIfFalse;

在这句代码中：

        condition是一个布尔表达式，如果为true,则选择valueIfTrue，否则选择valueIFalse

上述栗子中，

• poreValue是一个变量，其值被用来与字符串'96'进行比较。
• ==是一个运算符，用来检查poreValue是否等于48。
• 12是一个condition为true时，即poreMember 等于 48 时的返回值。
• 4是当condition为false时，即poreMenber 不等于48时的返回值。

因此，poreValue这个变量将根据 poreMember 的值被赋予 12 或 4 中的一个。具体来说：

• 如果 poreMember 的值是字符串 '48'，那么 poreValue将被赋值为 12。
• 如果 poreMember 的值不是 '48'，那么 poreValu假设我们要根据用户的年龄来决定是否允许他们进入某个场所：e将被赋值为 4。

 除了基本的三元运算符之外，还可以将多个三元运算符嵌套使用，以处理更复杂的条件逻辑

1、基本三元运算符的使用示栗子

假设我们要根据用户的年龄来决定是否允许他们进入某个场所：

let age = 17;
let accessGranted = age >= 18 ? "Yes" : "No";
console.log(accessGranted); // 输出 "No"，因为 age < 18

        我们使用三元运算符来判断用户是否年满18岁，如果是，则accessGranted为"Yes"，否则为"No"。

 2、多重三元运算符的使用示栗

        假设我们要根据用户的年龄和会员状态来决定他们的折扣率：

let age = 25;
let isMember = true;
let discount = age >= 60 ? 0.2 : isMember ? 0.1 : 0;
console.log(discount); // 输出 0.1，因为用户是会员但年龄未满60岁

我们首先检查用户是否年满60岁，如果是，给予20%的折扣。如果不是，我们进一步检查用户是否是会员，如果是，给予10%的折扣。如果两个条件都不满足，则没有折扣。

 3、三元运算符可以解决的问题

1. 条件赋值：当需要根据条件给变量赋值时。
2. 简短的if-else逻辑：当if-else逻辑非常简单时，使用三元运算符可以使代码更简洁。
3. 表达式中：在需要返回值的表达式中，三元运算符可以减少代码行数。
4. 嵌套条件：在需要多个条件判断时，嵌套的三元运算符可以替代多个if-else语句。

 但是要注意:

        虽然三元运算符可以使代码更简洁，但过度使用或嵌套过深会使代码难以阅读和维护。因此，建议在条件逻辑较为简单时使用三元运算符，对于复杂的逻辑，使用if-else或Swich-case语句可能更清晰。

 4、三元运算符的嵌套使用示例

        1.多层条件判断：

        假设我们需要根据用户的年龄和会员状态来决定其折扣，并根据折扣率决定最终价格。

let age = 30;
let isMember = true;
let basePrice = 100;
let discount = age >= 60 ? 0.2 : isMember ? 0.1 : 0;
let finalPrice = basePrice * (1 - discount);
console.log(finalPrice); // 输出 90，因为用户是会员，折扣为10%

        2.多层条件判断：

        假设我们有一个函数，需要根据传入的参数决定使用哪个默认值。

function getGreeting(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
let message = getGreeting("Alice", undefined); // 假设未提供greeting参数
console.log(message); // 输出 "Hello, Alice!"

         3、栗子3：

let score = 85;
let grade = score >= 90 ? 'A' : (score >= 80 ? 'B' : (score >= 70 ? 'C' : 'D'));

         在这个示例中，score 变量的值是 85。三元表达式首先检查 score 是否大于或等于 90，如果是，则 grade 被赋值为 'A'。如果不是，它进一步检查 score 是否大于或等于 80，如果是，则 grade 被赋值为 'B'。依此类推，直到找到匹配的条件。

        4、栗子4：嵌套三元表达式

let status = (score >= 90) ? '优秀' : 
             (score >= 80) ? '良好' : 
             (score >= 70) ? '中等' : 
             (score < 70) ? '及格' : '不及格';

         在这个嵌套的三元表达式中，我们根据 score 的值来确定 status 的值。每个条件都是独立的，并且按照顺序进行检查。

使用三元运算符进行多重嵌套处理的不那么好的点：

假设我们有一个函数，它尝试解析一个字符串为整数，如果失败则返回一个默认值。

function parseInteger(str, defaultValue = 0) {
  let result;
  try {
    result = parseInt(str);
    if (isNaN(result)) {
      throw new Error('Not a number');
    }
  } catch (error) {
    console.error(error.message);
    return defaultValue;
  }
  return result;
}

let number = parseInteger("123"); // 正常情况，返回123
console.log(number);

number = parseInteger("abc"); // 错误情况，返回默认值0
console.log(number);

        在这个例子中，我们使用try...catch结构来捕获并处理错误。然而，如果我们想用三元运算符来简化这个过程，可以这样做：

function parseInteger(str, defaultValue = 0) {
  let result = parseInt(str);
  return isNaN(result) ? defaultValue : result;
}

let number = parseInteger("123"); // 返回123
console.log(number);

number = parseInteger("abc"); // 返回默认值0
console.log(number);

        在这个简化的版本中，直接使用三元运算符来判断parseInt的结果是否为NaN，并相应地返回默认值或解析后的整数。

        这种方法减少了代码行数，但牺牲了错误处理的详细性，因为原始的错误信息不会被记录或显示。