Javascript 长度未定义或为零

Question

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

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

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

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

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

在此先感谢您帮助我理解这一点。

编辑： 抱歉张贴图片而不是实际代码，感谢您的语法说明。

Answer 1

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

您对console.log的理解存在误导：

console.log(elements.length);
> elements.length is printed. It evaluates to 0, so 0 is printed
> console.log(elements.length). It evaluates to undefined, so undefined is printed.

Answer 2

因为你的问题似乎是 document.getElementsByName is returning when it isn't found, it would be an empty NodeList，长度为 0（所以不是未定义的）

因此，最简单的方法是像 dandavis 在他的评论中建议的那样简单地 return 节点列表的第一个元素。如果它是空的，它将是未定义的，如果不是，它将是第一个元素（但不确定它是否总是符合你的情况）

所以你的功能还不如

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

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

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

你对 devtools 的误解在评论和其他答案中得到了彻底的解释:)

Answer 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>

Javascript 长度未定义或为零

Javascript Length Undefined or Zero

javascript

undefined

getelementsbyname