Javascript 长度未定义或为零答案

【问题标题】：Javascript Length Undefined or ZeroJavascript 长度未定义或为零
【发布时间】：2019-02-19 05:08:37
【问题描述】：

我正在尝试编写一个 Javascript 函数，它返回给定名称的单个元素。我找到了this 问题并修改了答案以使用三元运算符。

function getField(fieldName)
{
    var elements = document.getElementsByName(fieldName);

    return elements.length && elements.legth > 0 ? elements[0] : null;
}

我的问题是关于document.getElementsByName(fieldName) 找不到任何匹配项的情况。它返回undefined 还是0？当我将elements.length 作为警报消息输出时，警报中的值为0，但控制台Chrome 的DevTools 显示undefined。当我从控制台调用console.log(elements.length) 时，它会输出0 和 undefined。

我知道我的函数可以处理这两种情况，但是我在这里缺少什么？ Javascript 实际上在做什么？

提前感谢您帮助我理解这一点。

编辑：很抱歉发布图片而不是实际代码，并感谢语法说明。

【问题讨论】：

请include code as text, not as images。你可能想要elements && elements.length > 0...
alert(something) 返回未定义，console.log() 也是如此。
第一个undefined是alert返回的结果。 console.log 也返回 undefined，但首先打印 elements.length 的值。见Chrome/Firefox console.log always appends a line saying undefined
return elements[0] || null; 会更简单/更快。你甚至可以省略null，因为无论如何undefined 是更好（更通用）的null。
elements.length 怎么不返回 undefined 或者抛出异常？如果没有找到匹配项，getElementsByName() 是否返回空对象？

标签： javascript undefined getelementsbyname

【解决方案1】：

由于您的问题似乎是 document.getElementsByName 在未找到时返回的内容，因此它将是一个空的 NodeList，长度为 0（因此不是未定义）

因此，最简单的方法是 dandavis 在他的评论中建议简单地返回节点列表的第一个元素。如果它是空的，它将是未定义的，如果不是，它将是第一个元素（但不确定它是否总是与您的情况相匹配）

所以你的功能也可能是

function getFieldAt(fieldName, index = 0) {
  return document.getElementsByName(fieldName)[index];
}

如果不使用可选参数，可以改为

function getFieldAt(fieldName, index) {
  return document.getElementsByName(fieldName)[index || 0];
}

您对 devtools 的误解在 cmets 和其他答案中得到了彻底解释：)

【讨论】：

【解决方案2】：

elements.length 在您的情况下等于 0。

您对console.log 的理解具有误导性：

控制台.log(elements.length); > elements.length 被打印出来。它评估为 0，因此打印 0 > 控制台日志（元素。长度）。它的计算结果为未定义，因此打印了未定义。

【讨论】：

【解决方案3】：

无需测试长度值只需使用：

function getField(fieldName)
{
  let elements = document.getElementsByName(fieldName);
  return (elements[0]) ? elements[0] : null;
}

console.log( getField('div-A') );
console.log( getField('neverExist') );

<div name="div-A"> div-A 1 </div>
<div name="div-A"> div-A 2 </div>
<div name="div-A"> div-A 3 </div>

【讨论】：