扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >浅谈JS如何写出漂亮的条件表达式
  • 298

0
分享到

浅谈JS如何写出漂亮的条件表达式

2024-04-02 19:04:59 298人浏览 安东尼
摘要

目录多条件语句多属性对象替换Switch语句默认参数与解构匹配所有或部分条件使用可选链和 Nullish 合并多条件语句 多条件语句使用Array.includes 举个例子 f

多条件语句

多条件语句使用Array.includes

举个例子


function printAnimals(animal) {
  if (animal === "dog" || animal === "cat") {
    console.log(`I have a ${animal}`);
  }
}

console.log(printAnimals("dog")); // I have a dog

这种写法在条件比较少的情况下看起来没有问题，此时我们只有 2 种动物，但是如果我们有更多的条件需要判断（更多的动物）呢？如果我们继续拓展判断的条件，那么代码将会变得难以维护，而且逻辑会不清晰。

解决方法

可以使用Array.includes来重写条件语句


function printAnimals(animal) {
  const animals = ["dog", "cat", "hamster", "turtle"];

  if (animals.includes(animal)) {
    console.log(`I have a ${animal}`);
  }
}

console.log(printAnimals("hamster")); // I have a hamster

在这里，我们创建了一个动物数组，以便将条件与代码的其余部分分开提取。现在，如果我们想要检查任何其他动物，我们需要做的就是添加一个新的数组项。

我们还可以在这个函数的范围之外使用 animals 变量，以便在代码的其他地方重用它。这是一种编写更清晰、更容易理解和维护的代码的方法。不是吗?

多属性对象

这是一个非常好的技巧来压缩你的代码，使它看起来更简洁。让我们以前面的示例为例，添加更多的条件。如果这个动物不是一个简单的字符串，而是一个具有某些属性的对象呢?

所以现在的要求是:

  • 如果没有动物，抛出一个错误
  • 打印动物的类型
  • 打印动物的名字
  • 打印动物的性别

const printAnimalDetails = (animal) => {
  let result; // declare a variable to store the final value

  // condition 1: check if animal has a value
  if (animal) {
    // condition 2: check if animal has a type property
    if (animal.type) {
      // condition 3: check if animal has a name property
      if (animal.name) {
        // condition 4: check if animal has a gender property
        if (animal.gender) {
          result = `${animal.name} is a ${animal.gender} ${animal.type};`;
        } else {
          result = "No animal gender";
        }
      } else {
        result = "No animal name";
      }
    } else {
      result = "No animal type";
    }
  } else {
    result = "No animal";
  }

  return result;
};

console.log(printAnimalDetails()); // 'No animal'

console.log(printAnimalDetails({ type: "dog", gender: "female" })); // 'No animal name'

console.log(printAnimalDetails({ type: "dog", name: "Lucy" })); // 'No animal gender'

console.log(
  printAnimalDetails({ type: "dog", name: "Lucy", gender: "female" })
); // 'Lucy is a female dog'

上面的代码它工作得很好，但是代码很长，很难维护。如果不使用提示工具，可能会浪费一些时间来确定右括号的位置。想象将会发生什么如果代码更复杂的逻辑。很多if...else的语句!

我们可以使用三元操作符、&&条件等来重构上面的函数，但是让我们使用多个返回语句来编写更精确的代码。


const printAnimalDetails = ({ type, name, gender } = {}) => {
  if (!type) return "No animal type";
  if (!name) return "No animal name";
  if (!gender) return "No animal gender";

  // Now in this line of code, we're sure that we have an animal with all //the three properties here.

  return `${name} is a ${gender} ${type}`;
};

console.log(printAnimalDetails()); // 'No animal type'

console.log(printAnimalDetails({ type: dog })); // 'No animal name'

console.log(printAnimalDetails({ type: dog, gender: female })); // 'No animal name'

console.log(printAnimalDetails({ type: dog, name: "Lucy", gender: "female" })); // 'Lucy is a female dog'

在重构版本中，还包括解构和默认参数。默认参数确保如果我们将 undefined 作为参数传递给方法，我们仍然有一个要解构的值，这里是一个空对象 {}。

通常，代码是在这两种方法之间编写的。

举个例子


function printVegetablesWithQuantity(vegetable, quantity) {
  const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];

  // condition 1: vegetable should be present
  if (vegetable) {
    // condition 2: must be one of the item from the list
    if (vegetables.includes(vegetable)) {
      console.log(`I like ${vegetable}`);

      // condition 3: must be large quantity
      if (quantity >= 10) {
        console.log("I have bought a large quantity");
      }
    }
  } else {
    throw new Error("No vegetable from the list!");
  }
}

printVegetablesWithQuantity(null); //  No vegetable from the list!
printVegetablesWithQuantity("cabbage"); // I like cabbage
printVegetablesWithQuantity("cabbage", 20);
// 'I like cabbage`
// 'I have bought a large quantity'

现在,我们有:

  • 过滤无效条件的 if/else 语句
  • 3 层嵌套的 if 语句(条件 1、2 和 3)
  • 一个通用的规则是当发现无效条件时尽早返回。

function printVegetablesWithQuantity(vegetable, quantity) {
  const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];

  // condition 1: throw error early
  if (!vegetable) throw new Error("No vegetable from the list!");

  // condition 2: must be in the list
  if (vegetables.includes(vegetable)) {
    console.log(`I like ${vegetable}`);

    // condition 3: must be a large quantity
    if (quantity >= 10) {
      console.log("I have bought a large quantity");
    }
  }
}

通过这样做，我们减少了一个嵌套语句的级别。这种编码风格很好，特别是当使用长if语句时。通过反转条件并提前返回，我们可以进一步减少嵌套if。

请看下面的条件 2 是怎么做的:


function printVegetablesWithQuantity(vegetable, quantity) {
  const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];

  if (!vegetable) throw new Error("No vegetable from the list!");
  // condition 1: throw error early

  if (!vegetables.includes(vegetable)) return;
  // condition 2: return from the function is the vegetable is not in
  //  the list

  console.log(`I like ${vegetable}`);

  // condition 3: must be a large quantity
  if (quantity >= 10) {
    console.log("I have bought a large quantity");
  }
}

通过反转条件 2 的条件，代码不再具有嵌套语句。当我们有很多条件并且希望在任何特定条件不满足时停止进一步的处理时，这种技术是有用的。

因此，总是以减少嵌套和尽早返回为目标，但不要过度。

替换Switch语句

让我们看一下下面的例子,我们想要根据颜色打印水果:


function printFruits(color) {
  // use switch case to find fruits by color
  switch (color) {
    case "red":
      return ["apple", "strawberry"];
    case "yellow":
      return ["banana", "pineapple"];
    case "purple":
      return ["grape", "plum"];
    default:
      return [];
  }
}

printFruits(null); // []
printFruits("yellow"); // ['banana', 'pineapple']

上面的代码实现没有错误，但是很冗长，同样的结果可以使用更简洁的语法来实现。


// use object literal to find fruits by color
const fruitColor = {
  red: ["apple", "strawberry"],
  yellow: ["banana", "pineapple"],
  purple: ["grape", "plum"],
};

function printFruits(color) {
  return fruitColor[color] || [];
}

同样的，也可以使用 Map 来实现：


// use Map to find fruits by color
const fruitColor = new Map()
  .set("red", ["apple", "strawberry"])
  .set("yellow", ["banana", "pineapple"])
  .set("purple", ["grape", "plum"]);

function printFruits(color) {
  return fruitColor.get(color) || [];
}

Map是 ES5 以来可用的对象类型，它允许存 key-value。

对于上面的示例，可以使用 Array.filter 实现相同的结果。


const fruits = [
  { name: "apple", color: "red" },
  { name: "strawberry", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "pineapple", color: "yellow" },
  { name: "grape", color: "purple" },
  { name: "plum", color: "purple" },
];

function printFruits(color) {
  return fruits.filter((fruit) => fruit.color === color);
}

默认参数与解构

在使用 javascript 时，我们总是需要检查 null/undefined 并分配默认值或编译中断。


function printVegetablesWithQuantity(vegetable, quantity = 1) {
// if quantity has no value, assign 1

  if (!vegetable) return;
    console.log(`We have ${quantity} ${vegetable}!`);
  }
  //results
}

printVegetablesWithQuantity('cabbage'); // We have 1 cabbage!
printVegetablesWithQuantity('potato', 2); // We have 2 potato!

如果蔬菜是一个对象呢?我们可以分配一个默认参数吗?


function printVegetableName(vegetable) {
  if (vegetable && vegetable.name) {
    console.log(vegetable.name);
  } else {
    console.log("unknown");
  }
}

printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: "cabbage", quantity: 2 }); // cabbage

在上面的示例中，我们希望打印蔬菜名(如果它可用)或打印 unknown。

我们可以通过使用默认参数&解构来避免条件if (vegetable && vegetable.name){}。


// destructing - get name property only
// assign default empty object {}

function printVegetableName({ name } = {}) {
  console.log(name || "unknown");
}

printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: "cabbage", quantity: 2 }); // cabbage

因为我们只需要属性名，所以我们可以使用 {name} 来改变参数的结构，然后我们可以在代码中使用 name 作为变量，而不是使用 vegetable.name。

我们还将一个空对象 {} 赋值为默认值，否则在执行 printVegetableName(undefined) 时，它将给出一个错误—— Cannot destructure property name of undefined or null，因为在 undefined 中没有 name 属性。

