如何使用 JavaScript 中的三元运算符更改函数中的 if else 语句？

Posted 2023-03-13

【中文标题】如何使用 JavaScript 中的三元运算符更改函数中的 if else 语句？

【英文标题】：How can I change the if else statement in the function with Ternary operator in JavaScript?

【发布时间】：2021-02-06 14:37:37

【问题描述】：

如何在 javascript 中使用三元运算符更改函数中的 if else 语句

private getProductName(productType: string): string 
    let productName = 'Product not found';

    if(this.deal.packages.find(p  => p.isSelected).dealProducts.find(dp => (dp.children.length > 0 && dp.children[0].product.productTypeCode == productType)))
      productName = this.deal.packages.find(p  => p.isSelected).dealProducts.find(dp => (dp.children.length > 0 && dp.children[0].product.productTypeCode == productType)).children[0].product.name;
    
    else if(this.deal.packages.find(p  => p.isSelected).dealProducts.find(dp => (dp.children.length === 0 && dp.product.productTypeCode === productType)))
      productName = this.deal.packages.find(p  => p.isSelected).dealProducts.find(dp => (dp.children.length === 0 && dp.product.productTypeCode === productType)).product.name;
    

    return productName;

【问题讨论】：

看起来很奇怪的 JavaScript

也许 OP 首先希望通过将一些重复访问的引用分配给变量/常量来为代码提供可读性。然后用三元表达式替换 if-else 子句也容易得多。

所以代码不可读，你想进一步降低可读性吗？我说对了吗？

为了改进您的代码，我建议：拥有可读的代码比拥有极其紧凑的代码更有价值。还要打破你的长代码行。创建命名变量而不是长 if 子句或将它们提取到“isFooBar* 方法。从“productName =”旁边的代码中提取方法。修复顶部的方法拼写。毕竟，引入三元运算符应该很容易。作为提示：阅读 Bobs 叔叔的书清洁代码。

@nologin 这是你的意见。有人可以在白板上写一本书，擦除整个内容并重写它以修复一个错字。或者有人可以从一开始就对其进行优化，而不是擦除整个白板。上面的代码基本上找到了说它存在的对象。然后它会扔掉它以再次找到它。这不是最好的逻辑。给出如何更好地构建代码的想法是一个答案。很抱歉你对此没有强烈的感觉。有时一个人要求一些东西，但最终那东西并不是 OP 真正需要的。

【参考方案1】：

代码效率很低，因为你找到了那个东西，然后你又转身又找到了那个东西。所以你最终会循环多次。

为了使其更具可读性，我将其分成几部分。它还在对象上循环一次以定位有子项和没有子项的项。那里有一个三元运算符可以处理有无。

然后代码确定它是否是孩子并抓取对象。

// Grab the package
var selectedPackageProducts = this.deal.packages.find(p => p.isSelected).dealProducts;

// check to see if the children has the product type or if the parent does (if no children)
const selectedProduct = selectedPackageProducts.find(dp => 
    dp.children.length > 0 ? 
    dp.children[0].product.productTypeCode === productType :
    dp.product.productTypeCode === productType)

// If we have children use it, else reference the parent
const productObj = selectedProduct && selectedProduct.children.length ? 
    selectedProduct.children[0] :
    selectedProduct;

// get the product name 
const productName = productObj && productObj.product.name

【讨论】：

您在 else 部分错过了 dp.children.length === 0，请注意我在 if 语句和 else 语句中得到的 product.name 不同。

@KarimAli 嗯，如果孩子们 > 0.... 在三元组的 else 部分，孩子们将是零

稍作改动以引用孩子

【参考方案2】：

为了证明两件事，我将自己置于危险之中，进入了同时似乎是意见纷争的战场。

追求简洁的代码和可读性并不总是为了传教士或“我比你更了解”的态度。这主要是为了自己（以及团队中的一个人）的和平与健康，尤其是为了那些必须在不久之后甚至之后维护此类代码的人。

通过将 OP 的代码重构为可读性，可以实现三件事：

将重复和不必要的数据访问减少到最必要的数据访问，然后只访问一次。 实际上使处理的数据类型一目了然/可读（因此更容易重构）。 最终实现了 OP 基于（嵌套）三元运算符的返回值的愿望，如果不进行清理，这并不是一件容易的事。

---

private getProductName(productType: string): string 
  const defaultProductName = 'Product not found';

  const selectedPackageProductList = this.deal.packages
    .find(p => p.isSelected).dealProducts;

  const selectedProducts = selectedPackageProductList
    .find(dp => (dp.children.length > 0 && dp.children[0].product.productTypeCode === productType));

  const selectedProductItem = !selectedProducts && selectedPackageProductList
    .find(dp => (dp.children.length === 0 && dp.product.productTypeCode === productType));

  return selectedProducts
    ? selectedProducts.children[0].product.name
    : (selectedProductItem ? selectedProductItem.product.name : defaultProductName);

【讨论】：

我唯一想改变的是跳过三元组，在 selectedProductItem 之前添加 if ......如果你已经找到了，为什么 selectedProductItem 循环？

@epascarello ... 保留 三元组 我想满足问题的要求并取悦 OP 和 nologin。关于建议的改进，selectedProductItem 被计算以防selectedProducts 不存在（有一个保护）。这也是可以按照 OP 的要求写入最终返回值的原因。此时只需检索产品名称。

正如我在帖子下的评论中所做的那样，有时 OP 所要求的并不是他们真正需要的。 ;) 但是通过编辑，它会做同样的事情。

我在这里使用 Original Poster 已有 12 年了，我不打算改变。

追求干净的代码是一件好事。但它没有回答这个问题。

【参考方案3】：

而不是写： IF condition THEN do_a ELSE do_b 你可以用同样的方式使用三元运算符。

(condition) ? do_a : do_b;

具体为您的示例：

private getProductName(productType: string): string 
    return (this.deal.packages.find(p  => p.isSelected).dealProducts.find(dp => (dp.children.length > 0 && dp.children[0].product.productTypeCode == productType)))
 ? this.deal.packages.find(p  => p.isSelected).dealProducts.find(dp => (dp.children.length > 0 && dp.children[0].product.productTypeCode == productType)).children[0].product.name;
 : (this.deal.packages.find(p  => p.isSelected).dealProducts.find(dp => (dp.children.length === 0 && dp.product.productTypeCode === productType)))
 ? this.deal.packages.find(p  => p.isSelected).dealProducts.find(dp => (dp.children.length === 0 && dp.product.productTypeCode === productType)).product.name;
 : 'Product not found';

顺便说一句。我建议为do_a 或do_b 提取方法。

【讨论】：

为什么要重复 OP 根本不可读的示例代码？

因为它是具体问题的具体解决方案。

如果是我向我的团队成员提供这样的代码，我会请求立即更改这个不可读的（单行）代码。

这不是问题

问题是有很多更好的方法来回答它，而无需一遍又一遍地重复代码。代码效率很低。