箭头函数内的三元运算符

Posted

技术标签:

【中文标题】箭头函数内的三元运算符【英文标题】:Ternary Operator inside an Arrow Function 【发布时间】:2018-12-04 14:40:21 【问题描述】:

我有一个简单的石头剪刀布游戏,我将函数编写为箭头函数,将 if/else 编写为三元运算符,但它返回错误。它适用于普通 if / else 但不适用于三元。

const getUserChoice = userInput => 

  // normalizes all inputs to lowercase
  userInput = userInput.toLowerCase();

  // checks whether the inputs are valid
  userInput === 'rock' || 'paper' || 'scissors' ? return getUserChoice : console.log('please enter a valid entry');

;

getUserChoice('rock');

【问题讨论】:

|| 不是这样工作的。您必须将左侧与每个右侧包括在内。此外,您可能会遇到语法错误,因为您的 return 位于表达式的中间。 这根本不会“返回错误”——这段代码甚至不会被解析为有效代码——SyntaxError: expected expression, got keyword 'return' return 是一个声明;它不能出现在表达式的中间。您的比较需要是userInput === 'rock' || userInput === 'paper' || userInput === 'scissors' 只是为了澄清,因为标题具有误导性。此问题与使用的箭头符号无关。 @meow-meow-meow 请先将其重写为运行的代码,删除 return。三元格式为a = b ? c : d,其中b 是条件,c 和d 是表达式。那里没有return。在这一点上,我怀疑您刚刚解决了自己的问题。请记住查看实际错误是什么,如果您知道它的含义,请解决它。如果你不这样做:在谷歌搜索后告诉人们它是什么意思。 【参考方案1】:

正如其他人指出的那样

  userInput === 'rock' || 'paper' || 'scissors' ? return getUserChoice : console.log('please enter a valid entry');

不是有效的 javascript。它甚至不是一个真正有效的构造。

三元运算符用于根据条件选择A或B。

 if (condition) 
   return A;
  else 
   return B;
 

使用三元运算符

 return condition ? A : B;

但您返回的是函数 getUserChoice,或者您没有返回任何内容,因为 console.log('msg') 不是要返回的东西。

不清楚你想要发生什么。如果用户的选择不是 rockpaperscissors 之一,您似乎想打印一个错误

const validateUserChoice = userInput => 

  // normalizes all inputs to lowercase
  userInput = userInput.toLowerCase();

  // checks whether the inputs are valid
  const isValid = userInput === 'rock' || 
                  userInput === 'paper' ||
                  userInput === 'scissors';

  if (!isValid) 
    console.log('please enter a valid entry');
  ;

  return isValid;

???

请注意,有更快的方法来检查 userInput 是否是许多有效选项之一。一个可能是

const validInputs = 
  rock: true,
  paper: true,
  scissors: true,
;
const validateUserChoice = userInput => 

  // normalizes all inputs to lowercase
  userInput = userInput.toLowerCase();

  // checks whether the inputs are valid
  const isValid = !!validInputs[userInput];

  if (!isValid) 
    console.log('please enter a valid entry');
  ;

  return isValid;

将验证与错误报告混合使用也可能不是最佳做法。

const validInputs = 
  rock: true,
  paper: true,
  scissors: true,
;
const validateUserChoice = userInput => 

  // normalizes all inputs to lowercase
  userInput = userInput.toLowerCase();

  // checks whether the inputs are valid
  return !!validInputs[userInput];
;

if (!validateUserInput(someInput)) 
  console.log('please enter a valid entry');
;

请注意,!! 只是将虚假的东西变成了真正的虚假。

validInputs[userInput]

将是true 或未定义。通常这已经足够好了,但如果你真的希望它是 truefalse,那么 !! 会像下面那样进行转换

const userInput = 'bananas'
const temp1 = validInputs[userInput];   // temp1 = undefined
const temp2 = !temp1;                   // temp2 = true
const temp3 = !temp2;                   // temp3 = false

!! 在做什么

【讨论】:

抱歉不清楚,你的功能是我想做的^,谢谢

以上是关于箭头函数内的三元运算符的主要内容,如果未能解决你的问题,请参考以下文章

在反应中更新三元运算符内的状态

Lua 中的三元运算符(函数)

python 三元运算符推导式递归匿名函数内置函数

Python之三元运算集合函数

如何使用三元运算符退出函数

如何使用三元运算符选择函数