如何將多個else if語句轉換為三元運算符

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']));