匹配所有或部分条件

我们可以通过使用这些Array方法来减少代码行数。

下面的代码，我们想要检查是否所有的水果都是红色的:


const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];

function test() {
  let isAllRed = true;

  // condition: all fruits must be red
  for (let f of fruits) {
    if (!isAllRed) break;
    isAllRed = f.color == "red";
  }

  console.log(isAllRed); // false
}

上面的代码太过冗长，我们可以通过使用 Array.every 来减少代码行：


const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];

function test() {
  // condition: short way, all fruits must be red
  const isAllRed = fruits.every((f) => f.color == "red");

  console.log(isAllRed); // false
}

同样的，如果我们想要测试任何一个水果是否是红色的，我们可以使用 Array.some：


const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];

function test() {
  // condition: if any fruit is red
  const isAnyRed = fruits.some((f) => f.color == "red");

  console.log(isAnyRed); // true
}

使用可选链和 Nullish 合并

https://developer.mozilla.org/zh-CN/docs/WEB/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE

这两个功能对于 JavaScript 编写更简洁的条件非常有用。在编写本文时，它们还没有得到完全的支持，可能需要使用Babel进行编译。

可选链接能够处理类似树的结构，而不需要显式地检查中间节点是否存在，并且Nullish与可选链接结合使用非常有效，可以确保不存在节点的默认值。

举个例子:


const car = {
  model: "Fiesta",
  manufacturer: {
    name: "Ford",
    address: {
      street: "Some Street Name",
      number: "5555",
      state: "USA",
    },
  },
};

// to get the car model
const model = (car && car.model) || "default model";

// to get the manufacturer street
const street =
  (car &&
    car.manufacturer &&
    car.manufacturer.address &&
    car.manufacturer.address.street) ||
  "default street";

// request an un-existing property
const phoneNumber =
  car &&
  car.manufacturer &&
  car.manufacturer.address &&
  car.manufacturer.phoneNumber;

console.log(model); // 'Fiesta'
console.log(street); // 'Some Street Name'
console.log(phoneNumber); // undefined

因此，如果我们想打印出来，如果汽车制造商来自美国，代码应该是这样的:


const isManufacturerFromUSA = () => {
  if (
    car &&
    car.manufacturer &&
    car.manufacturer.address &&
    car.manufacturer.address.state === "USA"
  ) {
    console.log("true");
  }
};

checkCarManufacturerState(); // 'true'

可以清楚地看到，对于更复杂的对象结构，这会变得多么混乱。有一些第三方库，如 lodash 或idx，它们有自己的功能。例如 lodash 有 _.get 方法。但是，在 JavaScript 语言本身中引入这个特性。

以下是这些新功能的工作原理:


// to get the car model
const model = car?.model ?? "default model";

// to get the manufacturer street
const street = car?.manufacturer?.address?.street ?? "default street";

// to check if the car manufacturer is from the USA
const isManufacturerFromUSA = () => {
  if (car?.manufacturer?.address?.state === "USA") {
    console.log("true");
  }
};

目前在 Stage 3 阶段。

以上就是基于JavaScript实现条件表达式的一些分享，希望对你能有所帮助~

以上就是浅谈js如何写出漂亮的条件表达式的详细内容，更多关于JS如何写出漂亮的条件表达式的资料请关注编程网其它相关文章！

--结束END--

本文标题: 浅谈JS如何写出漂亮的条件表达式

