如何避免我的代碼中嵌套的三元表達式？

我有這樣的代碼。我如何使用JavaScript中的函數式編程以更清晰，更優雅的方式編寫它？我想擺脫嵌套的三元表達式。有任何想法嗎？如何避免我的代碼中嵌套的三元表達式？

props => ({ 
      iconColor: props.isPriority ? (props.isCompleted ? variables.color.lightpurple : variables.color.purple) : variables.color.gray3, 
      iconName: props.isPriority ? 'star-full' : 'star-empty', 
      }))

這是代碼的其餘部分：

編輯：

const enhance: React$HOC<*, InitialProps> = compose(
     withProps(props => ({ 
     iconColor: props.isPriority ? (props.isCompleted ? variables.color.lightpurple : variables.color.purple) : variables.color.gray3, 
     iconName: props.isPriority ? 'star-full' : 'star-empty', 
     })) 
    )

來源

2017-09-18 MountainConqueror

創建一個函數，調用它 –

清潔？那已經很乾淨了 –

清潔度是非常主觀的。 – Quentin

是的，但我的linter不開心：44:16 error Do not nest ternary expressions [no-nested-ternary]

如果這是您唯一的問題，那麼解決方案很簡單。創建你自己的條件功能：

const iff = (condition, then, otherwise) => condition ? then : otherwise; 

props => ({ 
    iconColor: props.isPriority ? 
    iff(props.isCompleted, variables.color.lightpurple, variables.color.purple) : 
    variables.color.gray3, 
    iconName: props.isPriority ? 'star-full' : 'star-empty', 
})

現在你的棉絨不應該抱怨。話雖如此，你應該在你的棉絨裏禁用[no-nested-ternary]。你的linter認爲嵌套條件不好，這很愚蠢。

來源

2017-09-20 17:28:33

我@JaromandaX同意有關使用功能。這使您的JSX保持清潔，邏輯可重用。

除此之外，爲了避免嵌套三元運算符，你可以嘗試這樣的事：

保持基於標誌
所有可能值的數組/映射，創建一個二進制字符串，並將其轉換編號。
在提供的索引返回值

function withTernary(a, b){ 
 
    return a ? (b ? 'test': 'foo') : 'bar'; 
 
} 
 

 
function withoutTernary(a, b){ 
 
    var result = ['bar', undefined, 'foo', 'test']; 
 
    // or may be a map 
 
    /* 
 
    * map = { 
 
    * '00': 'bar', 
 
    * '10': 'foo', 
 
    * '11': 'test' 
 
    * } 
 
    */ 
 
    var index = parseInt((+a) + '' + (+b), 2); 
 
    return result[index]; 
 
} 
 

 
var testCase = [[0,0], [1, 0], [1,1]]; 
 

 
testCase.forEach(x => { 
 
    console.log('With Ternary:', withTernary(...x)); 
 
    console.log('Without Ternary:', withoutTernary(...x)); 
 
})

來源

2017-09-18 05:39:12 Rajesh

**注意：**這是避免嵌套三元運算符的替代方法。如果您認爲此答案中的任何內容是*不必要/不需要/不當*，請與您的投票一起評論。祝你有美好的一天。 – Rajesh

-1

人們可以使用IIaFE（immeadiately調用箭頭函數表達式）：

props => ({ 
     iconColor:(_=>{ 
      if(props.isPriority){ 
      if(props.isCompleted){ 
       return variables.color.lightpurple; 
      } 
      return variables.color.purple; 
      } 
      return variables.color.gray3; 
     })(), 
     iconName:(_=>{ 
      if(props.isPriority){ 
       return 'star-full'; 
      } 
      return 'star-empty'; 
     })() 
}))

來源

2017-09-18 05:46:17

我不認爲，我們需要箭頭函數，因爲我們不使用'this'。另外，擁有預定義的函數總比使用內聯函數要好，因爲它增加了重用它的可能性。 – Rajesh

IIFE不是特別有用。相反，使用'const apply =（... args）=> f => f（... args）''等可重用函數。代碼變得更容易遵循，甚至可以在'f'的參數中解構：'apply（props）（（{isPriority，isCompleted}）=> {switch（isPriority）{...}}）''。 – ftor

@ftor函數不起作用？說得通 ... –

在這種情況下，您可以考慮反轉條件以消除「非自然」三元組嵌套。仍然會有嵌套，但它可以寫成平 - 沒有括號 - 這意味着你可以巧妙地在多行攤開來：

props => ({ 
    iconColor: 
     !props.isPriority ? variables.color.gray3 
     : props.isCompleted ? variables.color.lightpurple 
     : variables.color.purple, 
    iconName: props.isPriority ? 'star-full' : 'star-empty', 
})

這種方法的缺點是使用的負狀態，這是我平時儘量避免，因爲它們比積極條件更難遵循。

另一個選擇是&&扁平化的條件：

props => ({ 
    iconColor: 
     props.isPriority && props.isCompleted ? variables.color.lightpurple 
     : props.isPriority ? variables.color.purple 
     : variables.color.gray3, 
    iconName: props.isPriority ? 'star-full' : 'star-empty', 
})

來源

2017-09-29 12:25:01 TheQuickBrownFox

如何避免我的代碼中嵌套的三元表達式？

回答

相關問題