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

Question

如何在 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;}

Answer 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

Answer 2

为了证明两件事，我冒着风险，进入了一个似乎是意见交锋的战场。

1. 以干净的代码和可读性为目标并不总是只是为了传教士或“我比你更了解”的态度。这主要是为了自己（以及团队中的一员）的安宁与健康，尤其是为了那些必须在不久之后甚至更晚维护此类代码的人。

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);

}

Answer 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_aor提取方法do_b。