Question

我如何将这个if/else语句转换为ternary operator而不是使用if / else语句。我知道这对大多数javascript开发人员来说都很简单，但对我来说却很困惑。

  if(this.props.usersWhoAreTyping.length === 0) {
        return null
  } else if(this.props.usersWhoAreTyping.length === 1 ){
      return <p>{this.props.usersWhoAreTyping[0]} is typing...</p>
  }
   else if(this.props.usersWhoAreTyping.length > 1){
        return <p>{this.props.usersWhoAreTyping.join('and')} are typing...</p>
  }

我的尝试就像

 {this.props.usersWhoAreTyping.length === 0 ?  (
          null
 ): (
     <p>{this.props.usersWhoAreTyping[0]} is typing...</p>
 )}
 // not sure how to include the 2nd else if statement in this ternary operator

Answer 1

我建议您坚持使用if / else，因为嵌套的三进制可能会使人感到困惑。但是，这是您的处理方式：

{this.props.usersWhoAreTyping.length === 0 ? (
  null
) : this.props.usersWhoAreTyping.length === 1 ? (
  <p>{this.props.usersWhoAreTyping[0]} is typing...</p>
) : (
  <p>{this.props.usersWhoAreTyping.join('and')} are typing...</p>
)}

注意：我确实假设这3个案例涵盖了所有可能性。即，长度不能小于0或为分数。由于我们大概是在处理数组，所以这似乎很合理，它让我放弃了长度大于1的检查。

Answer 2

使用三元运算符很简单：

  const result =
    this.props.usersWhoAreTyping.length > 0 ? (
      this.props.usersWhoAreTyping.length === 1 ? (
        <p>{this.props.usersWhoAreTyping[0]} is typing...</p>
      ) : (
        <p>{this.props.usersWhoAreTyping.join('and')} are typing...</p>
      )
    ) : null;

考虑到我修改了条件，使案例小于0

Answer 3

如果我正确理解了您的意图，则无需三元组。

示例：

render() {
const { usersWhoAreTyping } = this.props

return (
   <div>
    {usersWhoAreTyping.length === 1 && <p>{usersWhoAreTyping[0]} is typing...</p>}
    {usersWhoAreTyping.length > 1 && <p>{usersWhoAreTyping.join('and')} are typing...</p>}
   </div>
)

Answer 4

switch (this.props.usersWhoAreTyping.length) {
  case 0:
    {
      return null
    }
  case 1:
    {
      return <p > {
        this.props.usersWhoAreTyping[0]
      }
      is typing... < /p>
    }
  case 2:
    {
      return <p > {
        this.props.usersWhoAreTyping.join('and')
      }
      are typing... < /p>
    }
  default:
    return null
}

如果可以的话，尝试一下。

Answer 5

如上所述，嵌套三元运算符可能会造成混淆，应避免使用。但是，如果您确实想编写没有多个if / else的代码，则可以参考此内容。它使用了一些ES6功能。

const { usersWhoAreTyping } = this.props;

someFunc = () => {
    if(usersWhoAreTyping && usersWhoAreTyping.length) {
        const translation = usersWhoAreTyping.length === 0 ? 'is' : 'are';
        return <p>{ `${usersWhoAreTyping.join('and')} ${translation} typing...` }</p>
    }
    return null;
}

Answer 6

因此，技术上，您可以按照以下要求进行操作：

function showTypers(aArrayOfNames) {
  var iArrayLength = aArrayOfNames.length;
  
  return (iArrayLength === 0) ?
         null :
         '<p>' + ((iArrayLength > 1) ?
                   aArrayOfNames.join(' and ') + ' are' :
                   aArrayOfNames[0] + ' is') +
         ' typing...</p>';
}

console.log(showTypers([]));
console.log(showTypers(['Tom']));
console.log(showTypers(['Tom', 'Dick', 'Harry']));

话虽这么说，老实说，我不建议嵌套这种特殊情况，特别是因为其中一个结果（length === 0）的结果与其他两个结果完全不同（除其他原因外……嵌套三元）。逻辑可能会非常混乱）。我会根据以下建议进一步推荐一些东西：

function showTypers(aArrayOfNames) {
  var iArrayLength = aArrayOfNames.length;
  var sUserNames = "";

  if (iArrayLength > 0) {
    sUserNames = (iArrayLength > 1) ? aArrayOfNames.join(' and ') + ' are' : aArrayOfNames[0] + ' is' ;
  } else {
    return null;
  }
  
  return '<p>' + sUserNames + ' typing...</p>';
}  
  
console.log(showTypers([]));
console.log(showTypers(['Tom']));
console.log(showTypers(['Tom', 'Dick', 'Harry']));

如何将多个else if语句转换为三元运算符

6 个答案: