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

而不是写： 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 的方法。

Answer 2

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

为了使其更具可读性，我将其分成几部分。它还在 object 上循环一次以找到带有 children 的项目和没有 children 的项目。那里有一个三元运算符来处理有无。

然后代码确定它是否是 child 并获取 object。

// 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 3

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

追求干净的代码和可读性并不总是为了成为传教士或“我比你更了解”的态度。这主要是为了自己（以及团队成员）的安宁与健康，尤其是为了那些必须在不久之后甚至更晚维护此类代码的人。
通过重构 OP 的代码以提高可读性，可以实现三件事：

将重复和不必要的数据访问减少到最必要的数据，然后只访问一次。
实际上obvious/readable（因此更容易重构）正在处理的数据类型。
并最终实现了 OP 的 return-value 基于（嵌套）三元运算符的愿望，这在之前没有清理的情况下并不是一件容易实现的任务。

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

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

How can I change the if else statement in the function with Ternary operator in JavaScript?

javascript

conditional-operator

typescript