Question

我有这样的代码。如何使用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',
      }))
    )

Answer 1

是的，但我的短信不满意：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',
})

现在你的短信不应该抱怨。话虽这么说，你应该在你的linter中禁用[no-nested-ternary]。你的linter认为嵌套条件是坏的，这是一种愚蠢的行为。

Answer 2

我同意@ JaromandaX关于使用函数的问题。这样可以保持JSX的清洁和逻辑的可重用性。

除此之外，为避免嵌套的三元运算符，您可以尝试这样的方法：

保留所有可能值的数组/地图
根据标记创建二进制字符串并将其转换为数字。
返回提供索引的值

＆＃13;

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

＆＃13;

Answer 3

可以使用IIaFE（即时调用的箭头函数表达式）：

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

Answer 4

在这种情况下，您可以考虑反转条件以删除＆＃34; unnatural＆＃34;嵌套三元组。仍然会有嵌套，但它可以写成扁平 - 没有括号 - 这意味着你可以整齐地将它整理成多行：

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',
})

如何在代码中避免嵌套的三元表达式？

4 个答案: