Javascript 条件：与 && 混淆

Posted 2023-03-05

【中文标题】Javascript 条件：与 && 混淆

【英文标题】：Javascript Conditionals: confusion with &&

【发布时间】：2013-04-28 04:04:24

【问题描述】：

我正在解压缩从表单收集的一些数据并设置对象属性。如果输入是文本，我将存储该值。如果它是一个复选框，我将存储“选中”属性。如果它是一台收音机并且已被检查，我将存储该值。 这是我的代码：

for (var key in assessment_data) 
  if(assessment_data.hasOwnProperty(key))
    var type = assessment_data[key].type;
    var name = assessment_data[key].name;
    var isThisChecked = assessment_data[key].checked;
    if (type === "text") 
      this[key] = assessment_data[key].value;
    
    else if (type === "checkbox") 
      this[key] = assessment_data[key].checked;
    
    else if (type === "radio" && isThisChecked) 
      this[name] = assessment_data[key].value;
    
  

我得到了一些属性的意外值，所以我在 Firebug 中单步执行它，发现最后一个 else if 在不应该执行的时候执行。例如，当 type = "button" 并且 checked = false 时，最后一个 else if 中的代码仍在执行。这是那一步的screenshot of firebug。您可以在右侧看到条件中的变量及其值。为什么会碰到这个代码？

编辑：我将问题中的变量名称更改为更清晰，并制作了一个新的屏幕截图，显示了 Firebug 中的代码匹配。另外，这里是assessment_data 对象的内容：

编辑 2： 我找到了问题的原因（其他地方的条件不好： if(this.height_type = "Length") ）。 我还发现最后一个 else 中的代码并没有像我一样真正执行。 Firebug 让它看起来像是在执行，我真的不明白为什么。黄色的 > 显示您在单步执行时所在的行，它在 if 语句中的行处停止，但代码实际上并未运行。我能够在 jsfiddle 中重现这一点：http://jsfiddle.net/NDYR8/。我不明白为什么会这样，但目前我很高兴。

assessment_date 对象 value= "05/01/2013" , checked= false , type= "text" 检查：假 名称：未定义 类型：“文本” 值：“2013 年 5 月 1 日”

child_name Object name= "child_name" , checked= false , type= "text" 检查：假 名称：“child_name” 类型：“文本” 值：“”

dob 对象 value= "05/01/2009" , checked= false , type= "text" 检查：假 名称：未定义 类型：“文本” 值：“05/01/2009”

女性对象 value= "female" , name= "gender" , checked= false , 更多... 检查：假 名称：“性别” 类型：“收音机” 值：“女性”

head_cm 对象 已检查 = false ，类型 = "文本" ，值 = "" 检查：假 名称：未定义 类型：“文本” 值：“”

head_in 对象 检查= false , type= "text" , value= "" 检查：假 名称：未定义 类型：“文本” 值：“”

head_unit_cm 对象 value= "cm" , name= "head_units" , checked= false , 更多... 检查：假 名称：“head_units” 类型：“收音机” 值：“厘米”

head_unit_in 对象 value= "in" , name= "head_units" , checked= true , 更多... 已检查：真 名称：“head_units” 类型：“收音机” 值：“在”

height_cm 对象 已检查 = false ，类型 = "文本" ，值 = "" 检查：假 名称：未定义 类型：“文本” 值：“”

height_ft 对象 value= "42" , checked= false , type= "text" 检查：假 名称：未定义 类型：“文本” 值：“42”

height_in 对象 value= "42" , checked= false , type= "text" 检查：假 名称：未定义 类型：“文本” 值：“42”

height_type 对象 value= "Height" , name= "height_type" , checked= true , 更多... 已检查：真 名称：“height_type” 类型：“收音机” 值：“高度”

height_unit_cm 对象 value= "cm" , name= "height_units" , checked= false , 更多... 检查：假 名称：“高度单位” 类型：“收音机” 值：“厘米”

height_unit_ft_in 对象 value= "ft_in" , name= "height_units" , checked= false , 更多... 检查：假 名称：“高度单位” 类型：“收音机” 值：“ft_in”

height_unit_in 对象 value= "in" , name= "height_units" , checked= true , 更多... 已检查：真 名称：“高度单位” 类型：“收音机” 值：“在”

length_type Object value= "Length" , name= "height_type" , checked= false , 更多... 检查：假 名称：“height_type” 类型：“收音机” 值：“长度”

男性对象 value= "male" , name= "gender" , checked= true , 更多... 已检查：真 名称：“性别” 类型：“收音机” 值：“男性”

重新加载对象 value= "清除并\n重新开始" , checked= false , type= "button" 检查：假 名称：未定义 类型：“按钮” 值：“清除并\n重新开始”

use_head_circ 对象 value= "head_circumference" ，checked= false ， type= "checkbox" 检查：假 名称：未定义 类型：“复选框” 值：“head_circumference”

use_height 对象 value= "height" , checked= true , type= "checkbox" 已检查：真 名称：未定义 类型：“复选框” 值：“高度”

use_weight 对象 value= "weight" , checked= true , type= "checkbox" 已检查：真 名称：未定义 类型：“复选框” 值：“重量”

weight_kg 对象 已检查= false , type= "text" , value= "" 检查：假 名称：未定义 类型：“文本” 值：“”

weight_lb 对象 value= "47" , checked= false , type= "text" 检查：假 名称：未定义 类型：“文本” 值：“47”

weight_oz 对象 检查= false , type= "text" , value= "" 检查：假 名称：未定义 类型：“文本” 值：“”

weight_unit_kg 对象 value= "kg" , name= "weight_units" , checked= false , 更多... 检查：假 名称：“重量单位” 类型：“收音机” 值：“公斤”

weight_unit_lb 对象 value= "lb" , name= "weight_units" , checked= false , 更多... 检查：假 名称：“重量单位” 类型：“收音机” 值：“磅”

weight_unit_lb_oz 对象 value= "lb_oz" , name= "weight_units" , checked= true , 更多... 已检查：真 名称：“重量单位” 类型：“收音机” 值：“lb_oz”

【问题讨论】：

如果您如屏幕截图所示中断，然后将检查插入控制台怎么办？像 test 'type === "radio"'，看看返回什么值。

这可以在 jsfiddle 中重现吗？

我注意到您屏幕截图上的代码与问题的代码并不完全相同，我猜您在某个地方遇到了范围问题，请检查您是否确实声明了所有变量与“var”关键字一起使用。问题的代码是对的，里面没有问题。附带说明一下，如果您从单选按钮或复选框 html 元素中获取 isChecked 值，则在检查时选中的属性可能是“未定义”或“空”而不是“假”，但在选中时为“真”。跨度>

@maaachine 我尝试在控制台中评估它们，结果相同：type === "radio" 评估为 false，isThisChecked === true 评估为 false。

@alex23 我将对象内容添加到问题中

【参考方案1】：

我会在最后一个条件 beeing isChecked===true 时重试 ...

这似乎是因为 javascript ist 测试是否存在除 false 之外的值... 因此，如果您的已选中未设置（如果未选中则不是，因为它是一个没有值的属性，如果已设置并且如果未选中则不存在），即使它为空，您仍然会输入 else if。

【讨论】：

刚刚验证，未定义和空在javascript中被视为虚假