对调用函数的每个变量进行空检查？答案

【问题标题】：Null check for every variable that invokes a function?对调用函数的每个变量进行空检查？
【发布时间】：2018-02-12 23:11:43
【问题描述】：

我有一个 javascript，我在

中声明了所有变量

$(document).ready(function(){
    //variables
});

这些变量的值也会被初始化，并且大部分是 HTML 元素。元素是通过document.GetElementById() 使用ID 确定的。其中一些元素仅存在于尚未加载到浏览器中的不同页面中。当保存元素的变量用于不同目的时，这会导致空错误。

var container_element = document.getElementById('unique-id');
var count = container_element.getElementsByTagName("div").length;

由于具有“unique-id”的元素存在于浏览器中未加载的另一个页面中，因此第二行将返回错误，因为container_element 为空。为了解决这个问题，我将代码更改为

var container_element = document.getElementById('unique-id');

if(container_element) {
    var count = container_element.getElementsByTagName("div").length;
}

这是处理此类事情的唯一方法吗？我是否必须对通过变量调用的每个函数进行空值检查，或者是否有任何其他解决方案或标准/最佳实践？

【问题讨论】：

是的，这是一般的想法。如果您不知道是否有实际元素，请检查条件。

标签： javascript html dom web

【解决方案1】：

在您使用getElementById 时，无论何时该元素可能存在或不存在，您都需要这样的保护。您可以使用您显示的if，或

var container_element = document.getElementById('unique-id');
var count = !container_element ? 0 : container_element.getElementsByTagName("div").length;

或类似的。

另一种选择是对异常做出反应：

var container_element = document.getElementById('unique-id');
var count;
try {
    count = container_element.getElementsByTagName("div").length;
} catch (e) {
    count = 0;
}

我注意到您正在使用 jQuery，但没有在该代码中使用它。这太糟糕了，因为如果你是，jQuery 的基于集合的性质意味着你不需要需要守卫：

var container_element = $('#unique-id');
var count = container_element.find("div").length;

即使container_element 是一个空集，您也可以在其上调用方法。大多数 jQuery 方法都提供了对空集的智能处理。例如，在空集上使用 find 会返回一个（新）空集，如上。

您仍然可以选择知道该元素是否存在（更多信息请参见this question's 答案）：

if (container_element[0])
// or
if (container_element.length)

【讨论】：

非常感谢您的解释。我将把它合并到我的代码中。