我想問一下有沒有辦法縮短這個三元語句？

Question

我想知道如何在這里縮短三元語句的可能性？ TIA

data_items.attributes.promo_banner.promo_join_button_style === 'primary-flat' ? 'primary-flat' : data_items.attributes.promo_banner.promo_join_button_style === 'secondary-flat' ? 'secondary-flat' : data_items.attributes.promo_banner.promo_join_button_style === 'tertiary-flat' ? 'tertiary-flat' : data_items.attributes.promo_banner.promo_join_button_style === 'primary-animated' ? 'primary-animated' : data_items.attributes.promo_banner.promo_join_button_style === 'secondary-animated' ? 'secondary-animated' : data_items.attributes.promo_banner.promo_join_button_style === 'tertiary-animated' ? 'tertiary-animated' : 'error' "

Answer 1

為了便於閱讀，請使用較短的變量名稱來存儲值。 然后，由於您在輸入值與 styles 之一匹配時返回輸入值，因此您可以將 styles 放入一個數組中，然后您可以使用Array.includes一次測試它們：

button_styles = ['primary-flat', 'secondary-flat', 'tertiary-flat', 'primary-animated', 'secondary-animated', 'tertiary-animated' ];

promo_button_style = data_items.attributes.promo_banner.promo_join_button_style;

button_styles.includes(promo_button_style) ? promo_button_style : 'error'

請注意，對於大型 arrays 一個Set （帶有has ）會更有效：

button_styles = new Set(['primary-flat', 'secondary-flat', ...])

button_styles.has(promo_button_style) ? promo_button_style : 'error'

Answer 2

你可以這樣做：

const dataStyle = data_items.attributes.promo_banner.promo_join_button_style;

dataStyle === "primary-flat"
  ? "primary-flat"
  : dataStyle === "secondary-flat"
  ? "secondary-flat"
  : dataStyle === "tertiary-flat"
  ? "tertiary-flat"
  : dataStyle === "primary-animated"
  ? "primary-animated"
  : dataStyle === "secondary-animated"
  ? "secondary-animated"
  : dataStyle === "tertiary-animated"
  ? "tertiary-animated"
  : "error";

---

順便說一句，您不應該使用如此長的三元運算符。 對於此類代碼，請嘗試使用 switch 語句。