本文链接: https://lsjlt.com/news/126441.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 浅谈JS如何写出漂亮的条件表达式
    目录多条件语句多属性对象替换Switch语句默认参数与解构匹配所有或部分条件使用可选链和 Nullish 合并多条件语句 多条件语句使用Array.includes 举个例子 f...
    99+
    2024-04-02
  • 如何写出漂亮的React组件
    如何写出漂亮的React组件，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。在Walmart Labs的产品开发中，我们进行了大量的Code...
    99+
    2024-04-02
  • 如何让你的JS写得更漂亮
    本篇内容介绍了“如何让你的JS写得更漂亮”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1. 按强类型风格写...
    99+
    2024-04-02
  • Java杂谈之如何优化写出漂亮高效的代码
    目录命名中的不一致方案中的不一致代码中的不一致总结大部分程序员对于一致性本身的重要性是有认知的。但通常来说，大家理解的一致性都表现在比较大的方面，比如，数据库访问是叫 DAO还是叫 ...
    99+
    2024-04-02
  • 浅谈python条件表达式:多项分支,双向分支
    如下所示： # ### 多项分支 '''<br> if 条件表达式1: code1 code2 elif 条件表达式2: code3 ...
    99+
    2024-04-02
  • JavaScript如何简化条件表达式
    这篇文章将为大家详细讲解有关JavaScript如何简化条件表达式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。简化条件表达式经常碰到这种情况，要判断某个变量是否为指定的某些值，用常规的逻辑表达式会很长。...
    99+
    2023-06-27
  • python如何使用tabulate打印出漂亮的2D列表
    这篇文章主要介绍了python如何使用tabulate打印出漂亮的2D列表，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。使用tabulate打印出漂亮的2D列表很多时候，用P...
    99+
    2023-06-27
  • 详解Java如何简化条件表达式
    目录一个实际例子使用断言表驱动使用枚举策略模式在复杂的实际业务中，往往会出现各种嵌套的条件判断逻辑。我们需要考虑所有可能的情况。随着需求的增加，条件逻辑会变得越来越复杂，判断函数会变...
    99+
    2024-04-02
  • 如何编写更好的JavaScript条件式和匹配条件
    这篇文章将为大家详细讲解有关如何编写更好的JavaScript条件式和匹配条件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。介绍如果你像我一样乐于见到整洁的代码，那么你会...
    99+
    2024-04-02
  • PHP8中如何使用Match表达式简化复杂的条件判断？
    PHP8中引入了一个新的特性 - Match表达式，它能够简化复杂的条件判断。Match表达式可以通过一种更简洁明了的方式，实现对多个条件的判断和执行。在本文中，我们将介绍如何使用Match表达式来简化复杂的条件判断，并给出具体的代码示例。...
    99+
    2023-10-22
    PHP Match表达式 简化条件判断
  • PHP8中如何使用Match表达式进行更简洁的条件判断？
    PHP8中引入了一种新的条件判断语法——Match表达式（也称为模式匹配）。在之前的版本中，我们通常使用多个if-else语句来进行条件判断，而Match表达式的出现使得这一过程更加简洁和易读。本文将介绍PHP8中如何使用Match表达式，...
    99+
    2023-10-22
    PHP Match表达式 简洁的条件判断
  • 如何通过PHP8的Match表达式更简洁地处理多个条件？
    如何通过PHP8的Match表达式更简洁地处理多个条件？PHP8引入了一种新的表达式——Match表达式，它在处理多个条件时相比之前的if-elseif-else语句更加简洁和直观。Match表达式使用了一种新的语法结构，可以更方便地进行值...
    99+
    2023-10-22
    PHP Match表达式 条件 简洁地处理
  • 如何在PHP8中使用Match表达式更简洁地判断条件？
    如何在PHP8中使用Match表达式更简洁地判断条件？在PHP8中，引入了一种新的条件判断语法 - Match表达式，它可以让我们以更简洁的方式判断多个条件并执行相应的代码块。Match表达式的作用类似于switch语句，但比switch更...
    99+
    2023-10-22
    PHP Match表达式 简洁判断条件
  • java如何在rules中的pattern中写正则表达式
    这篇文章主要讲解了“java如何在rules中的pattern中写正则表达式”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“java如何在rules中的pat...
    99+
    2024-04-02
  • CASE表达式如何实现基于条件逻辑来返回一个值
    这篇文章给大家分享的是有关CASE表达式如何实现基于条件逻辑来返回一个值的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。我们在开发过程中，经常需要针对一列，基于条件逻辑来返回一个值...
    99+
    2024-04-02
  • 使用Java如何控制正则表达式中的大小写
    使用Java如何控制正则表达式中的大小写？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。具体如下：默认是：区分大小写的；传递标志参数：Pattern.CASE_INSENSI...
    99+
    2023-05-31
    java 正则表达式 ava
  • 如何在 Go 中为最后一次出现的单个空格编写正则表达式？
    问题内容 我想用其他内容替换字符串中的最后一个空格。如何在 Golang 中为最后一个空格编写正则表达式？到目前为止我只发现 \s+ 匹配所有空格 正确答案 您可以使用此正则表达式： ...
    99+
    2024-02-08
  • 如何使用 bson 在 GoLang 中编写正则表达式的 mongodb 查询？
    知识点掌握了，还需要不断练习才能熟练运用。下面编程网给大家带来一个Golang开发实战，手把手教大家学习《如何使用 bson 在 GoLang 中编写正则表达式的 mongodb 查询？》，在实现功...
    99+
    2024-04-05
  • 如何使用Python中的正则表达式处理html文件
    使用Python中的正则表达式处理html文件 finditer方法是一种全匹配方法。您可能已经使用了findall方法，它返回多个匹配字符串的列表。finditer返回一个迭代器顺...
    99+
    2023-05-18
    python 处理html python操作html文件 python正则表达式
  • 如何将基于某些条件的值从 MySQL 表导出到文件中？
    我们可以在将数据从 MySQL 表导出到文件时使用 WHERE 子句中的条件。可以通过示例来理解 -示例假设我们从表“Student_info”中有以下数据 -mysql> Select * from Student...
    99+
    2023-10-22
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作