jQuery outerHeight()返回undefined而不是null

Question

因为jQuery 3 .outerHeight()返回undefined而不是null在不存在的元素上调用.这会在添加不存在的元素的高度时导致问题,因为number+ undefined现在会导致NaN.而jQuery 3 number+ 之前null会回来number.

var lorem = $('#div1').outerHeight() + $('#div2').outerHeight();

NaN例如,#div2如果不存在则返回.

潜在解决方案

undef2null = function(myvar) {
    if (myvar === undefined) {return null;}
    else {return myvar;}
}

将以上代码转换为:

var lorem = undef2null($('#div1').outerHeight()) + undef2null($('#div2').outerHeight());

有比这更优雅的解决方案吗？

Answer 1

您可以使用运算符防止未定义或空值||:

($('#div1').outerHeight() || 0)

...比在每个潜在问题值上调用函数更少键入(尽管显然你可以根据需要创建单行函数).

或者不是检查单个值以查看是否undefined可以编写一个函数来添加所有提供的参数的函数,而是检查每个:

function addNumbers() {
  var result = 0;
  for (var i = 0; i < arguments.length; i++)
    result += arguments[i] || 0;
  return result;
}

console.log( addNumbers(1,2,3) );
console.log( addNumbers(1,undefined,3) );
console.log( addNumbers(1,undefined,null) );

(请注意,我所显示的代码实际上并没有测试所提供值的类型,因此如果您使用字符串或其他任何内容将其调用到结果中,那么您可以为非数字/添加额外的测试.如果需要,可以使用undefined/null值.)