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

Question

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

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

The code is very inefficient because you find the thing, and then you turn around and find the thing again. So you end up looping multiple times.

To make it more readable, I broke it up into parts. It also loops one time over the object to locate the items with children and the items without children. There is a ternary operator there to handle with and without.

The code then determines if it is the child or not and grabs the 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 2

I put myself under risk, entering what meanwhile seems to be a battleground of opinions, in order to prove two things.

1. Aiming for clean code and readability is not always just for the sake of being missionary or a "I do know better than you" attitude. It is mostly for one's own peace and health (and the one of the team) and especially for the one's that have to maintain such code soon after and even later.

2. By refactoring the OP's code towards readability one achieves three things:

• cutting back the repeated and unnecessary data access to the most necessary ones, and then exactly once.
• actually making it obvious/readable (thus easier to refactor) what kind of data one is dealing with.
• and finally fulfilling the OP's wish of a return-value based on (nested) ternary operators which was not such an easy task to achieve without cleaning up before.

---

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

Instead of writing: IF condition THEN do_a ELSE do_b you can use ternary operators the same way.

(condition) ? do_a : do_b;

Concrete for your example:

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

Btw. I recommend to extract methods for do_a or do_b .